frontend: redesign score and timeago subtitle

This commit is contained in:
Adhityaa Chandrasekar 2018-12-18 19:10:12 -05:00
parent 1f8f3b3a36
commit bcc81e1ad8
2 changed files with 21 additions and 9 deletions

View File

@ -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);

View File

@ -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";
}