refactor(templates): Restyle thread view using flex layout

1 files changed, 35 insertions, 48 deletions

diff --git a/templates/thread.html b/templates/thread.html
index 7a2d6ee2ef..f11b96b4d7 100644
--- a/templates/thread.html
+++ b/templates/thread.html
@@ -21,59 +21,46 @@
     </header>
 
     <div class="container">
-      <div class="row">
-        <div class="col-12">
-          <div class="list-group">
-            <div class="list-group-item flex-column">
-              <div class="row">
-                <div class="col-12">
-                  <h3>{{ title }}</h3>
-                </div>
-              </div>
-            </div>
+      <div class="list-group d-flex flex-column">
+        <div class="list-group-item d-flex">
+          <h3>{{ title }}</h3>
+        </div>
 
-            {% for post in posts -%}
-            <div id="post-{{ post.id}}" class="list-group-item flex-column align-items-start">
-              <a href="/thread/{{ id }}#post-{{ post.id }}">
-                <small class="text-muted float-right">{{ post.posted }}</small>
-              </a>
-              <div class="row">
-                <div class="col-2 border-right">
-                  <div class="row">
-                    <div class="col-12">
-                      <img src="https://www.gravatar.com/avatar/{{ post.author_gravatar }}?d=monsterid" />
-                    </div>
-                  </div>
-                  <div class="row">
-                    <div class="col-12">
-                      <strong>{{ post.author_name }}</strong>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-10">
-                  {{ post.body }}
-                </div>
-              </div>
+        {% for post in posts -%}
+        <div id="post-{{ post.id}}" class="list-group-item d-flex flex-row">
+          <div class="d-flex flex-column pr-3 mr-1 border-right">
+            <img src="https://www.gravatar.com/avatar/{{ post.author_gravatar }}?d=monsterid" style="width: 80px;"/>
+            <strong>{{ post.author_name }}</strong>
+          </div>
+
+          <div class="align-self-stretch">{{ post.body }}</div>
+
+          <div class="d-inline-flex flex-column align-items-end ml-auto">
+            <a href="/thread/{{ id }}#post-{{ post.id }}" class="ml-auto">
+              <small class="text-muted float-right">{{ post.posted }}</small>
+            </a>
+
+            <div class="d-inline-flex flex-row mt-auto ml-auto">
+              {%- if post.editable %}
+              <a href="#edit" class="badge badge-light border m-1 p-1">Edit</a>
+              {% endif -%}
+              <a href="#quote" class="badge badge-light border m-1 p-1">Quote</a>
             </div>
-            {%- endfor %}
+          </div>
+        </div>
+        {%- endfor %}
 
-            <div class="list-group-item flex-column align-items-start">
-              <div class="row">
-                <div class="col-12">
-                  <form id="reply-form" action="/thread/reply" method="post">
-                    <input type="hidden" id="thread_id" name="thread_id" value="{{ id }}">
-                    <label for="body">You can use <strong>Markdown</strong>!</label>
-                    <div class="input-group">
-                      <textarea class="form-control" id="body" name="body" aria-label="thread response"></textarea>
-                      <div class="input-group-append">
-                        <button class="btn btn-outline-primary" type="submit">Post!</button>
-                      </div>
-                    </div>
-                  </form>
-                </div>
+        <div class="list-group-item flex-column align-items-start">
+          <form id="reply-form" action="/thread/reply" method="post">
+            <input type="hidden" id="thread_id" name="thread_id" value="{{ id }}">
+            <label for="body">You can use <strong>Markdown</strong>!</label>
+            <div class="input-group">
+              <textarea class="form-control" id="body" name="body" aria-label="thread response" rows="10"></textarea>
+              <div class="input-group-append">
+                <button class="btn btn-primary" type="submit">Post!</button>
               </div>
             </div>
-          </div>
+          </form>
         </div>
       </div>
     </div>