oppi.li
selfhostable, read-only reddit client
Remove `card`-specific `post` elements
+25
-28
src/mixins/post.pug
+25
-28
src/mixins/post.pug
···
77
77
| #{p.domain}
78
78
| ↗
79
79
80
-
if (isPostGallery(p) || isPostImage(p) || isPostVideo(p))
81
-
details(id=`${p.id}`,class=`${query.view}`)
82
-
summary.expand-post expand media
83
-
div.image-viewer(class=`${query.view}`)
84
-
if isPostGallery(p)
85
-
div.gallery(class=`${query.view}`)
86
-
each item in postGalleryItems(p)
87
-
div.gallery-item(class=`${query.view}`)
88
-
div.gallery-item-idx(class=`${query.view}`)
89
-
| #{`${item.idx}/${item.total}`}
90
-
a(href=`/media/${item.url}`)
91
-
img(src=item.url loading="lazy")
92
-
else if isPostImage(p)
93
-
a(href=`/media/${p.url}`)
94
-
img(src=p.url loading="lazy").post-media
95
-
else if isPostVideo(p)
96
-
video(controls="" muted="" data-dashjs-player="" preload="metadata" playsinline="" poster=decodedVideos[4] objectfit="contain" loading="lazy").post-media
97
-
//HLS
98
-
source(src=decodedVideos[0])
99
-
// Dash
100
-
source(src=decodedVideos[1])
101
-
// Fallback
102
-
source(src=decodedVideos[2])
103
-
button(onclick=`toggleDetails('${p.id}')`,class=`${query.view}`)
104
-
if (query.view == 'card')
105
-
| ╳
106
-
else
107
-
| close
80
+
if query.view == "compact" && (isPostGallery(p) || isPostImage(p) || isPostVideo(p))
81
+
details(id=`${p.id}`)
82
+
summary.expand-post expand media
83
+
div.image-viewer
84
+
if isPostGallery(p)
85
+
div.gallery
86
+
each item in postGalleryItems(p)
87
+
div.gallery-item
88
+
div.gallery-item-idx
89
+
| #{`${item.idx}/${item.total}`}
90
+
a(href=`/media/${item.url}`)
91
+
img(src=item.url loading="lazy")
92
+
else if isPostImage(p)
93
+
a(href=`/media/${p.url}`)
94
+
img(src=p.url loading="lazy").post-media
95
+
else if isPostVideo(p)
96
+
video(controls="" muted="" data-dashjs-player="" preload="metadata" playsinline="" poster=decodedVideos[4] objectfit="contain" loading="lazy").post-media
97
+
//HLS
98
+
source(src=decodedVideos[0])
99
+
// Dash
100
+
source(src=decodedVideos[1])
101
+
// Fallback
102
+
source(src=decodedVideos[2])
103
+
button(onclick=`toggleDetails('${p.id}')`)
104
+
| close
+5
-35
src/public/styles.css
+5
-35
src/public/styles.css
···
61
61
overflow: auto;
62
62
}
63
63
64
+
img.media-maximized {
65
+
cursor: zoom-in;
66
+
}
67
+
64
68
img.media-maximized.zoom {
65
69
max-width: unset;
66
70
max-height: unset;
71
+
cursor: zoom-out;
67
72
}
68
73
69
74
main {
···
193
198
194
199
.media-preview.card > img {
195
200
cursor: pointer;
196
-
}
197
-
198
-
.image-viewer.card {
199
-
/* Safari on iOS <= 17 */
200
-
-webkit-backdrop-filter: blur(2rem);
201
-
backdrop-filter: blur(2rem);
202
-
position: fixed;
203
-
inset: 0;
204
-
box-sizing: border-box;
205
-
display: flex;
206
-
height: 100%;
207
-
width: 100%;
208
-
justify-content: center;
209
-
align-items: center;
210
-
z-index: 100;
211
-
}
212
-
213
-
.image-viewer.card > button {
214
-
position: absolute;
215
-
top: 0;
216
-
right: 0;
217
-
margin: 1rem;
218
-
padding: initial;
219
-
height: 3rem;
220
-
width: 3rem;
221
-
font-size: 2rem;
222
-
border-radius: 100%;
223
-
cursor: pointer;
224
-
}
225
-
226
-
.image-viewer.card > a > img {
227
-
max-width: 100vw;
228
-
max-height: 100vh;
229
-
width: auto;
230
-
height: auto;
231
201
}
232
202
233
203
.gallery.card {