fix: update slideshow styles and improve responsiveness; bump Playwright version

Author: d-oit

.gitignore

@@ -15,7 +15,6 @@ go.work.sum
 # env file
 .env
 
-
 # Ignore log files
 *.log
 

dist/slideshow-gallery.scss

@@ -1,3 +1,4 @@
+
 /* Normal view - Constrain height within page context */
 .slideshow-gallery {
   position: relative;
@@ -40,6 +41,7 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  touch-action: pan-y pinch-zoom;
 }
 
 /* Image Gallery Item */
@@ -53,9 +55,12 @@
 
 .slideshow-image-gallery-item img {
   max-width: 100%;
-  max-height: 100%;
-  object-fit: inherit;
+  max-height: 90vh;
+  object-fit: contain;
   display: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 .slideshow-image-gallery-item img.active {
@@ -69,7 +74,7 @@
     color: #ddd;
     text-align: center;
     padding: 10px;
-    font: 14px / 1.5 sans-serif;
+    font: 14px / 1.5 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
 .slideshow-caption-container .lightbox-title {
@@ -86,17 +91,19 @@
   overflow-y: hidden;
   background-color: #222;
   padding: 10px 0;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
 }
 
 .slideshow-thumbnail-column {
-  flex: 0 0 16.66%;
+  flex: 0 0 10%;
   padding: 5px;
   box-sizing: border-box;
 }
 
 .slideshow-thumbnail-column img {
   width: 100%;
-  height: 100px;
+  height: auto;
   object-fit: cover;
   opacity: 0.6;
   transition: opacity 0.3s;
@@ -114,7 +121,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  // width: 100vw;
+  width: 100%;
   height: 100vh;
   z-index: 9999;
   background-color: black;
@@ -154,6 +161,7 @@
   padding: 10px;
   cursor: pointer;
   z-index: 10;
+  transition: background-color 0.3s;
 }
 
 .slideshow-prev-button { left: 0px; }
@@ -171,6 +179,29 @@
 @media (max-width: 768px) {
   .slideshow-thumbnail-column {
     flex: 0 0 25%;
+    min-width: 80px;
+  }
+
+  .slideshow-image-gallery-item img {
+    max-height: 85vh;
+  }
+
+  .slideshow-prev-button,
+  .slideshow-next-button,
+  .slideshow-fullscreen-button {
+    padding: 15px;
+    min-width: 44px;
+    min-height: 44px;
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .slideshow-caption-container {
+    font-size: 13px;
+    padding: 8px;
+  }
+
+  .slideshow-thumbnail-column img {
+    height: 80px;
   }
 }
 

exampleSite/go.mod

@@ -4,7 +4,7 @@ go 1.19
 
 require (
 	github.com/airbnb/lottie-web v5.12.2+incompatible // indirect
-	github.com/gethinode/hinode v0.29.2 // indirect
+	github.com/gethinode/hinode v0.29.3 // indirect
 	github.com/gethinode/mod-bootstrap v1.3.2 // indirect
 	github.com/gethinode/mod-csp v1.0.7 // indirect
 	github.com/gethinode/mod-flexsearch/v2 v2.1.0 // indirect

exampleSite/go.sum

@@ -10,6 +10,8 @@ github.com/gethinode/hinode v0.27.18 h1:rlksX+VmW37ORcoyE9n33uFF6NdINgmN5fsTtgag
 github.com/gethinode/hinode v0.27.18/go.mod h1:k+TUNPNBbNY2kNlzDySw3k/GuDHetfKN/qTXKHwlbk0=
 github.com/gethinode/hinode v0.29.2 h1:ozsbmXzjfXTW/+QscUcE1/2+uDkNwksEjAAeAmkLX9o=
 github.com/gethinode/hinode v0.29.2/go.mod h1:DJiRTOdTULMQNqgXm7npCXmtQsMtDm7pRX1pi/L/+qM=
+github.com/gethinode/hinode v0.29.3 h1:pXT7TH+ZtFRTp987musJ/u0KibVS/oMC3HQkDyFuzcg=
+github.com/gethinode/hinode v0.29.3/go.mod h1:wh0Tu9qzrKyyDWlCA1vlxvJvXAubhI+mK8O4kUXLf84=
 github.com/gethinode/mod-bootstrap v1.3.1 h1:ZUX72St0WZ5tyXpEPBJlayX/dmCH3cGErzsozkUKCok=
 github.com/gethinode/mod-bootstrap v1.3.1/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
 github.com/gethinode/mod-bootstrap v1.3.2 h1:mf9Qgr+xHZeHjZGYFdurETfdEKKldB158fpjH0GoaNU=

package-lock.json

@@ -47,7 +47,7 @@
     "cz-conventional-changelog": "^3.3.0",
     "hugo-bin": "^0.139.0",
     "husky": "^9.1.7",
-    "playwright": "^1.49.1",
+    "playwright": "^1.50.0",
     "rimraf": "^6.0.1",
     "semantic-release": "^24.2.1"
   },