From 69fe2580b05d2dbb3c1705f7d192fbba7eb261b2 Mon Sep 17 00:00:00 2001
From: Max Mehl <mail@mehl.mx>
Date: Thu, 1 Feb 2024 20:50:13 +0100
Subject: [PATCH] add number text on slideshow, refactor names

---
 assets/scss/snap-gallery.scss   | 29 ++++++++++++++++-------------
 layouts/partials/gallery.html   |  2 +-
 layouts/partials/slideshow.html |  3 ++-
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/assets/scss/snap-gallery.scss b/assets/scss/snap-gallery.scss
index 240b42c..c851f3b 100644
--- a/assets/scss/snap-gallery.scss
+++ b/assets/scss/snap-gallery.scss
@@ -1,6 +1,7 @@
 $gap: var(--gap);
 
-.snap-gallery-wrapper, .snap-slideshow-wrapper {
+.snap-gallery,
+.snap-slideshow {
   margin-bottom: $gap;
 
   /* Create equal columns in flexbox */
@@ -19,14 +20,14 @@ $gap: var(--gap);
   }
 }
 
-.snap-gallery-wrapper {
+.snap-gallery {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: $gap;
 }
 
-.snap-slideshow-wrapper {
+.snap-slideshow {
 
   // Hide all contained images except the first
   .snap-image:not(:first-child) {
@@ -85,16 +86,6 @@ $gap: var(--gap);
   max-height: 80%;
   height: 100%;
 
-  /* Number text (1/3 etc) */
-  .numbertext {
-    color: #f2f2f2;
-    background-color: #000;
-    font-size: 12px;
-    padding: 8px 12px;
-    position: absolute;
-    top: 10%;
-  }
-
   img {
     max-height: 100%;
   }
@@ -107,6 +98,18 @@ $gap: var(--gap);
   }
 }
 
+/* Number text (1/3 etc) */
+.snap-lightbox,
+.snap-slideshow {
+  .numbertext {
+    color: #f2f2f2;
+    background-color: #000;
+    font-size: 12px;
+    padding: 8px 12px;
+    position: absolute;
+  }
+}
+
 // /* Caption text */
 // .caption-container {
 //   text-align: center;
diff --git a/layouts/partials/gallery.html b/layouts/partials/gallery.html
index 5535e37..7b20f5d 100644
--- a/layouts/partials/gallery.html
+++ b/layouts/partials/gallery.html
@@ -1,6 +1,6 @@
 {{ $imgs := .imgs }}
 {{ $galno := .galno }}
-<div class="snap-gallery-wrapper" style="--columns:{{ default 4 .columns }};--min-width:{{ default 200 .minwidth }};--gap:10px;">
+<div class="snap-gallery" style="--columns:{{ default 4 .columns }};--min-width:{{ default 200 .minwidth }};--gap:10px;">
   {{ range $i, $img := $imgs }}
   <div class="snap-image">
     <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">
diff --git a/layouts/partials/slideshow.html b/layouts/partials/slideshow.html
index e18366e..c9b50d6 100644
--- a/layouts/partials/slideshow.html
+++ b/layouts/partials/slideshow.html
@@ -1,8 +1,9 @@
 {{ $imgs := .imgs }}
 {{ $galno := .galno }}
-<div class="snap-slideshow-wrapper" id="snap-slideshow-{{ $galno }}" style="--columns:1;--min-width:0px;--gap:0px;">
+<div class="snap-slideshow" id="snap-slideshow-{{ $galno }}" style="--columns:1;--min-width:0px;--gap:0px;">
   {{ range $i, $img := $imgs }}
   <div class="snap-image">
+    <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
     <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">
   </div>
   {{ end }}