reworked poi details view

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "wegwichtel-next",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "wegwichtel-next",
-      "version": "0.7.0",
+      "version": "0.7.1",
       "hasInstallScript": true,
       "dependencies": {
         "express": "5.2.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wegwichtel-next",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "private": true,
   "description": "GPS-gestützte Lern- und Wanderwege mit GPX, POIs, Bildern und Audioansagen.",
   "type": "module",

public/css/app.css

@@ -9,6 +9,7 @@
   --notice-border: #d4a72c;
   --focus: #1e6fba;
   --footer-height: 5.25rem;
+  --icon-button-size: 3.25rem;
 }
 
 html,
@@ -68,7 +69,7 @@ button,
 }
 
 .app-page > header:has(.back-button) {
-  grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem;
+  grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
   gap: .5rem;
 }
 
@@ -89,14 +90,25 @@ button,
 }
 
 .app-page > header .back-button.ui-button {
-  width: 5.5rem;
+  display: grid;
-  min-height: 2.75rem;
+  place-items: center;
+  width: var(--icon-button-size);
+  min-width: var(--icon-button-size);
+  min-height: var(--icon-button-size);
   margin: 0;
+  padding: .35rem;
   border-color: rgba(255, 255, 255, .45);
+  border-radius: .45rem;
   background: rgba(255, 255, 255, .12);
   color: #fff;
 }
 
+.app-page > header .back-button.ui-button img {
+  width: 1.25rem;
+  height: 1.25rem;
+  pointer-events: none;
+}
+
 .content {
   width: min(48rem, 100%);
   box-sizing: border-box;
@@ -374,34 +386,56 @@ button,
   background: #111;
 }
 
-#slideshow figcaption {
-  min-height: 1.4rem;
-  padding: .5rem .75rem;
-}
-
 #slide-controls {
   display: grid;
-  grid-template-columns: auto minmax(4rem, 1fr) auto;
+  grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
-  align-items: center;
+  align-items: stretch;
+  gap: .5rem;
   width: 100%;
   box-sizing: border-box;
-  padding: .5rem;
+  padding: .65rem;
-  text-align: center;
-}
-
-#slide-controls.ui-controlgroup-horizontal .ui-controlgroup-item {
-  float: none;
 }
 
 #slide-controls .ui-button {
-  min-width: 3rem;
+  display: grid;
-  min-height: 3rem;
+  place-items: center;
+  min-width: 0;
+  min-height: 100%;
+  margin: 0;
+  padding: .45rem;
+}
+
+#slide-controls .ui-button img {
+  width: 1.2rem;
+  height: 1.2rem;
+  pointer-events: none;
+}
+
+.slide-meta {
+  display: flex;
+  min-width: 0;
+  min-height: var(--icon-button-size);
+  padding: .25rem .4rem;
+  border-radius: .45rem;
+  background: rgba(255, 255, 255, .06);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+#slide-caption {
+  margin: 0;
+  overflow-wrap: anywhere;
+  line-height: 1.3;
 }
 
 #slide-position {
-  display: grid;
+  display: block;
-  align-items: center;
+  margin-top: .15rem;
-  min-height: 2.75rem;
+  color: rgba(255, 255, 255, .86);
+  font-size: .9rem;
+  font-weight: 600;
 }
 
 #poi-audio {

public/images/icons/back.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+  <path d="M30 10 16 24l14 14" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/icons/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+  <path d="M29 12 17 24l12 12" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/icons/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+  <path d="m19 12 12 12-12 12" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/index.html

@@ -66,7 +66,9 @@
 
     <section id="route-page" class="app-page" aria-label="Ausgewählte Route" hidden>
       <header>
-        <button class="back-button" type="button" data-page-target="#routes-page">Zurück</button>
+        <button class="back-button" type="button" data-page-target="#routes-page" aria-label="Zurück zur Routenauswahl" title="Zurück zur Routenauswahl">
+          <img src="images/icons/back.svg" alt="">
+        </button>
         <h1 id="route-title">Route</h1>
       </header>
 
@@ -99,7 +101,9 @@
 
     <section id="poi-page" class="app-page" aria-label="Station" hidden>
       <header>
-        <button class="back-button" type="button" data-page-target="#route-page">Zurück</button>
+        <button class="back-button" type="button" data-page-target="#route-page" aria-label="Zurück zur Route" title="Zurück zur Route">
+          <img src="images/icons/back.svg" alt="">
+        </button>
         <h1 id="poi-title">Station</h1>
       </header>
 
@@ -107,13 +111,19 @@
         <div id="slideshow" aria-live="polite">
           <figure>
             <img id="slide-image" alt="">
-            <figcaption id="slide-caption"></figcaption>
           </figure>
 
-          <div id="slide-controls">
+          <div id="slide-controls" role="group" aria-label="Bildnavigation">
-            <button id="slide-prev" type="button">Vorheriges Bild</button>
+            <button id="slide-prev" type="button" aria-label="Vorheriges Bild" title="Vorheriges Bild">
+              <img src="images/icons/chevron-left.svg" alt="">
+            </button>
+            <div class="slide-meta">
+              <p id="slide-caption"></p>
               <span id="slide-position" aria-live="polite">0 / 0</span>
-            <button id="slide-next" type="button">Nächstes Bild</button>
+            </div>
+            <button id="slide-next" type="button" aria-label="Nächstes Bild" title="Nächstes Bild">
+              <img src="images/icons/chevron-right.svg" alt="">
+            </button>
           </div>
         </div>
 

public/js/bootstrap-loader.js

@@ -43,11 +43,10 @@
   function initializeJqueryUi() {
     const $ = window.jQuery;
     $('#bootstrap-retry').button({ icon: 'ui-icon-refresh' });
-    $('.back-button').button({ icon: 'ui-icon-caret-1-w' });
+    $('.back-button').button();
     $('#clear-route-search').button({ icon: 'ui-icon-close', showLabel: false });
-    $('#slide-prev').button({ icon: 'ui-icon-caret-1-w', showLabel: false });
+    $('#slide-prev').button();
-    $('#slide-next').button({ icon: 'ui-icon-caret-1-e', showLabel: false });
+    $('#slide-next').button();
-    $('#slide-controls').controlgroup();
   }
 
   async function boot() {

public/js/slideshow.js

@@ -29,6 +29,7 @@
   function render() {
     const hasImages = images.length > 0;
     $('#slideshow').toggle(hasImages);
+    $('#slide-controls').attr('data-image-count', images.length);
     if (!hasImages) return;
 
     const image = images[index];