fix(photos): mobile layout

chuhlomin · Oct 29, 2023 · 775043d · 775043d
1 parent 7826904
commit 775043d
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 27 deletions.
diff --git a/content/photos.css b/content/photos.css
@@ -187,30 +187,33 @@ a:hover {
 #viewer .prev {
   grid-column: 1;
   grid-row: 2;
-  align-self: center;
-  text-align: center;
-  width: 70px;
-
 }
 
 #viewer .next {
   grid-column: 3;
   grid-row: 2;
-  align-self: center;
-  text-align: center;
-  width: 70px;
 }
 
 #viewer .close {
   grid-column: 3;
   grid-row: 1;
+}
+
+#viewer .prev,
+#viewer .next {
+  width: calc(70px + 0.3rem);
+}
+
+#viewer .prev,
+#viewer .next,
+#viewer .close {
   align-self: center;
   text-align: center;
 }
 
 #viewer .prev a,
 #viewer .next a,
-#viewer .close {
+#viewer .close a {
   padding: 20px;
   border: none;
   width: 100%;
@@ -219,9 +222,20 @@ a:hover {
   text-decoration: none;
 }
 
+#viewer .close a {
+  display: block;
+  margin-top: 0.3rem;
+  margin-right: 0.3rem;
+  height: 70px;
+  width: 70px;
+  line-height: 100%;
+  color: var(--color-text);
+  border-radius: 100%;
+}
+
 #viewer .prev a:hover,
 #viewer .next a:hover,
-#viewer .close:hover {
+#viewer .close a:hover {
   background: var(--color-neutral-muted);
 }
 
@@ -231,21 +245,13 @@ a:hover {
 }
 
 #viewer .prev a {
-  border-top-right-radius: 100%;
-  border-bottom-right-radius: 100%;
+  border-top-right-radius: 64px;
+  border-bottom-right-radius: 64px;
 }
 
 #viewer .next a {
-  border-top-left-radius: 100%;
-  border-bottom-left-radius: 100%;
-}
-
-#viewer .close {
-  border-radius: 100%;
-  margin-top: 0.3rem;
-  aspect-ratio: 1/1;
-  line-height: 100%;
-  color: var(--color-text);
+  border-top-left-radius: 64px;
+  border-bottom-left-radius: 64px;
 }
 
 #viewer .prev a:focus,
@@ -291,17 +297,70 @@ a:hover {
 
   #viewer .prev a,
   #viewer .next a,
-  #viewer .close {
+  #viewer .close a {
     background: var(--color-background-dark);
   }
 
   #viewer .prev a:hover,
   #viewer .next a:hover,
-  #viewer .close:hover {
+  #viewer .close a:hover {
     background: var(--color-neutral-muted-dark);
   }
 
-  #viewer .close {
+  #viewer .close a {
     color: var(--color-text-dark);
   }
 }
+
+/* mobile view */
+@media (max-width: 600px) {
+  body {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .photos {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .photos .photo {
+    max-width: 132px; /* 120 + 6px border */
+    max-height: 132px;
+  }
+
+  #viewer {
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-rows: 1fr auto;
+  }
+
+  #viewer .photo {
+    grid-column: 1 / span 3;
+    grid-row: 1;
+  }
+
+  #viewer .prev {
+    grid-column: 1;
+    grid-row: 2;
+    width: 100%;
+  }
+
+  #viewer .next {
+    grid-column: 3;
+    grid-row: 2;
+    width: 100%;
+  }
+
+  #viewer .close {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  #viewer .prev a,
+  #viewer .next a {
+    margin-top: 0;
+  }
+
+  #viewer .close a {
+    margin: 0;
+  }
+}
diff --git a/templates/photos.gohtml b/templates/photos.gohtml
@@ -28,7 +28,9 @@
 </div>
 
 <div id="viewer" style="display: none;">
-    <a id="photo-close" class="close" href="#close" aria-label="Close">×</a>
+    <div class="close">
+        <a id="photo-close" class="close" href="#close" aria-label="Close">✗</a>
+    </div>
     <div class="prev">
         <a id="photo-nav-prev" href="#previous" aria-label="Previous">←</a>
     </div>
@@ -58,7 +60,9 @@ var view = function(path) {
         if (photo) {
             document.querySelector("a[href='#" + photo.Path + "']").focus();
         }
-
+        // remove hash from URL
+        window.location.hash = "";
+
         return;
     }
 
@@ -238,7 +242,7 @@ window.addEventListener('load', function() {
                     document.getElementById("photo-nav-next").click();
                 }
             }
-            if (e.keyCode === 27) { // esc
+            if (e.keyCode === 27 || e.keyCode === 88) { // esc or "x"
                 e.preventDefault();
                 document.getElementById("photo-close").click();
             }