Fix mobile view Bugs and add versions to static files for cache breaking

public/css/app.css

@@ -327,7 +327,7 @@ button,
   margin: 0 0 1rem;
 }
 
-#route-page fieldset button {
+#route-page fieldset button.ui-button {
   display: grid;
   place-items: center;
   min-width: 0;
@@ -341,18 +341,18 @@ button,
   touch-action: manipulation;
 }
 
-#route-page fieldset button:focus-visible {
+#route-page fieldset button.ui-button:focus-visible {
   outline: .2rem solid var(--focus);
   outline-offset: .15rem;
 }
 
-#route-page fieldset button:disabled {
+#route-page fieldset button.ui-button:disabled {
   cursor: default;
   filter: grayscale(.65);
   opacity: .42;
 }
 
-#route-page fieldset img {
+#route-page fieldset button.ui-button img {
   width: 2rem;
   height: 2rem;
   pointer-events: none;
@@ -397,17 +397,18 @@ button,
   margin: 0;
 }
 
-#slideshow img {
+#slide-image {
   display: block;
   width: 100%;
+  height: min(55vh, 28rem);
   height: min(55dvh, 28rem);
   object-fit: contain;
   background: #111;
 }
 
 #slideshow > fieldset {
-  display: flex;
-  flex-flow: row nowrap;
+  display: grid;
+  grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
   align-items: center;
   gap: .5rem;
   width: 100%;
@@ -419,8 +420,6 @@ button,
 
 #slideshow > fieldset > button.ui-button {
   display: grid;
-  flex: 0 0 var(--icon-button-size);
-  align-self: center;
   place-items: center;
   width: var(--icon-button-size);
   height: var(--icon-button-size);
@@ -438,7 +437,6 @@ button,
 
 #slideshow > fieldset > div {
   display: flex;
-  flex: 1 1 0;
   align-self: stretch;
   min-width: 0;
   min-height: var(--icon-button-size);
@@ -466,10 +464,16 @@ button,
 }
 
 #poi-audio {
+  display: block;
   width: 100%;
+  max-width: 100%;
   margin-top: 1rem;
 }
 
+#poi-audio[hidden] {
+  display: none;
+}
+
 #navigation-footer {
   position: fixed;
   right: 0;

public/index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="theme-color" content="#315d3a">
   <title>Wegwichtel</title>
-  <link rel="stylesheet" href="css/bootstrap.css">
+  <link rel="stylesheet" href="css/bootstrap.css?v=0.12.11">
 </head>
 <body>
   <div id="bootstrap-screen" aria-live="polite" aria-busy="true">
@@ -84,13 +84,13 @@
         <fieldset>
           <legend>Routensteuerung</legend>
           <button id="start-route" type="button" aria-label="Route starten" title="Route starten">
-            <img src="images/icons/play.svg" alt="">
+            <img src="images/icons/play.svg" alt="Route starten">
           </button>
           <button id="pause-route" type="button" aria-label="Route pausieren" title="Route pausieren" disabled>
-            <img src="images/icons/pause.svg" alt="">
+            <img src="images/icons/pause.svg" alt="Route pausieren">
           </button>
           <button id="stop-route" type="button" aria-label="Route beenden" title="Route beenden" disabled>
-            <img src="images/icons/stop.svg" alt="">
+            <img src="images/icons/stop.svg" alt="Route beenden">
           </button>
         </fieldset>
         <p id="tracking-status" class="notice" hidden></p>
@@ -117,20 +117,20 @@
           <fieldset>
             <legend>Bildnavigation</legend>
             <button id="slide-prev" type="button" aria-label="Vorheriges Bild" title="Vorheriges Bild">
-              <img src="images/icons/chevron-left.svg" alt="">
+              <img src="images/icons/chevron-left.svg" alt="Vorheriges Bild">
             </button>
             <div>
               <p id="slide-caption"></p>
               <span id="slide-position">0 / 0</span>
             </div>
             <button id="slide-next" type="button" aria-label="Nächstes Bild" title="Nächstes Bild">
-              <img src="images/icons/chevron-right.svg" alt="">
+              <img src="images/icons/chevron-right.svg" alt="Nächstes Bild">
             </button>
           </fieldset>
         </div>
 
         <p id="poi-description"></p>
-        <audio id="poi-audio" controls preload="auto" hidden></audio>
+        <audio id="poi-audio" controls preload="metadata" aria-label="Audiowiedergabe zur Station" hidden>Audio kann auf diesem Gerät nicht wiedergegeben werden.</audio>
       </div>
     </section>
 
@@ -145,6 +145,6 @@
     </footer>
   </main>
 
-  <script src="js/bootstrap-loader.js"></script>
+  <script src="js/bootstrap-loader.js?v=0.12.11"></script>
 </body>
 </html>

public/js/audio-player.js

@@ -5,12 +5,18 @@
     return $('#poi-audio')[0];
   }
 
+  function mediaUrl(url) {
+    if (!url) return '';
+    const separator = url.includes('?') ? '&' : '?';
+    return `${url}${separator}v=${Date.now()}`;
+  }
+
   function unload() {
     const audio = element();
     audio.pause();
     audio.removeAttribute('src');
     audio.load();
-    $(audio).prop('hidden', true);
+    $(audio).attr('hidden', '').hide();
   }
 
   ns.AudioPlayer = {
@@ -19,8 +25,8 @@
       if (!url) return;
 
       const audio = element();
-      audio.src = url;
-      $(audio).prop('hidden', false);
+      audio.src = mediaUrl(url);
+      $(audio).removeAttr('hidden').css('display', 'block');
       audio.load();
     },
 

public/js/bootstrap-loader.js

@@ -1,12 +1,14 @@
 (function () {
   'use strict';
 
-  const versions = Object.freeze({ jquery: '4.0.0', jqueryUi: '1.14.2' });
+  const versions = Object.freeze({ app: '0.12.11', jquery: '4.0.0', jqueryUi: '1.14.2' });
   const steps = ['jquery', 'jquery-ui', 'modules', 'server', 'routes', 'location'];
   const progress = document.getElementById('bootstrap-progress');
   const errorBox = document.getElementById('bootstrap-error');
   const retry = document.getElementById('bootstrap-retry');
 
+  const versioned = path => `${path}${path.includes('?') ? '&' : '?'}v=${encodeURIComponent(versions.app)}`;
+
   function mark(step, state) {
     const item = document.querySelector(`[data-step="${step}"]`);
     if (!item) return;
@@ -18,7 +20,7 @@
   function loadScript(src, test) {
     return new Promise((resolve, reject) => {
       const script = document.createElement('script');
-      script.src = src;
+      script.src = versioned(src);
       script.async = false;
       script.onload = () => {
         if (test && !test()) reject(new Error(`Selbsttest fehlgeschlagen: ${src}`));
@@ -33,7 +35,7 @@
     return new Promise((resolve, reject) => {
       const link = document.createElement('link');
       link.rel = 'stylesheet';
-      link.href = href;
+      link.href = versioned(href);
       link.onload = resolve;
       link.onerror = () => reject(new Error(`Stylesheet konnte nicht geladen werden: ${href}`));
       document.head.appendChild(link);

public/js/slideshow.js

@@ -5,6 +5,12 @@
   let index = 0;
   let swipe = null;
 
+  function mediaUrl(url) {
+    if (!url) return '';
+    const separator = url.includes('?') ? '&' : '?';
+    return `${url}${separator}v=${Date.now()}`;
+  }
+
   function activate(selector, handler) {
     $(document)
       .on('pointerup', selector, function (event) {
@@ -33,8 +39,12 @@
 
     const image = images[index];
     $('#slide-image')
-      .attr('src', image.url)
-      .attr('alt', image.caption || 'Bild zur Station');
+      .attr('src', mediaUrl(image.url))
+      .attr('alt', image.caption || 'Bild zur Station')
+      .off('error.wegwichtel')
+      .on('error.wegwichtel', function () {
+        $(this).removeAttr('src').attr('alt', 'Bild konnte nicht geladen werden');
+      });
     $('#slide-caption').text(image.caption || '');
     $('#slide-position').text(`${index + 1} / ${images.length}`);
     refreshButton('#slide-prev', images.length < 2);