From 8e75c00a8e6e51200e8e59438d97073b3dd1a681 Mon Sep 17 00:00:00 2001
From: Aaron Fischer <mail@aaron-fischer.net>
Date: Sun, 23 Apr 2017 22:46:37 +0200
Subject: [PATCH] Better alignment of detail page attributes

---
 resources/public/css/screen.css |   4 ++
 resources/scss/screen.scss      |   5 ++
 resources/templates/detail.html | 108 ++++++++++++++++----------------
 3 files changed, 64 insertions(+), 53 deletions(-)

diff --git a/resources/public/css/screen.css b/resources/public/css/screen.css
index 8ddc6bd..749ffb1 100644
--- a/resources/public/css/screen.css
+++ b/resources/public/css/screen.css
@@ -16,3 +16,7 @@
 .detail-image a {
   display: block;
   text-align: center; }
+
+#detail-attributes {
+  max-width: 1024px;
+  margin: auto; }
diff --git a/resources/scss/screen.scss b/resources/scss/screen.scss
index 5c54cb0..1e5f477 100644
--- a/resources/scss/screen.scss
+++ b/resources/scss/screen.scss
@@ -21,3 +21,8 @@
     text-align: center;
   }
 }
+
+#detail-attributes {
+  max-width: 1024px;
+  margin: auto;
+}
diff --git a/resources/templates/detail.html b/resources/templates/detail.html
index a0d492e..2cf8f57 100644
--- a/resources/templates/detail.html
+++ b/resources/templates/detail.html
@@ -43,62 +43,64 @@
     <img class="card-img-top" src="/images/normal/{{ image.hash }}" alt="{{ image.title }}"/>
   </a>
 </div>
-{% ifequal identity ":creator" %}
-<div class="btn-group pull-right clearfix" role="group">
-  <a class="btn btn-primary btn-sm" href="/edit/{{ image.id }}">
-    <span class="fa fa-pencil"></span>
-    Bearbeiten
-  </a>
-  <a class="btn btn-danger btn-sm" href="/delete/{{ image.id }}">
-    <span class="fa fa-trash"></span>
-    Löschen
-  </a>
-</div>
-{% endifequal %}
 
-<p>{{ image.created_at|parse-date|date:"dd.MM.yyyy, HH:mm" }} Uhr</p>
-{% if image.description|length > 0 %}
-<div class="col-md7">
-  <p>{{ image.description|markdown-to-html|safe }}</p>
-</div>
-{% endif %}
+<div id="detail-attributes">
+  {% ifequal identity ":creator" %}
+  <div class="btn-group pull-right clearfix" role="group">
+    <a class="btn btn-primary btn-sm" href="/edit/{{ image.id }}">
+      <span class="fa fa-pencil"></span>
+      Bearbeiten
+    </a>
+    <a class="btn btn-danger btn-sm" href="/delete/{{ image.id }}">
+      <span class="fa fa-trash"></span>
+      Löschen
+    </a>
+  </div>
+  {% endifequal %}
 
-<ul class="list-unlisted">
-  {% for comment in comments %}
-  <li class="media mb-3">
-    <a name="{{ comment.id }}"></a>
-    <img src="https://robohash.org/{{ comment.author }}?size=50x50" class="d-flex mr-3"/>
-    <div class="media-body">
-      <h5 class="mt-0 mb-1">{{ comment.author }}</h5>
-      {% ifequal identity ":creator" %}
-      <a class="btn btn-sm btn-danger" href="/delete-comment/{{ comment.id}}">Löschen</a>
-      {% endifequal %}
-      {{ comment.comment|markdown-to-html|safe }}
+  <p>{{ image.created_at|parse-date|date:"dd.MM.yyyy, HH:mm" }} Uhr</p>
+  {% if image.description|length > 0 %}
+  <div class="col-md7">
+    <p>{{ image.description|markdown-to-html|safe }}</p>
+  </div>
+  {% endif %}
+
+  <ul class="list-unlisted">
+    {% for comment in comments %}
+    <li class="media mb-3">
+      <a name="{{ comment.id }}"></a>
+      <img src="https://robohash.org/{{ comment.author }}?size=50x50" class="d-flex mr-3"/>
+      <div class="media-body">
+        <h5 class="mt-0 mb-1">{{ comment.author }}</h5>
+        {% ifequal identity ":creator" %}
+        <a class="btn btn-sm btn-danger" href="/delete-comment/{{ comment.id}}">Löschen</a>
+        {% endifequal %}
+        {{ comment.comment|markdown-to-html|safe }}
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+
+  <form action="/add-comment/{{ image.id }}" method="POST" class="form-horizontal">
+    {% csrf-field %}
+
+    <div class="form-group">
+      <label for="author">Name</label>
+      <input type="text" name="author" class="form-control"
+             value="{{ saved-author }}"
+             placeholder="Bitte einen Namen wählen (wird beim nächsten Mal gespeichert)">
     </div>
-  </li>
-  {% endfor %}
-</ul>
 
-<form action="/add-comment/{{ image.id }}" method="POST" class="form-horizontal">
-  {% csrf-field %}
-
-  <div class="form-group">
-    <label for="author">Name</label>
-    <input type="text" name="author" class="form-control"
-           value="{{ saved-author }}"
-           placeholder="Bitte einen Namen wählen (wird beim nächsten Mal gespeichert)">
-  </div>
-
-  <div class="form-group">
-    <label for="comment">Kommentar</label>
-    <textarea name="comment" class="form-control" rows="3"
-              placeholder="Es kann auch Markdown-Syntax verwendet werden"></textarea>
-  </div>
-
-  <button type="submit" class="btn btn-success">
-    <span class="fa fa-floppy-o"></span>
-    Kommentar hinzufügen
-  </button>
-</form>
+    <div class="form-group">
+      <label for="comment">Kommentar</label>
+      <textarea name="comment" class="form-control" rows="3"
+                placeholder="Es kann auch Markdown-Syntax verwendet werden"></textarea>
+    </div>
 
+    <button type="submit" class="btn btn-success">
+      <span class="fa fa-floppy-o"></span>
+      Kommentar hinzufügen
+    </button>
+  </form>
+</div>
 {% endblock %}