From 775162559ea9b619eb8e82ccac3486fc9d430de1 Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Sat, 8 Sep 2018 09:55:59 +0100
Subject: [PATCH] Improve user page on small screens

Center avatar's alt text, since the only fix to display them on a single line would
break valid avatars
---
 static/css/main.css              | 17 +++++++++++++++--
 templates/users/header.html.tera | 16 +++++++++-------
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 9114a1ae..5514f8ad 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -542,10 +542,10 @@ main .article-meta .tags li a {
  	display: flex;
  	flex-direction: row;
  	align-items: center;
- 	margin-bottom: 0;
+    margin: 0px;
  }
  .badge {
- 	margin-left: 1em;
+ 	margin-right: 1em;
  	padding: 0.35em 1em;
 
  	background: #F4F4F4;
@@ -664,6 +664,16 @@ main .article-meta .tags li a {
     flex: 1;
 }
 
+.flex.vertical {
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: flex-start;
+}
+
+.flex.vertical small {
+    margin: initial;
+}
+
 .left-icon {
     align-self: center;
     padding: 1em;
@@ -718,6 +728,7 @@ figcaption {
 
 .avatar {
     border-radius: 100%;
+    text-align: center; /* for alt-text */
 }
 
 .avatar.small {
@@ -875,4 +886,6 @@ figcaption {
         align-items: center;
     }
     body > footer * { margin: 1em auto; }
+
+    .flex.wrap { flex-direction: column; }
  }
diff --git a/templates/users/header.html.tera b/templates/users/header.html.tera
index 437e7187..c466e40f 100644
--- a/templates/users/header.html.tera
+++ b/templates/users/header.html.tera
@@ -1,12 +1,13 @@
 <div class="user">
-    <div class="flex">
+    <div class="flex wrap">
         <img class="avatar medium" src="{{ user.avatar }}" alt="{{ "{{ name}}'s avatar'" | _(name=user.name) }}">
 
-        <h1 class="grow">
+        <h1 class="grow flex vertical">
             {{ user.name }}
-
             <small>@{{ user.fqn }}</small>
+        </h1>
 
+        <p>
             {% if user.is_admin %}
                 <span class="badge">{{ "Admin" | _ }}</span>
             {% endif %}
@@ -14,10 +15,11 @@
             {% if is_self %}
                 <span class="badge">{{ "It is you" | _ }}</span>
             {% endif %}
-        </h1>
-        {% if is_self %}
-            <a href="/@/{{ user.username }}/edit" class="button inline-block">{{ "Edit your profile" | _ }}</a>
-        {% endif %}
+
+            {% if is_self %}
+                <a href="/@/{{ user.username }}/edit" class="button inline-block">{{ "Edit your profile" | _ }}</a>
+            {% endif %}
+        </p>
     </div>
 
     {% if is_remote %}