about summary refs log tree commit diff
diff options
context:
space:
mode:
authorVincent Ambo <mail@tazj.in>2018-05-22T08·17+0200
committerVincent Ambo <github@tazj.in>2018-05-22T08·37+0200
commitd90dc2d77fd813257e24a45456cb6b10791999e6 (patch)
treebe95c6b21fbc96232a4a9a5c19bf51b512759bb3
parentff697ff7925066dcad27f383e0cd1a76d2342b80 (diff)
fix(templates): Fix layout of user info on desktop view
-rw-r--r--static/styles.css10
-rw-r--r--templates/thread.html5
2 files changed, 10 insertions, 5 deletions
diff --git a/static/styles.css b/static/styles.css
index b2a16b7a6473..b57fd899ea8d 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -95,10 +95,16 @@ html, body {
   max-width: 860px;
 }
 .converse .mdl-card .avatar-card {
-    margin-left: auto;
-    margin-right: auto;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
     margin-top: 30px;
 }
+.desktop-avatar {
+    width: 80px;
+    margin-right: auto;
+    margin-left: auto;
+}
 .mobile-avatar {
     width: 30px;
     border-radius: 8px;
diff --git a/templates/thread.html b/templates/thread.html
index c3902a456f9b..bd6d031bc2ba 100644
--- a/templates/thread.html
+++ b/templates/thread.html
@@ -38,9 +38,8 @@
                         {# card to display avatars on desktop #}
                         <div class="mdl-card mdl-shadow--2dp mdl-cell--2-col mdl-cell--hide-phone mdl-cell--hide-tablet avatar-box">
                             <div class="avatar-card">
-                                <img src="https://www.gravatar.com/avatar/{{ post.author_gravatar }}?d=monsterid&s=160" style="width: 80px;"/>
-                                <br>
-                                <span class="user-name">{{ post.author_name }}</span>
+                                <img class="desktop-avatar" src="https://www.gravatar.com/avatar/{{ post.author_gravatar }}?d=monsterid&s=160" />
+                                <p class="user-name">{{ post.author_name }}</p>
                             </div>
                         </div>
                         {# card for main post content #}