From c7846c4f8b3e5c9b75a2ec7ee1680c3d052796b7 Mon Sep 17 00:00:00 2001
From: Lephe <sebastien.michelland@protonmail.com>
Date: Sat, 31 Oct 2020 15:15:44 +0100
Subject: [PATCH] threads: improve layout and flow of messages

* When there is enough space, put links and date on the right
* On small screens, compact profile information
* On small screens, leave links and date on the right to maximize
  message width
---
 app/static/css/responsive.css     |  8 +++----
 app/static/css/table.css          | 35 ++++++++++++++++++++++++++++---
 app/static/css/widgets.css        | 19 +++++++++++++++++
 app/templates/widgets/thread.html | 16 +++++++-------
 app/templates/widgets/user.html   |  2 +-
 5 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/app/static/css/responsive.css b/app/static/css/responsive.css
index 3886763..5aad72f 100644
--- a/app/static/css/responsive.css
+++ b/app/static/css/responsive.css
@@ -13,6 +13,10 @@
 	#menu a {
 		font-size: 13px;
 	}
+
+	section {
+		width: 90%;
+	}
 }
 
 @media all and (min-width: 1400px) {
@@ -33,10 +37,6 @@
 	.home-pinned-content article:nth-child(5) {
 		display: none;
 	}
-
-	section {
-		width: 90%;
-	}
 }
 
 @media screen and (max-width: 849px) {
diff --git a/app/static/css/table.css b/app/static/css/table.css
index 54d4aae..7b99124 100644
--- a/app/static/css/table.css
+++ b/app/static/css/table.css
@@ -70,13 +70,42 @@ table.topiclist tr > td:last-child {
 
 table.thread {
   width: 100%;
+  border-width: 1px 0;
+}
+table.thread.topcomment {
+  border: none;
 }
 table.thread td.author {
-  width: 20%;
+  width: 256px;
 }
 table.thread td {
-	vertical-align: top;
+  vertical-align: top;
 }
 table.thread td:nth-child(2) {
-	padding-top: 10px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+table.thread div.info {
+  float: right;
+  text-align: right;
+  opacity: 0.7;
+  padding-top: 8px;
+  margin-left: 16px;
+}
+@media screen and (max-width: 1199px) {
+  table.thread div.info {
+    float: none;
+    display: flex;
+    flex-direction: row;
+    margin-left: 0;
+  }
+  table.thread div.info > *:not(:last-child):after {
+    content: '·';
+    margin: 0 4px;
+  }
+  table.thread td.author {
+    /* Includes padding */
+    width: 136px;
+  }
 }
diff --git a/app/static/css/widgets.css b/app/static/css/widgets.css
index 6e7f6c8..a788e11 100644
--- a/app/static/css/widgets.css
+++ b/app/static/css/widgets.css
@@ -56,6 +56,25 @@
 	margin-bottom: 8px;
 }
 
+@media screen and (max-width: 1199px) {
+  table.thread .profile {
+    flex-direction: column;
+    width: 128px;
+  }
+  table.thread .profile-avatar {
+    order: 1;
+    margin-right: 0;
+  }
+  table.thread .profile-title,
+  table.thread .profile-points,
+  table.thread .profile-xp {
+    display: none;
+  }
+  table.thread .profile-points-small {
+    display: inline;
+  }
+}
+
 /* Trophies */
 .trophies {
 	display: flex; flex-wrap: wrap; justify-content: space-between;
diff --git a/app/templates/widgets/thread.html b/app/templates/widgets/thread.html
index b5cf1e1..d34c793 100644
--- a/app/templates/widgets/thread.html
+++ b/app/templates/widgets/thread.html
@@ -8,14 +8,14 @@
     {% if c != top_comment %}
         <td class="author">{{ widget_user.profile(c.author) }}</td>
         <td>
-            <div>{% if c.date_created != c.date_modified %}
-                Posté le {{ c.date_created|date }} (Modifié le {{ c.date_modified|date }})
-            {% else %}
-                Posté le {{ c.date_created|dyndate }}
-            {% endif %}
-            | <a href="{{ request.path }}#{{ c.id }}">#</a>
-            | <a href="{{ url_for('edit_post', postid=c.id, r=request.path) }}">Modifier</a>
-            | <a href="{{ url_for('delete_post', postid=c.id, csrf_token=csrf_token()) }}" onclick="return confirm('Le message sera supprimé')">Supprimer</a>
+            <div class="info">
+                <div>Posté le {{ c.date_created|date }}</div>
+                {% if c.date_created != c.date_modified %}
+                    <div>Modifié le {{ c.date_modified|date }}</div>
+                {% endif %}
+                <div><a href="{{ request.path }}#{{ c.id }}">Permalink</a></div>
+                <div><a href="{{ url_for('edit_post', postid=c.id, r=request.path) }}">Modifier</a></div>
+                <div><a href="{{ url_for('delete_post', postid=c.id, csrf_token=csrf_token()) }}" onclick="return confirm('Le message sera supprimé')">Supprimer</a></div>
             </div>
 
             {{ c.text|md }}
diff --git a/app/templates/widgets/user.html b/app/templates/widgets/user.html
index 0b50e23..659927f 100644
--- a/app/templates/widgets/user.html
+++ b/app/templates/widgets/user.html
@@ -10,7 +10,7 @@
 			<div class="profile-title">Membre</div>
 			{% endif %}
 			<div class="profile-points">Niveau {{ user.level[0] }} <span>({{ user.xp }})</span></div>
-			<div class="profile-points-small">N{{ user.level[0] }} <span>({{ user.xp }})</span></div>
+			<div class="profile-points-small">Niv. {{ user.level[0] }}</div>
 			{% if user.level[0] <= 100 %}
 				<div class="profile-xp"><div style='width: {{ user.level[0] }}%;'></div></div>
 			{% else %}