selfhostable, read-only reddit client
More CSS cleanup and (hopefully) final tweaks. * Further adjusted `--border-radius-*` vars to reduce egregious curvature. * Adjusted `post-text` padding and max width in `card` view to reduce text overflow on smaller screens. * Left `details` collapsed in `card` view when there is no media to preview. * Corrected `.image-viewer` margins when `details` is collapsed in `card` view. * Added `isPostMedia` function to `postUtils` to consolidate some `if` statements. * Fixed links not showing in `card` view if there was no other media.
+27
-24
+3
-3
src/mixins/post.pug
+3
-3
src/mixins/post.pug
···
28
28
a(href=`/r/${p.subreddit}?sort=${sortQuery}&view=${viewQuery}`) r/#{p.subreddit}
29
29
| ·
30
30
a(href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) #{fmtnum (p.num_comments)} ↩
31
-
if (query.view == "card" && !isPostGallery(p) && !isPostImage(p) && !isPostVideo(p) && p.selftext_html)
31
+
if (query.view == "card" && !isPostMedia(p) && p.selftext_html)
32
32
div.self-text-overflow.card
33
33
if p.spoiler || p.over_18
34
34
div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`)
···
54
54
a(href=p.url)
55
55
| ↗
56
56
57
-
details(id=`${p.id}` open=(query.view == "card") class=`${query.view}`)
57
+
details(id=`${p.id}` open=(query.view == "card" && (isPostMedia(p) || isPostLink(p))) class=`${query.view}`)
58
58
summary.expand-post expand media
59
59
div.image-viewer
60
-
if query.view == "card" && (p.spoiler || p.over_18) && (isPostGallery(p) || isPostImage(p) || isPostVideo(p))
60
+
if query.view == "card" && (p.spoiler || p.over_18) && isPostMedia(p)
61
61
div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`)
62
62
h2
63
63
!= p.over_18 ? 'nsfw' : 'spoiler'
+4
src/mixins/postUtils.pug
+4
src/mixins/postUtils.pug
+20
-21
src/public/styles.css
+20
-21
src/public/styles.css
···
11
11
--link-visited-color: #999;
12
12
--accent: var(--link-color);
13
13
--error-text-color: red;
14
-
--border-radius-card: 4vmin;
15
-
--border-radius-media: 3vmin;
16
-
--border-radius-preview: 2vmin;
14
+
--border-radius-card: 2vmin;
15
+
--border-radius-media: 1.5vmin;
16
+
--border-radius-preview: 1vmin;
17
17
18
18
font-family: Inter, sans-serif;
19
19
font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1;
···
174
174
175
175
.post-text.card {
176
176
padding: 0.9rem;
177
-
padding-top: 0.3rem;
177
+
padding-top: 0.5rem;
178
+
padding-bottom: 0.5rem;
179
+
overflow-wrap: break-word;
180
+
max-width: 95%;
178
181
}
179
182
180
183
.self-text-overflow.card {
···
185
188
overflow: hidden;
186
189
overflow-wrap: break-word;
187
190
display: block;
191
+
max-width: 98%;
188
192
}
189
193
190
194
.self-text.card {
···
200
204
.image-viewer {
201
205
position: relative;
202
206
margin: 0.9rem;
203
-
margin-bottom: 0.3rem;
204
-
}
205
-
206
-
.image-viewer:not(:has(details)) {
207
-
margin: unset;
208
207
}
209
208
210
209
.image-viewer > img {
···
314
313
.image-viewer a:has(img) {
315
314
font-size: 0rem;
316
315
padding: unset;
316
+
margin: unset;
317
317
}
318
318
319
319
.media-preview a,
···
363
363
364
364
@media (min-width: 768px) {
365
365
:root {
366
-
--border-radius-card: 2vmin;
366
+
--border-radius-card: 1vmin;
367
367
--border-radius-media: 1vmin;
368
368
--border-radius-preview: 0.5vmin;
369
369
}
···
387
387
margin: 0.7rem;
388
388
padding: initial;
389
389
}
390
-
.self-text.card {
391
-
-webkit-line-clamp: 4;
392
-
line-clamp: 4;
390
+
.post-text.card {
391
+
max-width: 100%;
392
+
}
393
+
.self-text-overflow.card {
394
+
max-width: 100%;
393
395
}
394
396
.post-author {
395
397
display: inline
···
410
412
411
413
@media (min-width: 1080px) {
412
414
:root {
413
-
--border-radius-card: 1vmin;
414
-
--border-radius-media: 1vmin;
415
+
--border-radius-card: 0.5vmin;
416
+
--border-radius-media: 0.5vmin;
417
+
--border-radius-preview: 0.3vmin;
415
418
}
416
419
.post, .comments-container, .hero, .header, .footer {
417
420
flex: 1 1 60%;
···
438
441
padding: initial;
439
442
}
440
443
.self-text.card {
441
-
-webkit-line-clamp: 6;
442
-
line-clamp: 6;
444
+
-webkit-line-clamp: 4;
445
+
line-clamp: 4;
443
446
}
444
447
.post-author {
445
448
display: inline
···
459
462
}
460
463
461
464
@media (min-width: 2560px) {
462
-
:root {
463
-
--border-radius-card: 0.75vmin;
464
-
--border-radius-media: 0.75vmin;
465
-
}
466
465
.post, .comments-container, .hero, .header, .footer {
467
466
flex: 1 1 40%;
468
467
width: 40%;