From e351d76a0e3dfc99a2ea3747ecb3aa06c7c6a613 Mon Sep 17 00:00:00 2001
From: PortableProgrammer <nick@warnerheavyindustries.com>
Date: Wed, 8 Jan 2025 17:44:39 +0000
Subject: Feat: Card View - Update `media` page, allow zooming

---
 src/public/styles.css | 33 ++++++++++++++++++++++++---------
 src/views/media.pug   | 11 ++++++++---
 2 files changed, 32 insertions(+), 12 deletions(-)

(limited to 'src')

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
-- 
cgit v1.2.3