selfhostable, read-only reddit client
fixup info-styles, add collapse everywhere
+75
-53
+6
-2
readme.txt
+6
-2
readme.txt
···
5
5
- [ ] fix gallery thumbnails
6
6
- [x] pass query params into templates, add into pagination
7
7
- [ ] subscription manager: reorder, mass add
8
-
- [ ] styles for info-containers
8
+
- [x] styles for info-containers
9
9
- [ ] open in reddit/reply in reddit link
10
10
- [ ] placeholder for unresolvable thumbnails
11
-
- [ ] expand/collapse comments
11
+
- [x] expand/collapse comments
12
+
- [x] fix title rendering in views/comments.pug
13
+
- [x] fix spacing between comments
14
+
- [x] collapse even singular comments
15
+
- [ ] highlights for op, sticky etc.
+16
-19
src/mixins/comment.pug
+16
-19
src/mixins/comment.pug
···
2
2
3
3
mixin infoContainer(data)
4
4
div.comment-info-container
5
-
div.info-item #{fmtnum(data.ups)} ↑
6
-
div.info-item u/#{data.author} #{data.is_submitter ? '(OP)' : ''}
5
+
| #{fmtnum(data.ups)} ↑
6
+
| ·
7
+
span(class=`${data.is_submitter ? 'op' : ''}`)
8
+
| u/#{data.author} #{data.is_submitter ? '(op)' : ''}
9
+
| ·
7
10
if data.collapsed_reason_code == "DELETED"
8
-
div.info-item
9
-
a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete
10
-
div.info-item #{timeDifference(Date.now(), data.created * 1000)}
11
+
a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete
12
+
| ·
13
+
| #{timeDifference(Date.now(), data.created * 1000)}
11
14
12
15
-
13
16
function hasReplies(data) {
···
20
23
- var hasReplyData = hasReplies(data)
21
24
22
25
if kind == "more"
23
-
div(class=`${isfirst ? 'first' : ''}`)
24
-
div.more #{data.count} more comments
26
+
div(class=`more ${isfirst ? 'first' : ''}`)
27
+
| #{data.count} more comments
25
28
else
26
29
div(class=`comment ${isfirst ? 'first' : ''}`)
27
-
if hasReplyData
28
-
details(id=`${data.id}` open="")
29
-
summary.expand-comments
30
-
+infoContainer(data)
31
-
div.comment-body
32
-
!= data.body_html
33
-
30
+
details(id=`${data.id}` open="")
31
+
summary.expand-comments
32
+
+infoContainer(data)
33
+
div.comment-body
34
+
!= data.body_html
35
+
if hasReplyData
34
36
div.replies
35
37
each reply in data.replies.data.children
36
38
+comment(reply, false)
37
-
38
-
else
39
-
+infoContainer(data)
40
-
div.comment-body
41
-
!= data.body_html
+44
-24
src/public/styles.css
+44
-24
src/public/styles.css
···
7
7
--blockquote-color: green;
8
8
--link-color: #29BC9B;
9
9
--link-visited-color: #999;
10
+
--accent: var(--link-color);
10
11
11
12
font-family: Inter, sans-serif;
12
-
font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'tnum' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1;
13
+
font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1;
13
14
14
15
}
15
16
···
22
23
--blockquote-color: lightgreen;
23
24
--link-color: #79ffe1;
24
25
--link-visited-color: #999;
26
+
--accent: var(--link-color);
25
27
}
26
28
}
27
29
···
38
40
main {
39
41
display: flex;
40
42
flex-direction: column;
41
-
gap: 1rem;
42
43
align-items: center;
43
44
}
44
45
···
111
112
}
112
113
113
114
.post, .hero {
114
-
font-size: 1rem;
115
+
font-size: 0.9rem;
115
116
}
116
117
117
118
.comments-container {
118
-
font-size: 1rem;
119
+
font-size: 0.9rem;
119
120
}
120
121
121
122
.info-container a,
122
123
.info-container,
123
124
.comment-info-container,
124
125
.more,
125
-
summary::before,
126
-
hr {
126
+
summary::before
127
+
{
127
128
color: var(--text-color-muted)
128
129
}
129
130
···
163
164
height: 4rem;
164
165
}
165
166
167
+
.media-preview a {
168
+
font-size: 2rem;
169
+
text-decoration: none;
170
+
padding: 1rem;
171
+
}
172
+
166
173
.post-author {
167
174
display: none
168
175
}
···
180
187
width: 90%;
181
188
}
182
189
.post, .hero {
183
-
font-size: 1.3rem;
190
+
font-size: 1rem;
184
191
}
185
192
.comments-container {
186
-
font-size: 1.3rem;
193
+
font-size: 1rem;
187
194
}
188
195
.info-container, .comment-info-container, .more
189
196
{
190
-
font-size: 1rem;
197
+
font-size: 0.8rem;
191
198
}
192
199
summary::before {
193
-
font-size: 0.8rem;
200
+
font-size: 0.7rem;
194
201
}
195
202
.domain {
196
-
font-size: 1rem;
203
+
font-size: 0.8rem;
197
204
}
198
205
.media-preview img,
199
206
.media-preview video
200
207
{
201
208
width: 7rem;
202
209
height: 7rem;
210
+
}
211
+
.media-preview a {
212
+
font-size: 2rem;
213
+
padding: 2rem;
203
214
}
204
215
.post-author {
205
216
display: inline
···
215
226
width: 60%;
216
227
}
217
228
.post, .hero {
218
-
font-size: 1.3rem;
229
+
font-size: 1rem;
219
230
}
220
231
.comments-container {
221
-
font-size: 1.3rem;
232
+
font-size: 1rem;
222
233
}
223
234
.info-container, .comment-info-container, .more {
224
-
font-size: 1rem;
235
+
font-size: 0.8rem;
225
236
}
226
237
summary::before {
227
-
font-size: 0.8rem;
238
+
font-size: 0.7rem;
228
239
}
229
240
.domain {
230
-
font-size: 1rem;
241
+
font-size: 0.8rem;
231
242
}
232
243
.media-preview img,
233
244
.media-preview video
···
235
246
width: 7rem;
236
247
height: 7rem;
237
248
}
249
+
.media-preview a {
250
+
font-size: 2rem;
251
+
padding: 2rem;
252
+
}
238
253
.post-author {
239
254
display: inline
240
255
}
···
250
265
.comment, .more {
251
266
width: 100%;
252
267
border-left: 1px dashed var(--text-color-muted);
253
-
padding: 10px 0px 0px 24px;
268
+
padding: 8px 0px 0px 24px;
254
269
box-sizing: border-box;
255
270
}
256
271
···
258
273
padding: 0px 0px 0px 24px;
259
274
}
260
275
261
-
.more {
262
-
margin-bottom: 0px;
263
-
}
264
-
265
276
.first {
266
277
border-left: none;
267
278
padding-left: 0;
268
-
margin: 0;
269
-
margin-top: 40px;
279
+
margin-top: 10px;
270
280
}
271
281
272
282
.post-container {
···
321
331
}
322
332
323
333
hr {
324
-
border 1px solid #000;
334
+
border: none;
335
+
border-top: 1px dashed var(--text-color-muted);
336
+
height: 0;
325
337
}
326
338
327
339
blockquote {
···
402
414
width: auto;
403
415
max-height: 500px;
404
416
}
417
+
418
+
.post-title {
419
+
margin-top: 0;
420
+
}
421
+
422
+
.op {
423
+
color: var(--accent);
424
+
}
+9
-8
src/views/comments.pug
+9
-8
src/views/comments.pug
···
21
21
h3.sub-title
22
22
a(href=`/r/${post.subreddit}`) ← r/#{post.subreddit}
23
23
24
-
h2 #{post.title}
24
+
div.info-container
25
+
p
26
+
| #{fmtnum(post.ups)} ↑
27
+
| · by u/#{post.author}
28
+
| ·
29
+
| #{timeDifference(Date.now(), post.created * 1000)}
30
+
31
+
h2.post-title
32
+
!= post.title
25
33
26
34
if post.is_gallery && post.is_gallery == true
27
35
if post.gallery_data
···
47
55
48
56
if post.selftext_html
49
57
p.self-text !{post.selftext_html}
50
-
51
-
div.info-container
52
-
p
53
-
| #{fmtnum(post.ups)} ↑
54
-
| · by u/#{post.author}
55
-
| ·
56
-
| #{timeDifference(Date.now(), post.created * 1000)}
57
58
58
59
hr
59
60