From be9276f4c0f1955901ef2d2d4bdcedc2ca4de272 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Thu, 7 Mar 2024 18:10:29 -0800
Subject: [PATCH] Better photo scaling without scroll in lightbox modal

---
 web/static/css/theme.css         | 13 ++++++++++---
 web/templates/photo/gallery.html | 14 ++++++++++----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/web/static/css/theme.css b/web/static/css/theme.css
index 8c9cfbf..cc05479 100644
--- a/web/static/css/theme.css
+++ b/web/static/css/theme.css
@@ -46,9 +46,16 @@ img {
 
 /* Photo modals in addition to Bulma .modal-content */
 .photo-modal {
-    width: auto !important;
-    max-width: fit-content;
-    max-height: fit-content;
+    width: calc(100vw - 40px);
+    max-height: calc(100vh - 40px);
+}
+.photo-modal #detailImg {
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+.photo-modal img {
+    max-height: calc(100vh - 50px);
 }
 
 /* Custom bulma tag colors */
diff --git a/web/templates/photo/gallery.html b/web/templates/photo/gallery.html
index 81f9d8c..55a35fc 100644
--- a/web/templates/photo/gallery.html
+++ b/web/templates/photo/gallery.html
@@ -169,8 +169,12 @@
         <div class="modal" id="detail-modal">
             <div class="modal-background"></div>
             <div class="modal-content photo-modal">
-                <div class="image is-fullwidth">
-                    <img id="detailImg">
+                <!-- Notes: to get the image to always scale and fit on screen, it is made as a background image in CSS
+                     on the detailImg div; but we don't have the image's minimum size here, so the hidden <img> inside
+                     provides the size pushing to make it visible on screen, otherwise the divs are 0x0 pixels and nothing
+                     would be visible. -->
+                <div id="detailImg">
+                    <img style="visibility: hidden">
                 </div>
             </div>
             <button class="modal-close is-large" aria-label="close"></button>
@@ -755,8 +759,10 @@
         });
     });
     function setModalImage(url) {
-        let $modalImg = document.querySelector("#detailImg");
-        $modalImg.src = url;
+        let $modalImg = document.querySelector("#detailImg"),
+            $img = $modalImg.getElementsByTagName("img")[0];
+        $img.src = url;
+        $modalImg.style.backgroundImage = `url(${url})`;
         return false;
     }
 </script>