From 132828389b9e90e97d7df086a48bfdab03db9d5b Mon Sep 17 00:00:00 2001
From: Max Mehl <mail@mehl.mx>
Date: Thu, 1 Feb 2024 23:12:08 +0100
Subject: [PATCH] improve prev/next buttons

---
 assets/scss/snap-gallery.scss   | 109 +++++++++++++++++---------------
 layouts/partials/lightbox.html  |   4 +-
 layouts/partials/slideshow.html |   6 +-
 3 files changed, 64 insertions(+), 55 deletions(-)

diff --git a/assets/scss/snap-gallery.scss b/assets/scss/snap-gallery.scss
index c851f3b..8a83bfe 100644
--- a/assets/scss/snap-gallery.scss
+++ b/assets/scss/snap-gallery.scss
@@ -2,11 +2,15 @@ $gap: var(--gap);
 
 .snap-gallery,
 .snap-slideshow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
   margin-bottom: $gap;
 
   /* Create equal columns in flexbox */
   .snap-image {
-    cursor: pointer;
+    cursor: zoom-in;
 
     /* Column amount and width are configurable by style variables */
     width: calc(100% / var(--columns) - #{$gap});
@@ -21,9 +25,7 @@ $gap: var(--gap);
 }
 
 .snap-gallery {
-  display: flex;
   flex-wrap: wrap;
-  justify-content: center;
   gap: $gap;
 }
 
@@ -96,11 +98,17 @@ $gap: var(--gap);
     z-index: 810;
     position: relative;
   }
+
+  @media screen and (max-width: 767px) {
+    max-width: 80%;
+  }
 }
 
 /* Number text (1/3 etc) */
 .snap-lightbox,
 .snap-slideshow {
+  user-select: none;
+
   .numbertext {
     color: #f2f2f2;
     background-color: #000;
@@ -119,50 +127,68 @@ $gap: var(--gap);
 // }
 
 /* prev/next arrows & close button */
-.snap-lightbox-prev,
-.snap-lightbox-next {
-  position: fixed;
+.snap-prev,
+.snap-next {
+  color: #fff;
+  text-decoration: none !important;
+  font-size: 30px;
+
+  position: absolute;
+  height: 100%;
   z-index: 800;
   width: 5%;
-  height: 100%;
-  text-align: center;
-  top: 0;
   cursor: pointer;
 
-  .snap-lightbox-arrow {
-    display: inline-block;
-    position: fixed;
-    top: 50%;
-    z-index: 900;
-    border: solid #fff;
-    border-width: 0 7px 7px 0;
-    display: inline-block;
+  // Slideshow specifics
+  .snap-slideshow & {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: rgba(0, 0, 0, 0.7);
+
+    height: 15%;
+    width: 10%;
+    min-height: 50px;
+    min-width: 50px;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.8);
+      transition: all 0.25s ease;
+    }
+  }
+
+  // Lightbox-specifics
+  .snap-lightbox & {
+    @media screen and (max-width: 767px) {
+      width: 10%;
+    }
+  }
+
+  // Item containing arrow
+  span {
     padding: 1%;
-  }
 
-  &:hover>.snap-lightbox-arrow {
-    border-color: #999;
-    transition: all 0.25s ease;
+    // Lightbox specifics
+    .snap-lightbox & {
+      position: fixed;
+      top: 50%;
+    }
   }
 }
 
-.snap-lightbox-prev {
+// Position arrows for left/right
+.snap-prev {
   left: 0;
-
-  .snap-lightbox-arrow {
-    left: 2%;
-    transform: rotate(135deg);
-    -webkit-transform: rotate(135deg);
+  .snap-lightbox & span {
+    left: 0.5%;
   }
 }
 
-.snap-lightbox-next {
+.snap-next {
   right: 0;
-
-  .snap-lightbox-arrow {
-    right: 2%;
-    transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
+  .snap-lightbox & span {
+    right: 0.5%;
   }
 }
 
@@ -188,20 +214,3 @@ $gap: var(--gap);
     cursor: pointer;
   }
 }
-
-@media screen and (max-width: 767px) {
-  .snap-lightbox-inner {
-    max-width: 80%;
-  }
-
-  .snap-lightbox-prev,
-  .snap-lightbox-next {
-    width: 10%;
-  }
-
-  .snap-lightbox-close-button {
-    width: 10%;
-    height: calc(10vw);
-    /* ~10% width */
-  }
-}
diff --git a/layouts/partials/lightbox.html b/layouts/partials/lightbox.html
index a9037ee..0945f64 100644
--- a/layouts/partials/lightbox.html
+++ b/layouts/partials/lightbox.html
@@ -11,8 +11,8 @@
   <!-- Close and Next/previous controls -->
   <span class="snap-close" onclick="closeLightbox({{ $galno }})">&times;</span>
 
-  <a class="snap-lightbox-prev" onclick="moveLightboxItem({{ $galno }}, -1)"><i class="snap-lightbox-arrow"></i></a>
-  <a class="snap-lightbox-next" onclick="moveLightboxItem({{ $galno }}, 1)"><i class="snap-lightbox-arrow"></i></a>
+  <a class="snap-prev" onclick="moveLightboxItem({{ $galno }}, -1)"><span>&#10094;</span></a>
+  <a class="snap-next" onclick="moveLightboxItem({{ $galno }}, 1)"><span>&#10095;</span></a>
 
   {{/*  <!-- Caption text -->
   <div class="caption-container">
diff --git a/layouts/partials/slideshow.html b/layouts/partials/slideshow.html
index c9b50d6..2b15cb9 100644
--- a/layouts/partials/slideshow.html
+++ b/layouts/partials/slideshow.html
@@ -7,7 +7,7 @@
     <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">
   </div>
   {{ end }}
-</div>
 
-<a onclick="moveSlideshowItem({{ $galno }}, -1)">prev</a>
-<a onclick="moveSlideshowItem({{ $galno }}, 1)">next</a>
+  <a class="snap-prev" onclick="moveSlideshowItem({{ $galno }}, -1)"><span>&#10094;</span></a>
+  <a class="snap-next" onclick="moveSlideshowItem({{ $galno }}, 1)"><span>&#10095;</span></a>
+</div>