oppi.li
selfhostable, read-only reddit client
Feat: Card View - Update `media` page, allow zooming
+32
-12
+24
-9
src/public/styles.css
+24
-9
src/public/styles.css
···
51
51
overflow: hidden;
52
52
}
53
53
54
+
body.media-maximized {
55
+
/* Fix for Safari User Agent stylesheet */
56
+
margin: 0;
57
+
}
58
+
59
+
body.media-maximized.zoom,
60
+
div.media-maximized.container.zoom {
61
+
overflow: auto;
62
+
}
63
+
64
+
img.media-maximized.zoom {
65
+
max-width: unset;
66
+
max-height: unset;
67
+
}
68
+
54
69
main {
55
70
display: flex;
56
71
flex-direction: column;
···
326
341
padding: 1rem;
327
342
}
328
343
329
-
.media-maximized-container {
330
-
display: flex;
331
-
justify-content: center;
332
-
align-items: center;
333
-
width: 100vw;
334
-
height: 100vh;
335
-
overflow: hidden;
336
-
}
337
-
338
344
.media-maximized {
339
345
max-width: 100vw;
340
346
max-height: 100vh;
···
343
349
display: block;
344
350
margin: auto;
345
351
object-fit: contain;
352
+
}
353
+
354
+
.media-maximized.container {
355
+
display: flex;
356
+
justify-content: center;
357
+
align-items: center;
358
+
width: 100vw;
359
+
height: 100vh;
360
+
overflow: hidden;
346
361
}
347
362
348
363
.post-author {
+8
-3
src/views/media.pug
+8
-3
src/views/media.pug
···
2
2
doctype html
3
3
html
4
4
+head("home")
5
-
body
6
-
div.media-maximized-container
5
+
script(type='text/javascript').
6
+
function toggleZoom() {
7
+
Array.from(document.getElementsByClassName('media-maximized')).forEach(element => element.classList.toggle('zoom'));
8
+
}
9
+
10
+
body.media-maximized
11
+
div.media-maximized.container
7
12
if kind == 'img'
8
-
img(src=url).media-maximized
13
+
img(src=url onclick=`toggleZoom()`).media-maximized
9
14
else
10
15
video(src=url controls).media-maximized