Feat: Card View - Update `media` page, allow zooming

2 files changed, 32 insertions, 12 deletions

diff --git a/src/public/styles.css b/src/public/styles.css
index 7a6345a..abc2f13 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -51,6 +51,21 @@ body:has(details.card[open]) {
   overflow: hidden;
 }
 
+body.media-maximized {
+  /* Fix for Safari User Agent stylesheet */
+  margin: 0;
+}
+
+body.media-maximized.zoom,
+div.media-maximized.container.zoom {
+  overflow: auto;
+}
+
+img.media-maximized.zoom {
+  max-width: unset;
+  max-height: unset;
+}
+
 main {
   display: flex;
   flex-direction: column;
@@ -326,15 +341,6 @@ summary::before {
   padding: 1rem;
 }
 
-.media-maximized-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
-
 .media-maximized {
   max-width: 100vw;
   max-height: 100vh;
@@ -345,6 +351,15 @@ summary::before {
   object-fit: contain;
 }
 
+.media-maximized.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
 .post-author {
   display: none
 }
diff --git a/src/views/media.pug b/src/views/media.pug
index 4476dbb..e945704 100644
--- a/src/views/media.pug
+++ b/src/views/media.pug
@@ -2,9 +2,14 @@ include ../mixins/head
 doctype html
 html
   +head("home")
-  body
-    div.media-maximized-container
+  script(type='text/javascript').
+    function toggleZoom() {
+      Array.from(document.getElementsByClassName('media-maximized')).forEach(element => element.classList.toggle('zoom'));
+    }
+
+  body.media-maximized
+    div.media-maximized.container
       if kind == 'img'
-        img(src=url).media-maximized
+        img(src=url onclick=`toggleZoom()`).media-maximized
       else
         video(src=url controls).media-maximized