From bcc81e1ad8e2013cf3db2e560ba5a66b2e3d09d2 Mon Sep 17 00:00:00 2001
From: Adhityaa Chandrasekar <adtac@adtac.in>
Date: Tue, 18 Dec 2018 19:10:12 -0500
Subject: [PATCH] frontend: redesign score and timeago subtitle

---
 frontend/js/commento.js     |  7 ++++++-
 frontend/sass/commento.scss | 23 +++++++++++++++--------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/js/commento.js b/frontend/js/commento.js
index 208d91b..27327ea 100644
--- a/frontend/js/commento.js
+++ b/frontend/js/commento.js
@@ -38,6 +38,7 @@
   var ID_CARD = "commento-comment-card-";
   var ID_BODY = "commento-comment-body-";
   var ID_SUBTITLE = "commento-comment-subtitle-";
+  var ID_TIMEAGO = "commento-comment-timeago-";
   var ID_SCORE = "commento-comment-score-";
   var ID_OPTIONS = "commento-comment-options-";
   var ID_EDIT = "commento-comment-edit-";
@@ -609,6 +610,7 @@
       var card = create("div");
       var header = create("div");
       var subtitle = create("div");
+      var timeago = create("div");
       var score = create("div");
       var body = create("div");
       var options = create("div");
@@ -632,6 +634,7 @@
       card.id = ID_CARD + comment.commentHex;
       body.id = ID_BODY + comment.commentHex;
       subtitle.id = ID_SUBTITLE + comment.commentHex;
+      timeago.id = ID_TIMEAGO + comment.commentHex;
       score.id = ID_SCORE + comment.commentHex;
       options.id = ID_OPTIONS + comment.commentHex;
       edit.id = ID_EDIT + comment.commentHex;
@@ -663,7 +666,7 @@
       card.style["borderLeft"] = "2px solid " + color;
       name.innerText = commenter.name;
       body.innerHTML = comment.html;
-      subtitle.innerHTML = timeDifference((new Date()).getTime(), Date.parse(comment.creationDate));
+      timeago.innerHTML = timeDifference((new Date()).getTime(), Date.parse(comment.creationDate));
       score.innerText = scorify(comment.score);
 
       if (commenter.photo == "undefined") {
@@ -688,6 +691,7 @@
       classAdd(header, "header");
       classAdd(name, "name");
       classAdd(subtitle, "subtitle");
+      classAdd(timeago, "timeago");
       classAdd(score, "score");
       classAdd(body, "body");
       classAdd(options, "options");
@@ -776,6 +780,7 @@
         attrSet(options.childNodes[i], "style", "right: " + (i*32) + "px;");
 
       append(subtitle, score);
+      append(subtitle, timeago);
 
       append(header, options);
       append(header, avatar);
diff --git a/frontend/sass/commento.scss b/frontend/sass/commento.scss
index 57b64d7..6f5f6aa 100644
--- a/frontend/sass/commento.scss
+++ b/frontend/sass/commento.scss
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
 
 .commento-root-min-height {
   min-height: 350px;
@@ -41,7 +41,7 @@
     height: 32px;
     text-align: center;
     color: $red-7;
-    font-weight: bold;
+    font-weight: 700;
   }
 
   .commento-mod-tools {
@@ -53,7 +53,7 @@
     text-transform: uppercase;
     color: $indigo-8;
     font-size: 12px;
-    font-weight: bold;
+    font-weight: 700;
   }
 
   .commento-moderation-notice {
@@ -62,7 +62,7 @@
     height: 32px;
     text-align: center;
     color: $orange-7;
-    font-weight: bold;
+    font-weight: 700;
     margin-top: 16px;
   }
 
@@ -111,7 +111,7 @@
     }
 
     .commento-name {
-      font-weight: bold;
+      font-weight: 700;
       font-size: 14px;
       color: #555;
       border: none;
@@ -131,13 +131,20 @@
       margin-left: 48px;
     }
 
-    .commento-score {
+    .commento-timeago {
       display: inline;
-      color: #999;
+      color: #888;
       font-size: 12px;
     }
 
-    .commento-score::before {
+    .commento-score {
+      display: inline;
+      color: #888;
+      font-size: 12px;
+      font-weight: 700;
+    }
+
+    .commento-timeago::before {
       content: "\00a0 \00a0 \00b7 \00a0 \00a0";
     }