From fb39759dd33211fb20b08df48e0ffcfcca5d1426 Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Mon, 21 Oct 2024 23:03:48 +0800
Subject: [PATCH 1/5] display gallery as flexbox + add borders to media

---
 static/style.css     | 55 +++++++++++++++++++++++++++++++++++++++++---
 templates/utils.html |  7 ++++--
 2 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/static/style.css b/static/style.css
index a9d893a3..eae84b15 100644
--- a/static/style.css
+++ b/static/style.css
@@ -223,8 +223,8 @@ nav #redlib {
     vertical-align: -2px;
 }
 
-figcaption {
-    margin-top: 5px;
+figcaption p {
+    margin: 5px 0;
     text-align: center;
 }
 
@@ -1112,6 +1112,13 @@ a.search_subreddit:hover {
     overflow: hidden;
 }
 
+.post_media_content:not(:has(.post_media_video)),
+.post_media_video,
+.gallery {
+    border: var(--panel-border);
+    border-radius: 5px;
+}
+
 .post_media_video {
     min-width: 100px;
     max-width: 100px;
@@ -1169,9 +1176,51 @@ a.search_subreddit:hover {
     vertical-align: bottom;
 }
 
+.gallery {
+    display: flex;
+    flex-flow: row nowrap;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    align-items: center;
+    background: var(--background);
+    transition: background 0.2s;
+}
+
+.post:hover .gallery {
+    background: var(--post);
+}
+
+.gallery figure {
+    flex: 1 0 100%;
+    scroll-snap-align: center;
+    scroll-snap-stop: always;
+    margin: 0;
+}
+
+.gallery_length {
+    position: sticky;
+    flex-shrink: 0;
+    align-self: start;
+    right: 2%;
+    top: 2%;
+    width: 6em;
+    padding: 10px 5px;
+    margin-left: calc(-6em - 5px*2);
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 5px;
+    transition: opacity 0.2s;
+}
+
+.gallery_length:focus {
+    opacity: 0;
+}
+
 .gallery img {
+    display: block;
+    margin: auto;
     max-width: 100%;
-    vertical-align: bottom;
+    border-radius: 5px;
 }
 
 .gallery .outbound_url {
diff --git a/templates/utils.html b/templates/utils.html
index e0b3589c..12e213f9 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -136,17 +136,20 @@ <h1 class="post_title">
 	{% endif %}
 	{% else if post.post_type == "gallery" %}
 	<div class="gallery">
-	{% for image in post.gallery -%}
+		{% for image in post.gallery -%}
 		<figure>
 			<a href="{{ image.url }}" ><img loading="lazy" alt="Gallery image" src="{{ image.url }}"/></a>
 			<figcaption>
+				{% if !image.caption.is_empty() %}
 				<p>{{ image.caption }}</p>
+				{% endif %}
 				{% if image.outbound_url.len() > 0 %}
 				<p><a class="outbound_url" href="{{ image.outbound_url }}" rel="nofollow">{{ image.outbound_url }}</a>
 				{% endif %}
 			</figcaption>
 		</figure>
-	{%- endfor %}
+		{%- endfor %}
+		<div class="gallery_length" tabindex="-1">gallery<br>({{ post.len() }} images)</div>
 	</div>
 	{% else if post.post_type == "link" %}
 	<a id="post_url" href="{{ post.media.url }}" rel="nofollow">{{ post.media.url }}</a>

From f39cf81e5bfe78981ecd7c4e159bf1140cffdc1c Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Mon, 21 Oct 2024 23:13:09 +0800
Subject: [PATCH 2/5] fix `post.gallery.len()`

---
 templates/utils.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/utils.html b/templates/utils.html
index 12e213f9..3d9af77f 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -149,7 +149,7 @@ <h1 class="post_title">
 			</figcaption>
 		</figure>
 		{%- endfor %}
-		<div class="gallery_length" tabindex="-1">gallery<br>({{ post.len() }} images)</div>
+		<div class="gallery_length" tabindex="-1">gallery<br>({{ post.gallery.len() }} images)</div>
 	</div>
 	{% else if post.post_type == "link" %}
 	<a id="post_url" href="{{ post.media.url }}" rel="nofollow">{{ post.media.url }}</a>

From 07b367d304898c6f15bb98956860e73d7b98c819 Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Wed, 23 Oct 2024 00:26:44 +0800
Subject: [PATCH 3/5] use `.gallery_overlay` + add experimental progress dots

---
 static/style.css     | 80 +++++++++++++++++++++++++++++++++++++-------
 templates/utils.html | 10 +++++-
 2 files changed, 77 insertions(+), 13 deletions(-)

diff --git a/static/style.css b/static/style.css
index eae84b15..f643e3ee 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1179,9 +1179,10 @@ a.search_subreddit:hover {
 .gallery {
     display: flex;
     flex-flow: row nowrap;
+    align-items: center;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
-    align-items: center;
+    overscroll-behavior-x: none;
     background: var(--background);
     transition: background 0.2s;
 }
@@ -1197,23 +1198,78 @@ a.search_subreddit:hover {
     margin: 0;
 }
 
-.gallery_length {
+.gallery_overlay {
+    flex: 1 0 100%;
+    height: 100%;
     position: sticky;
-    flex-shrink: 0;
-    align-self: start;
-    right: 2%;
-    top: 2%;
-    width: 6em;
-    padding: 10px 5px;
-    margin-left: calc(-6em - 5px*2);
+    left: 0;
+    margin-left: -100%;
+    pointer-events: none;
+    display: flex;
+    justify-content: center;
+    transition: opacity 0.2s;
+}
+
+.gallery:focus-within .gallery_overlay {
+    opacity: 0;
+}
+
+.gallery:not(:focus-within) .gallery_overlay * {
+    pointer-events: auto;
+}
+
+.gallery_length {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    padding: 10px;
     text-align: center;
     background-color: rgba(0, 0, 0, 0.8);
     border-radius: 5px;
-    transition: opacity 0.2s;
 }
 
-.gallery_length:focus {
-    opacity: 0;
+@supports not (animation-timeline: scroll()) {
+    .gallery_progress {
+        display: none;
+    }
+}
+
+.gallery_progress {
+    position: absolute;
+    bottom: 10px;
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 20px;
+    display: flex;
+    gap: 10px;
+}
+
+.gallery_dot,
+.gallery_dot_indicator {
+    width: 10px;
+    height: 10px;
+    box-sizing: border-box;
+    border: 1px solid var(--text);
+    border-radius: 50%;
+}
+
+.gallery_dot_indicator {
+    background: var(--text);
+    position: absolute;
+    animation-name: galleryDotIndicatorScroll;
+    animation-timeline: scroll(inline nearest);
+    animation-timing-function: linear;
+}
+
+@keyframes galleryDotIndicatorScroll {
+    from {
+        left: 10px;
+    }
+
+    to {
+        left: calc(100% - 10px);
+        transform: translateX(-100%);
+    }
 }
 
 .gallery img {
diff --git a/templates/utils.html b/templates/utils.html
index 3d9af77f..989a25ef 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -136,6 +136,15 @@ <h1 class="post_title">
 	{% endif %}
 	{% else if post.post_type == "gallery" %}
 	<div class="gallery">
+		<div class="gallery_overlay" title="Hide overlay">
+			<div class="gallery_length" tabindex="-1">gallery<br>({{ post.gallery.len() }} images)</div>
+			<div class="gallery_progress" tabindex="-1">
+				{% for _ in post.gallery %}
+				<div class="gallery_dot"></div>
+				{% endfor %}
+				<div class="gallery_dot_indicator"></div>
+			</div>
+		</div>
 		{% for image in post.gallery -%}
 		<figure>
 			<a href="{{ image.url }}" ><img loading="lazy" alt="Gallery image" src="{{ image.url }}"/></a>
@@ -149,7 +158,6 @@ <h1 class="post_title">
 			</figcaption>
 		</figure>
 		{%- endfor %}
-		<div class="gallery_length" tabindex="-1">gallery<br>({{ post.gallery.len() }} images)</div>
 	</div>
 	{% else if post.post_type == "link" %}
 	<a id="post_url" href="{{ post.media.url }}" rel="nofollow">{{ post.media.url }}</a>

From 7b5643c27eb1c9d54e0f3bbcc1e9732e76ee7995 Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Wed, 23 Oct 2024 00:43:42 +0800
Subject: [PATCH 4/5] iterate over length of gallery

---
 templates/utils.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/utils.html b/templates/utils.html
index 989a25ef..cf536d98 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -139,7 +139,7 @@ <h1 class="post_title">
 		<div class="gallery_overlay" title="Hide overlay">
 			<div class="gallery_length" tabindex="-1">gallery<br>({{ post.gallery.len() }} images)</div>
 			<div class="gallery_progress" tabindex="-1">
-				{% for _ in post.gallery %}
+				{% for _ in 0..post.gallery.len() %}
 				<div class="gallery_dot"></div>
 				{% endfor %}
 				<div class="gallery_dot_indicator"></div>

From c71661c61625f3a60c607413ae8dcbb80f5d2fbe Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Wed, 23 Oct 2024 00:56:53 +0800
Subject: [PATCH 5/5] use border width instead of padding

---
 static/style.css     | 8 ++++----
 templates/utils.html | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/static/style.css b/static/style.css
index f643e3ee..f583c1dc 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1237,9 +1237,9 @@ a.search_subreddit:hover {
 .gallery_progress {
     position: absolute;
     bottom: 10px;
-    padding: 10px;
     background-color: rgba(0, 0, 0, 0.8);
-    border-radius: 20px;
+    border: 10px solid transparent;
+    border-radius: 15px;
     display: flex;
     gap: 10px;
 }
@@ -1263,11 +1263,11 @@ a.search_subreddit:hover {
 
 @keyframes galleryDotIndicatorScroll {
     from {
-        left: 10px;
+        left: 0;
     }
 
     to {
-        left: calc(100% - 10px);
+        left: 100%;
         transform: translateX(-100%);
     }
 }
diff --git a/templates/utils.html b/templates/utils.html
index cf536d98..d9f422fa 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -139,9 +139,9 @@ <h1 class="post_title">
 		<div class="gallery_overlay" title="Hide overlay">
 			<div class="gallery_length" tabindex="-1">gallery<br>({{ post.gallery.len() }} images)</div>
 			<div class="gallery_progress" tabindex="-1">
-				{% for _ in 0..post.gallery.len() %}
+				<!-- {% for _ in 0..post.gallery.len() %}
 				<div class="gallery_dot"></div>
-				{% endfor %}
+				{% endfor %} -->
 				<div class="gallery_dot_indicator"></div>
 			</div>
 		</div>