Ivan/commento
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

frontend: redesign score and timeago subtitle

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/js/commento.js
View File

@ -38,6 +38,7 @@
var ID_CARD = "commento-comment-card-"; var ID_CARD = "commento-comment-card-";
var ID_BODY = "commento-comment-body-"; var ID_BODY = "commento-comment-body-";
var ID_SUBTITLE = "commento-comment-subtitle-"; var ID_SUBTITLE = "commento-comment-subtitle-";
var ID_TIMEAGO = "commento-comment-timeago-";
var ID_SCORE = "commento-comment-score-"; var ID_SCORE = "commento-comment-score-";
var ID_OPTIONS = "commento-comment-options-"; var ID_OPTIONS = "commento-comment-options-";
var ID_EDIT = "commento-comment-edit-"; var ID_EDIT = "commento-comment-edit-";
@ -609,6 +610,7 @@
var card = create("div"); var card = create("div");
var header = create("div"); var header = create("div");
var subtitle = create("div"); var subtitle = create("div");
var timeago = create("div");
var score = create("div"); var score = create("div");
var body = create("div"); var body = create("div");
var options = create("div"); var options = create("div");
@ -632,6 +634,7 @@
card.id = ID_CARD + comment.commentHex; card.id = ID_CARD + comment.commentHex;
body.id = ID_BODY + comment.commentHex; body.id = ID_BODY + comment.commentHex;
subtitle.id = ID_SUBTITLE + comment.commentHex; subtitle.id = ID_SUBTITLE + comment.commentHex;
timeago.id = ID_TIMEAGO + comment.commentHex;
score.id = ID_SCORE + comment.commentHex; score.id = ID_SCORE + comment.commentHex;
options.id = ID_OPTIONS + comment.commentHex; options.id = ID_OPTIONS + comment.commentHex;
edit.id = ID_EDIT + comment.commentHex; edit.id = ID_EDIT + comment.commentHex;
@ -663,7 +666,7 @@
card.style["borderLeft"] = "2px solid " + color; card.style["borderLeft"] = "2px solid " + color;
name.innerText = commenter.name; name.innerText = commenter.name;
body.innerHTML = comment.html; 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); score.innerText = scorify(comment.score);
if (commenter.photo == "undefined") { if (commenter.photo == "undefined") {
@ -688,6 +691,7 @@
classAdd(header, "header"); classAdd(header, "header");
classAdd(name, "name"); classAdd(name, "name");
classAdd(subtitle, "subtitle"); classAdd(subtitle, "subtitle");
classAdd(timeago, "timeago");
classAdd(score, "score"); classAdd(score, "score");
classAdd(body, "body"); classAdd(body, "body");
classAdd(options, "options"); classAdd(options, "options");
@ -776,6 +780,7 @@
attrSet(options.childNodes[i], "style", "right: " + (i*32) + "px;"); attrSet(options.childNodes[i], "style", "right: " + (i*32) + "px;");
append(subtitle, score); append(subtitle, score);
append(subtitle, timeago);
append(header, options); append(header, options);
append(header, avatar); append(header, avatar);

23
frontend/sass/commento.scss
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 { .commento-root-min-height {
min-height: 350px; min-height: 350px;
@ -41,7 +41,7 @@
height: 32px; height: 32px;
text-align: center; text-align: center;
color: $red-7; color: $red-7;
font-weight: bold; font-weight: 700;
} }
.commento-mod-tools { .commento-mod-tools {
@ -53,7 +53,7 @@
text-transform: uppercase; text-transform: uppercase;
color: $indigo-8; color: $indigo-8;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: 700;
} }
.commento-moderation-notice { .commento-moderation-notice {
@ -62,7 +62,7 @@
height: 32px; height: 32px;
text-align: center; text-align: center;
color: $orange-7; color: $orange-7;
font-weight: bold; font-weight: 700;
margin-top: 16px; margin-top: 16px;
} }
@ -111,7 +111,7 @@
} }
.commento-name { .commento-name {
font-weight: bold; font-weight: 700;
font-size: 14px; font-size: 14px;
color: #555; color: #555;
border: none; border: none;
@ -131,13 +131,20 @@
margin-left: 48px; margin-left: 48px;
} }
.commento-score { .commento-timeago {
display: inline; display: inline;
color: #999; color: #888;
font-size: 12px; 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"; content: "\00a0 \00a0 \00b7 \00a0 \00a0";
} }