selfhostable, read-only reddit client
highlight sticky comments
+20
-3
+6
-2
src/mixins/comment.pug
+6
-2
src/mixins/comment.pug
···
1
1
include ../utils
2
2
3
3
mixin infoContainer(data, next_id, prev_id)
4
+
- var hats = (data.is_submitter?['op']:[]).concat(data.distinguished=="moderator"?['mod']:[])
4
5
div.comment-info-container
5
6
p
6
7
| #{fmtnum(data.ups)} ↑
···
12
13
a(href=`#${prev_id}` title="scroll to previous comment").nav-link prev
13
14
| ·
14
15
span(class=`${data.is_submitter ? 'op' : ''}`)
15
-
| u/#{data.author} #{data.is_submitter ? '(op)' : ''}
16
+
| u/#{data.author} #{hats.length==0?'':`(${hats.join('|')})`}
16
17
| ·
17
18
if data.collapsed_reason_code == "DELETED" || data.author == "[deleted]"
18
19
a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete
···
22
23
if data.edited !== false
23
24
| edited #{timeDifference(Date.now(), data.edited * 1000)} ago
24
25
| ·
26
+
if data.stickied
27
+
| stickied
28
+
| ·
25
29
a(href=`https://reddit.com${data.permalink}` title="view on reddit").nav-link open ↗
26
30
27
31
-
···
38
42
a(href=`/comments/${parent_id}/comment/${data.id}`)
39
43
| #{data.count} more #{fmttxt(data.count, 'comment')}
40
44
else
41
-
div(class=`comment ${isfirst ? 'first' : ''}`)
45
+
div(class=`comment ${isfirst ? 'first' : ''} ${data.stickied ? 'sticky' : ''}`)
42
46
details(id=`${data.id}` open="")
43
47
summary.expand-comments
44
48
+infoContainer(data, next_id, prev_id)
+1
-1
src/mixins/post.pug
+1
-1
src/mixins/post.pug
+13
src/public/styles.css
+13
src/public/styles.css
···
5
5
--text-color: black;
6
6
--text-color-muted: #999;
7
7
--blockquote-color: green;
8
+
--sticky-color: lightgreen;
8
9
--link-color: #29BC9B;
9
10
--link-visited-color: #999;
10
11
--accent: var(--link-color);
···
22
23
--text-color: white;
23
24
--text-color-muted: #999;
24
25
--blockquote-color: lightgreen;
26
+
--sticky-color: #034611;
25
27
--link-color: #79ffe1;
26
28
--link-visited-color: #999;
27
29
--accent: var(--link-color);
···
115
117
nav {
116
118
display: flex;
117
119
align-items: stretch;
120
+
}
121
+
122
+
.post {
123
+
margin-bottom: 5px;
118
124
}
119
125
120
126
.post, .comments-container, .hero, .header, .footer {
···
612
618
text-indent: 1px;
613
619
text-overflow: '';
614
620
}
621
+
622
+
.sticky {
623
+
background-color: var(--sticky-color);
624
+
border-radius: 2px;
625
+
border: 4px solid var(--sticky-color);
626
+
}
627
+