selfhostable, read-only reddit client
highlight sticky comments
authored by
Akshay
and committed by
PortableProgrammer
12fba690
eae5094e
+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
···
4
4
- var from = encodeURIComponent(currentUrl)
5
5
- var viewQuery = query && query.view ? query.view : 'compact'
6
6
- var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot'
7
-
article.post
7
+
article(class=`post ${p.stickied?"sticky":""}`)
8
8
div.post-container(class=`${query.view}`)
9
9
div.post-text(class=`${query.view}`)
10
10
div.title-container(class=`${query.view}`)
+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);
···
119
121
nav {
120
122
display: flex;
121
123
align-items: stretch;
124
+
}
125
+
126
+
.post {
127
+
margin-bottom: 5px;
122
128
}
123
129
124
130
.post, .comments-container, .hero, .header, .footer {
···
791
797
text-indent: 1px;
792
798
text-overflow: '';
793
799
}
800
+
801
+
.sticky {
802
+
background-color: var(--sticky-color);
803
+
border-radius: 2px;
804
+
border: 4px solid var(--sticky-color);
805
+
}
806
+