From 4e43c676b421c8f38485196c04ffb333f4439898 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Flor=C3=A9al=20Toumikian?= <floreal@nimukaito.net>
Date: Sun, 12 Apr 2020 21:29:48 +0200
Subject: [PATCH] Fixed: #713: Disply likes and boosts on post cards (#744)

This is a basic and simple way to display them. No interaction possible.

Alos, this patch is not optimised. as everytime a partial post_card is
called, `Post::count_likes()` and `Post::count_reshares()` are called
which means quite a few more quesies are sent to database unless diesel
uses some cache mechanisem.

A way to enhance this this would be to keep a count of likes and reshares
are kept in Post model / table.
---
 assets/themes/default/_global.scss   | 23 ++++++++++++++++++-
 templates/partials/post_card.rs.html | 33 +++++++++++++++++++---------
 2 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/assets/themes/default/_global.scss b/assets/themes/default/_global.scss
index d28d23a4..ffa28959 100644
--- a/assets/themes/default/_global.scss
+++ b/assets/themes/default/_global.scss
@@ -190,7 +190,28 @@ p.error {
 
  	background: $gray;
 
- 	text-overflow: ellipsis;
+  text-overflow: ellipsis;
+
+  footer.authors {
+    div {
+      float: left;
+      margin-right: 0.25em;
+    }
+
+    .likes { color: $red; }
+    .reshares { color: $primary; }
+
+    span.likes, span.resahres {
+      font-family: "Route159",serif;
+      font-size: 1em;
+    }
+
+    svg.feather {
+      width: 0.85em;
+      height: 0.85em;
+    }
+  }
+
 
  	> * {
  	  margin: 20px;
diff --git a/templates/partials/post_card.rs.html b/templates/partials/post_card.rs.html
index d0475e95..99fae87a 100644
--- a/templates/partials/post_card.rs.html
+++ b/templates/partials/post_card.rs.html
@@ -17,17 +17,30 @@
         <p class="p-summary" dir="auto">@article.subtitle</p>
     </main>
     <footer class="authors">
-        @Html(i18n!(ctx.1, "By {0}"; format!(
-            "<a class=\"p-author h-card\" href=\"{}\">{}</a>",
-            uri!(user::details: name = &article.get_authors(ctx.0).unwrap_or_default()[0].fqn),
-            escape(&article.get_authors(ctx.0).unwrap_or_default()[0].name())
-        )))
-        @if article.published {
-	       ⋅ <span class="dt-published" datetime="@article.creation_date.format("%F %T")">@article.creation_date.format("%B %e, %Y")</span>
-        }
-        ⋅ <a href="@uri!(blogs::details: name = &article.get_blog(ctx.0).unwrap().fqn, page = _)">@article.get_blog(ctx.0).unwrap().title</a>
+        <div>
+            @Html(i18n!(ctx.1, "By {0}"; format!(
+                "<a class=\"p-author h-card\" href=\"{}\">{}</a>",
+                uri!(user::details: name = &article.get_authors(ctx.0).unwrap_or_default()[0].fqn),
+                escape(&article.get_authors(ctx.0).unwrap_or_default()[0].name())
+            )))
+            @if article.published {
+                ⋅ <span class="dt-published" datetime="@article.creation_date.format("%F %T")">@article.creation_date.format("%B %e, %Y")</span>
+            }
+            ⋅ <a href="@uri!(blogs::details: name = &article.get_blog(ctx.0).unwrap().fqn, page = _)">@article.get_blog(ctx.0).unwrap().title</a>
+            ⋅
+        </div>
         @if !article.published {
-            ⋅ @i18n!(ctx.1, "Draft")
+            <div>⋅ @i18n!(ctx.1, "Draft")</div>
+        } else {
+            <div>
+                <span class="likes" aria-label="@i18n!(ctx.1, "One like", "{0} likes"; article.count_likes(ctx.0).unwrap_or_default())" title="@i18n!(ctx.1, "One like", "{0} likes"; article.count_likes(ctx.0).unwrap_or_default())">
+                    @icon!("heart") @article.count_likes(ctx.0).unwrap_or_default()
+                </span>
+                ⋅
+                <span class="reshares" aria-label="@i18n!(ctx.1, "One like", "{0} boost"; article.count_reshares(ctx.0).unwrap_or_default())" title="@i18n!(ctx.1, "One boost", "{0} boosts"; article.count_reshares(ctx.0).unwrap_or_default())">
+                    @icon!("repeat") @article.count_reshares(ctx.0).unwrap_or_default()
+                </span>
+            </div>
         }
     </footer>
 </div>