From 01013aaf063cbfe6b21f80c81895b8af019a90ba Mon Sep 17 00:00:00 2001
From: Rasmus Kaj <kaj@kth.se>
Date: Thu, 12 Jan 2023 01:22:21 +0100
Subject: [PATCH] Changed zoom-on-click to use fullscreen.

---
 CHANGELOG.md              |  2 ++
 res/photos.scss           | 20 +++++++-------------
 res/ux.js                 | 10 +++++++++-
 templates/details.rs.html |  2 +-
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 64bbc32..c1acae9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,8 @@ The format is based on
 
 * Check for null bytes in autocomplete patterns, make them result in a
   400 bad request rather than a 500 internal server error.
+* Changed zoom-on-click to use fullscreen.  I think that is an
+  improvement especially on mobile.
 * Improved logging by using tracing and tracing-subscriber rather than
   log and env_logger.
 * Four more kinds of OSM areas to recognize.
diff --git a/res/photos.scss b/res/photos.scss
index 2efd640..d589d52 100644
--- a/res/photos.scss
+++ b/res/photos.scss
@@ -10,6 +10,7 @@ body {
     background: #eee;
     display: flex;
     flex-direction: column;
+    font-family: serif;
     justify-content: space-between;
     line-height: 1.6;
 }
@@ -248,28 +249,25 @@ main.details {
         width: -moz-available;
         width: -webkit-fill-available;
         width: available;
-        &.zoom {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: -moz-available;
-            height: -moz-available;
-            z-index: 10000;
+        &:fullscreen {
             object-fit: contain;
+            border: 0;
+            background: #222;
         }
     }
 }
 
-@media screen and (min-width: 50em) {
+@media screen and (min-width: 56ch) {
     main.details {
         align-items: start;
         display: grid;
         flex: content 1 1;
         grid-gap: 1ex;
-        grid-template-columns: 1fr fit-content(29%);
+        grid-template-columns: 1fr clamp(24ch, 29%, 52ch);
         grid-template-rows: min-content 1fr min-content 1fr;
         max-height: -moz-available;
         overflow: hidden;
+        min-height: 20em;
 
         h1 {
             grid-column: 2;
@@ -286,10 +284,6 @@ main.details {
             object-fit: scale-down;
             width: auto;
             height: auto;
-
-            .zoom {
-                grid-column: 1 / 3;
-            }
         }
         .places a:nth-child(n+2) {
             font-size: 80%;
diff --git a/res/ux.js b/res/ux.js
index 4c08fb5..f03870a 100644
--- a/res/ux.js
+++ b/res/ux.js
@@ -33,7 +33,15 @@
   let i = d.querySelector('.details .item');
   if (i) {
     i.addEventListener('click', e => {
-      i.classList.toggle('zoom');
+      if (!d.fullscreenElement) {
+        let full = d.querySelector('.meta a.full');
+        if (full && (i.src != full.href)) {
+          i.src = full.href;
+        }
+        i.requestFullscreen();
+      } else if (d.exitFullscreen) {
+        d.exitFullscreen();
+      }
       resize_map();
     });
   }
diff --git a/templates/details.rs.html b/templates/details.rs.html
index b0dd111..2f2f6ac 100644
--- a/templates/details.rs.html
+++ b/templates/details.rs.html
@@ -14,7 +14,7 @@
     <img class="item" src="/img/@photo.id-m.jpg" width="@photo.get_size(SizeTag::Medium).0" height="@photo.get_size(SizeTag::Medium).1">
     <div class="meta">
     @if context.is_authorized() {
-    <p><a href="/img/@photo.id-l.jpg">@photo.path</a></p>
+    <p><a href="/img/@photo.id-l.jpg" class="full">@photo.path</a></p>
     @if photo.is_public() {<p>This photo is public.</p>}
     else {<p>This photo is not public.</p>}
     }