oppi.li
selfhostable, read-only reddit client
Minor image/gallery/link tweaks post-consolidation. * Brings `comments` in line with `card` / `compact` gallery and `.image-viewer` styles. * Tweaks link positioning for `link` posts. * Force `video` scrubber previews to autoplay inline, mainly for mobile screens. * Adds `.image-viewer.main-content` style to handle media sizing and tweaks on `comments` view separate from `card` / `compact` views. * Switch to use `vmin` instead of `px` for `--border-radius-*` vars to properly scale across views and viewport sizes.
+1
-1
src/mixins/post.pug
+1
-1
src/mixins/post.pug
···
47
47
img(src=url onclick=onclick)
48
48
else if isPostVideo(p)
49
49
- var decodedVideos = decodePostVideoUrls(p)
50
-
video(autoplay="" muted="" data-dashjs-player="" onclick=`toggleDetails('${p.id}')` poster=decodedVideos[4] width="100px" height="100px")
50
+
video(autoplay="" playsinline="" muted="" data-dashjs-player="" onclick=`toggleDetails('${p.id}')` poster=decodedVideos[4] width="100px" height="100px")
51
51
// Scrubber
52
52
source(src=decodedVideos[3])
53
53
else if isPostLink(p)
+15
-12
src/public/styles.css
+15
-12
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: 8px;
15
-
--border-radius-media: 6px;
16
-
--border-radius-preview: 4px;
14
+
--border-radius-card: 4vmin;
15
+
--border-radius-media: 3vmin;
16
+
--border-radius-preview: 2vmin;
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;
···
302
302
object-fit: fill;
303
303
}
304
304
305
+
.image-viewer.main-content img,
306
+
.image-viewer.main-content video {
307
+
max-height: 70vh;
308
+
}
309
+
310
+
.image-viewer.main-content a {
311
+
margin: unset;
312
+
}
313
+
305
314
.image-viewer a:has(img) {
306
315
font-size: 0rem;
307
316
padding: unset;
···
311
320
.image-viewer a {
312
321
font-size: 1.5rem;
313
322
text-decoration: none;
314
-
padding: 1rem;
323
+
padding: unset;
324
+
margin: 1rem;
315
325
}
316
326
317
327
.media-maximized {
···
415
425
}
416
426
.image-viewer a {
417
427
font-size: 1rem;
418
-
margin: 0.5rem;
428
+
margin: 1rem;
419
429
padding: initial;
420
430
}
421
431
.self-text.card {
···
611
621
details:not([open]) summary::before {
612
622
content: "";
613
623
padding-right: 10px;
614
-
}
615
-
616
-
details.compact {
617
-
/*
618
-
display: flex;
619
-
flex-basis: 100%;
620
-
*/
621
624
}
622
625
623
626
.footer {
+18
-17
src/views/comments.pug
+18
-17
src/views/comments.pug
···
47
47
h2.post-title
48
48
!= post.title
49
49
50
-
if isPostGallery(post)
51
-
div.gallery
52
-
each item in postGalleryItems(post)
53
-
div.gallery-item
54
-
div.gallery-item-idx
55
-
| #{`${item.idx}/${item.total}`}
56
-
a(href=`/media/${item.url}`)
57
-
img(src=item.url loading="lazy")
58
-
else if isPostImage(post)
59
-
a(href=`/media/${post.url}`)
60
-
img(src=post.url).post-media
61
-
else if isPostVideo(post)
62
-
- var url = post.secure_media.reddit_video.dash_url
63
-
video(controls data-dashjs-player src=`${url}`).post-media
64
-
else if isPostLink(post)
65
-
a(href=post.url)
66
-
| #{post.url}
50
+
div.image-viewer.main-content
51
+
if isPostGallery(post)
52
+
div.gallery
53
+
each item in postGalleryItems(post)
54
+
div.gallery-item
55
+
a(href=`/media/${item.url}`)
56
+
img(src=item.url loading="lazy")
57
+
div.gallery-item-idx
58
+
| #{`${item.idx}/${item.total}`}
59
+
else if isPostImage(post)
60
+
a(href=`/media/${post.url}`)
61
+
img(src=post.url).post-media
62
+
else if isPostVideo(post)
63
+
- var url = post.secure_media.reddit_video.dash_url
64
+
video(controls data-dashjs-player src=`${url}`).post-media
65
+
else if isPostLink(post)
66
+
a(href=post.url)
67
+
| #{post.domain} ↗
67
68
68
69
if post.selftext_html
69
70
div.self-text