From 11e66472f9d8cb0218ca637e21f91afb98c949a5 Mon Sep 17 00:00:00 2001
From: Matthieu <madeorsk@protonmail.com>
Date: Mon, 25 Jun 2018 14:07:28 +0200
Subject: [PATCH] Improved Likes / Reshares section

---
 static/main.css                   | 98 ++++++++++++++++++++++++-------
 templates/posts/details.html.tera | 37 ++++++------
 2 files changed, 95 insertions(+), 40 deletions(-)

diff --git a/static/main.css b/static/main.css
index 2f033c33..2ea63e5c 100644
--- a/static/main.css
+++ b/static/main.css
@@ -133,40 +133,94 @@ main .article-meta .reshares p { display: inline-block; margin: 0; }
 
 /* Like / Reshare button */
 
+main .article-meta .actions {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+}
+
 main .article-meta .likes,
 main .article-meta .reshares {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 	padding: 0.5em 0;
 }
 
-main .article-meta .likes a.button:before {
-	content: "";
-	margin-right: 0.5em;
-	color: #E92F2F;
-	font-family: "Font Awesome 5 Free";
-	font-weight: 400;
+main .article-meta .likes > p,
+main .article-meta .reshares > p {
+	font-size: 1.5em;
 }
-main .article-meta .reshares a.button:before {
-	content: "";
-	margin-right: 0.5em;
-	color: #7765E3;
-	font-family: "Font Awesome 5 Free";
-	font-weight: 600;
-}
-main .article-meta .likes a.button.liked:before,
-main .article-meta .reshares a.button.reshared:before { font-weight: 900; }
+
 main .article-meta .likes a.button,
 main .article-meta .reshares a.button {
-	display: inline-block;
-	margin: 0 1em;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	margin: 0;
 	padding: 0;
 	background: none;
 	color: #242424;
 	border: none;
 }
-main .article-meta .likes a.button:hover,
-main .article-meta .likes a.button.liked { color: #E92F2F; }
-main .article-meta .reshares a.button:hover,
-main .article-meta .reshares a.button.reshared { color: #7765E3; }
+
+main .article-meta .likes > p,
+main .article-meta .likes a.button:hover { color: #E92F2F; }
+main .article-meta .reshares > p,
+main .article-meta .reshares a.button:hover { color: #7765E3; }
+
+main .article-meta .likes a.button:before,
+main .article-meta .reshares a.button:before {
+	transition: background 0.1s ease-in;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	margin: 0.5em 0;
+	width: 2.5em;
+	height: 2.5em;
+
+	border-radius: 50%;
+	font-family: "Font Awesome 5 Free";
+}
+
+main .article-meta .likes a.button:before {
+	content: "";
+	color: #E92F2F;
+	border: solid #E92F2F thin;
+	font-weight: 400;
+}
+main .article-meta .likes a.button:hover:before {
+	background: rgba(233, 47, 47, 0.15);
+}
+
+main .article-meta .reshares a.button:before {
+	content: "";
+	color: #7765E3;
+	border: solid #7765E3 thin;
+	font-weight: 600;
+}
+main .article-meta .reshares a.button:hover:before {
+	background: rgba(119, 101, 227, 0.15);
+}
+
+main .article-meta .likes a.button.liked:before { background: #E92F2F; }
+main .article-meta .likes a.button.liked:hover:before {
+	background: rgba(233, 47, 47, 0.25);
+	color: #E92F2F;
+}
+main .article-meta .reshares a.button.reshared:before { background: #7765E3; }
+main .article-meta .reshares a.button.reshared:hover:before {
+	background: rgba(119, 101, 227, 0.25);
+	color: #7765E3;
+}
+
+main .article-meta .likes a.button.liked:before,
+main .article-meta .reshares a.button.reshared:before {
+	color: #F4F4F4;
+	font-weight: 900;
+}
 
 /* ~ Comments ~ */
 
@@ -373,6 +427,7 @@ form.new-post input[type="submit"] {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
+	padding: 0 5%;
 }
 .card {
 	flex: 1;
@@ -417,6 +472,7 @@ form.new-post input[type="submit"] {
 	font-size: 1em;
 	line-height: 1.25em;
 	text-align: left;
+	overflow: hidden;
 }
 
 /* ================= *
diff --git a/templates/posts/details.html.tera b/templates/posts/details.html.tera
index 5f4be6c4..2ec1d216 100644
--- a/templates/posts/details.html.tera
+++ b/templates/posts/details.html.tera
@@ -36,26 +36,25 @@
     <div class="article-meta">
         <p>{{ "This article is under the {{ license }} license." | _(license=post.license) }}</p>
 
-        <div class="likes">
-            <p>
-                {{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}
-            </p>
+        <div class="actions">
+            <div class="likes">
+                <p aria-label="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}" title="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}">{{ n_likes }}</p>
 
-            {% if has_liked %}
-                <a class="button liked" href="like">{{ "I don't like this anymore" | _ }}</a>
-            {% else %}
-                <a class="button" href="like">{{ "Add yours" | _ }}</a>
-            {% endif %}
-        </div>
-        <div class="reshares">
-            <p>
-                {{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}
-            </p>
-            {% if has_reshared %}
-                <a class="button reshared" href="reshare">{{ "I don't want to reshare this anymore" | _ }}</a>
-            {% else %}
-                <a class="button" href="reshare">{{ "Reshare" | _ }}</a>
-            {% endif %}
+                {% if has_liked %}
+                    <a class="button liked" href="like">{{ "I don't like this anymore" | _ }}</a>
+                {% else %}
+                    <a class="button" href="like">{{ "Add yours" | _ }}</a>
+                {% endif %}
+            </div>
+            <div class="reshares">
+                <p aria-label="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}" title="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}">{{ n_reshares }}</p>
+
+                {% if has_reshared %}
+                    <a class="button reshared" href="reshare">{{ "I don't want to reshare this anymore" | _ }}</a>
+                {% else %}
+                    <a class="button" href="reshare">{{ "Reshare" | _ }}</a>
+                {% endif %}
+            </div>
         </div>
 
         <div class="comments">