From 9fa0cbf6d66843296bce844e8d085a4c91378fa2 Mon Sep 17 00:00:00 2001
From: Alessio <me@playfulpachyderm.com>
Date: Sat, 9 Mar 2024 13:44:14 -0800
Subject: [PATCH] Add on-click image carousel

---
 internal/webserver/static/styles.css          | 28 ++++++++++++++++++-
 internal/webserver/tpl/includes/base.tpl      |  4 +++
 .../tpl/tweet_page_includes/single_tweet.tpl  |  2 ++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/internal/webserver/static/styles.css b/internal/webserver/static/styles.css
index 3ebf10d..a836c1e 100644
--- a/internal/webserver/static/styles.css
+++ b/internal/webserver/static/styles.css
@@ -2,7 +2,7 @@
     --color-twitter-text-gray: #536171;
     --color-twitter-blue: #1b95e0;  /* hsl(203, 78%, 49%) */
     --color-twitter-blue-light: #7cc5f6; /* hsl(204, 87%, 73%) */
-    --color-twitter-blue-extra-light: hsl(204, 95%, 92%);
+    --color-twitter-blue-extra-light: hsl(204, 95%, 85%);
     --color-twitter-off-white: #f7f9f9; /* hsl(180, 14%, 97%) */
     --color-twitter-off-white-dark: #dae5e5; /* hsl(180, 17%, 88%) */
     --color-outline-gray: #dcdcdc;
@@ -138,6 +138,32 @@ ul.inline-dotted-list li:last-child:after {
     filter: invert(54%) sepia(17%) saturate(4210%) hue-rotate(176deg) brightness(89%) contrast(98%);
 }
 
+dialog#image_carousel {
+    border-radius: 2em;
+    border: 0.3em solid var(--color-twitter-blue);
+    box-shadow: 0 0 1em var(--color-twitter-blue);
+    outline: none;
+    overflow: visible;
+    padding: 1.4em;
+}
+dialog#image_carousel a.close-button {
+    position: absolute;
+    right: -1.3em;
+    top: -1.5em;
+
+    width: 1em;
+    line-height: 1em;
+    font-size: 2em;
+    justify-content: center;
+    border: 0.1em solid black;
+}
+dialog#image_carousel a.close-button:not(:hover):not(:active) {
+    background-color: var(--color-twitter-blue-extra-light);
+}
+dialog::backdrop {
+    background: hsla(204, 87%, 73%, 0.3); /* based on --color-twitter-blue-light */
+}
+
 .quoted-tweet {
     margin: 1em 0;
 }
diff --git a/internal/webserver/tpl/includes/base.tpl b/internal/webserver/tpl/includes/base.tpl
index 83387d2..5c01b04 100644
--- a/internal/webserver/tpl/includes/base.tpl
+++ b/internal/webserver/tpl/includes/base.tpl
@@ -27,6 +27,10 @@
       <main>
         {{template "main" .}}
       </main>
+      <dialog id="image_carousel">
+        <a class="quick-link close-button" onclick="image_carousel.close()">X</a>
+        <img src="">
+      </dialog>
     </body>
   </html>
 {{end}}
diff --git a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
index 230afac..8bb240d 100644
--- a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
@@ -67,6 +67,8 @@
             {{if (gt (len $main_tweet.Images) 1)}}
               style="max-width: 45%"
             {{end}}
+            hx-trigger="click consume"
+            onclick="image_carousel.querySelector('img').src = this.src; image_carousel.showModal();"
           />
         {{end}}
         {{range $main_tweet.Videos}}