v0.6.1: minor fixes

- fixed modal style - modified some texts - worked on stationsNearMe functionality (WIP) - correct sorting of OSM level list
2024-06-09 18:42:15 +02:00 · 2024-06-09 18:42:15 +02:00 · 085329929f
commit 085329929f
parent e72ad0cf07
10 changed files with 218 additions and 55 deletions
--- a/about.html
+++ b/about.html
@ -6,7 +6,12 @@
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet">
-    <title>Barrierefreie Aufzugs-Liste | Was ist das?</title>
+    <link rel="icon" type="image/png" sizes="512" href="/icons/512.png">
+    <link rel="icon" type="image/png" sizes="192" href="/icons/192.png">
+    <link rel="shortcut icon" href="/icons/favicon.svg">
+    <link rel="manifest" href="/manifest.json">
+    <link rel="mask-icon" href="/icons/favicon-transparent.svg" color="#047857">
+    <title>hvvstuhl.de | Was ist das?</title>
 </head>
 <body>
 <h1>Barrierefreie Aufzugs-Liste</h1>
@ -25,18 +30,19 @@
    </ul>
 </nav>
 <main>
-<section>
-    <h2>Worum geht's hier?</h2>
-    <p>
-        Diese Seite ermöglicht einen barrierefreien Zugang zu den Aufzugs informationen im HVV.
-        Der HVV selbst zeigt diese Informationen nur auf einer (vor allem ohne Ortskenntnis) schwer zu navigierenden Karte an:
-        <a href="https://www.hvv.de/de/aufzuege">HVV Webseite zu Aufzügen</a>
-    </p>
-    <p>
-        Dieses Projekt wurde unter AGPL-3 entwickelt und ist hier zu finden:
-        <a href="https://git.kritzl.dev/kritzl/hvvstuhl.de" target="_blank">git.kritzl.dev</a>
-    </p>
-</section>
+    <section>
+        <h2>Worum geht's hier?</h2>
+        <p>
+            Diese Seite ermöglicht einen barrierefreien Zugang zu den Aufzugs-Informationen im HVV.
+            Der HVV selbst zeigt diese Informationen nur auf einer (vor allem ohne Ortskenntnis) schwer zu navigierenden
+            Karte an:
+            <a href="https://www.hvv.de/de/aufzuege">HVV Webseite zu Aufzügen</a>
+        </p>
+        <p>
+            Dieses Projekt wurde unter der AGPL-3 Lizenz entwickelt und ist hier zu finden:
+            <a href="https://git.kritzl.dev/kritzl/hvvstuhl.de" target="_blank">git.kritzl.dev</a>
+        </p>
+    </section>
 </main>
 </body>
 </html>
--- a/elevators.js
+++ b/elevators.js
@ -232,7 +232,7 @@ async function loadOsmData() {

        if (!internalData.stations[stationIndex].hasOwnProperty('coordinates')) {
            const substitute = substituteData.filter(subs => subs.name === internalData.stations[stationIndex].name)
-            if (substitute.length && substitute.hasOwnProperty('coordinates')) {
+            if (substitute.length && substitute[0].hasOwnProperty('coordinates')) {
                internalData.stations[stationIndex]['coordinates'] = substitute[0].coordinates;
            }
        }
@ -316,9 +316,23 @@ function sortStations(stationA, stationB) {
    return 0;
 }

+function sortInt(valueA, valueB) {
+    const a = parseInt(valueA)
+    const b = parseInt(valueB)
+    if (a < b) {
+        return -1;
+    }
+    if (a > b) {
+        return 1;
+    }
+
+    // names must be equal
+    return 0;
+}
+
 function sortStationsByDistance(stationA, stationB) {
-    const distanceA = stationA.distance; // ignore upper and lowercase
-    const distanceB = stationB.distance; // ignore upper and lowercase
+    const distanceA = stationA.distance ?? 0; // ignore upper and lowercase
+    const distanceB = stationB.distance ?? 0; // ignore upper and lowercase
    if (distanceA < distanceB) {
        return -1;
    }
@ -415,7 +429,9 @@ function renderData(location = null) {
        }
    }

-    stations = stations.sort(sortStationsByDistance);
+    if (sortByDistance) {
+        stations = stations.sort(sortStationsByDistance);
+    }

    for (const stationIndex in stations) {
        const station = stations[stationIndex];
@ -478,7 +494,7 @@ function renderData(location = null) {
                        osmTemplate += `<div><dt><span data-icon="info" class="size-l"></span>Beschreibung</dt><dd>${node.tags['description']}</dd></div>`;
                    }
                    if (node.tags.hasOwnProperty('level')) {
-                        osmTemplate += `<div><dt><span data-icon="up-down" class="size-l"></span>Ebenen</dt><dd>${node.tags['level'].split(';').sort().join(', ')}</dd></div>`;
+                        osmTemplate += `<div><dt><span data-icon="up-down" class="size-l"></span>Ebenen</dt><dd>${node.tags['level'].split(';').sort(sortInt).join(', ')}</dd></div>`;
                    }
                    if (node.tags.hasOwnProperty('wheelchair')) {
                        osmTemplate += `<div><dt><span data-icon="wheelchair" class="size-l"></span>Rollstühle</dt><dd>${node.tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}</dd></div>`;
@ -551,7 +567,11 @@ function renderData(location = null) {
            <div class="typeList">
                ${station.types.sort().map(t => `<span class="typeChip" data-type="${t}">${t}</span>`).join('')}
            </div>
-            ${typeof station.distance !== 'undefined' ? `<div class="distance"><b>${Math.round(station.distance / 100) / 10}</b><br>km</div>` : ''}
+            ${sortByDistance
+            ? typeof station.distance !== 'undefined'
+                ? `<div class="distance"><b>${Math.round(station.distance / 100) / 10}</b><br>km</div>`
+                : '<div class="distance">? km</div>'
+            : ''}
            </div>
            <div class="stationTitle">
                <h3>${station.name}</h3>
@ -646,12 +666,13 @@ document.querySelector('#stationsNearMe')
                if (geolocationPermission !== 'granted') {
                    allowGeolocation();
                } else {
+                    sortByDistance = e.target.ariaPressed = true;
+
                    // If geolocation is already set.
                    // If not the location watcher will re-render our data.
                    if (geolocation !== null) {
                        renderData(geolocation)
                    }
-                    sortByDistance = e.target.ariaPressed = true;
                }
            }
        } else {
--- a/icons/favicon_source.svg
+++ b/icons/favicon_source.svg
@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.3 (1:1.3+202307231459+0e150ed6c4)"
+   sodipodi:docname="inkscape.svg"
+   inkscape:export-filename="favicon-transparent.png"
+   inkscape:export-xdpi="130.048"
+   inkscape:export-ydpi="130.048"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.9145201"
+     inkscape:cx="549.46851"
+     inkscape:cy="179.87576"
+     inkscape:window-width="1920"
+     inkscape:window-height="1085"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"><inkscape:page
+       x="0"
+       y="0"
+       width="100"
+       height="100"
+       id="page2"
+       margin="0"
+       bleed="0" /><inkscape:page
+       x="104.49603"
+       y="-0.25552651"
+       width="100"
+       height="100"
+       id="page3"
+       margin="0"
+       bleed="0" /><inkscape:page
+       x="214.49603"
+       y="0"
+       width="100"
+       height="100"
+       id="page4" /></sodipodi:namedview><defs
+     id="defs1" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><rect
+       style="opacity:1;fill:#65a30d;fill-opacity:1;stroke:none;stroke-width:0.499507;stroke-linejoin:round;paint-order:markers stroke fill"
+       id="rect1"
+       width="100"
+       height="100.00012"
+       x="-3.3306691e-15"
+       y="-6.1035156e-05" /><rect
+       style="fill:#65a30d;fill-opacity:1;stroke:none;stroke-width:0.499507;stroke-linejoin:round;paint-order:markers stroke fill"
+       id="rect1-1"
+       width="100"
+       height="100.00012"
+       x="104.49603"
+       y="-0.25558716" /><path
+       d="m 248.06205,71.319802 h 10.65991 V 57.1066 h 3.55325 v -8.883247 q 0,-2.931469 -2.08753,-5.019037 -2.08752,-2.087555 -5.01898,-2.087555 h -3.55339 q -2.93146,0 -5.01898,2.087555 -2.08753,2.087568 -2.08753,5.019037 V 57.1066 h 3.55325 z m 5.33002,-33.756351 q 1.8654,0 3.15345,-1.288052 1.28792,-1.288051 1.28792,-3.153558 0,-1.865479 -1.28792,-3.153545 -1.28791,-1.288051 -3.15345,-1.288051 -1.86553,0 -3.15358,1.288051 -1.28792,1.288052 -1.28792,3.153545 0,1.865493 1.28792,3.153558 1.28791,1.288052 3.15358,1.288052 z m 13.94658,8.883247 h 17.76655 l -8.88328,-14.213184 z m 8.88327,21.319804 8.88328,-14.213198 h -17.76655 z m -35.53296,17.23349 q -4.70808,0 -7.95044,-3.24238 -3.24249,-3.24238 -3.24249,-7.95051 V 26.192898 q 0,-4.708124 3.24249,-7.950507 3.24236,-3.242383 7.95044,-3.242383 h 47.61427 q 4.70809,0 7.95044,3.242383 3.24236,3.242383 3.24236,7.950507 v 47.614204 q 0,4.70813 -3.24236,7.95051 -3.24235,3.24238 -7.95044,3.24238 z"
+       id="path1-3"
+       style="fill:#000000;stroke-width:0.0888325;fill-opacity:1" /><path
+       d="M 33.56602,71.319802 H 44.22593 V 57.1066 h 3.55325 v -8.883247 q 0,-2.931469 -2.08753,-5.019037 -2.08752,-2.087555 -5.01898,-2.087555 h -3.55339 q -2.93146,0 -5.01898,2.087555 -2.08753,2.087568 -2.08753,5.019037 V 57.1066 h 3.55325 z m 5.33002,-33.756351 q 1.8654,0 3.15345,-1.288052 1.28792,-1.288051 1.28792,-3.153558 0,-1.865479 -1.28792,-3.153545 -1.28791,-1.288051 -3.15345,-1.288051 -1.86553,0 -3.15358,1.288051 -1.28792,1.288052 -1.28792,3.153545 0,1.865493 1.28792,3.153558 1.28791,1.288052 3.15358,1.288052 z m 13.94658,8.883247 H 70.60917 L 61.72589,32.233514 Z m 8.88327,21.319804 8.88328,-14.213198 H 52.84262 Z m -35.53296,17.23349 q -4.70808,0 -7.95044,-3.24238 Q 15,78.515232 15,73.807102 V 26.192898 q 0,-4.708124 3.24249,-7.950507 3.24236,-3.242383 7.95044,-3.242383 H 73.8072 q 4.70809,0 7.95044,3.242383 Q 85,21.484774 85,26.192898 v 47.614204 q 0,4.70813 -3.24236,7.95051 -3.24235,3.24238 -7.95044,3.24238 z"
+       id="path1-3-7"
+       style="fill:#ffffff;stroke-width:0.0888325;fill-opacity:1" /><path
+       d="m 142.75747,64.972903 h 7.61422 V 54.820616 h 2.53804 V 48.47544 q 0,-2.093907 -1.49109,-3.585027 -1.49109,-1.49111 -3.58499,-1.49111 h -2.53813 q -2.0939,0 -3.58499,1.49111 -1.49109,1.49112 -1.49109,3.585027 v 6.345176 h 2.53803 z m 3.80716,-24.111679 q 1.33243,0 2.25246,-0.920037 0.91995,-0.920037 0.91995,-2.252542 0,-1.332485 -0.91995,-2.252532 -0.91993,-0.920036 -2.25246,-0.920036 -1.33252,0 -2.25256,0.920036 -0.91994,0.920037 -0.91994,2.252532 0,1.332495 0.91994,2.252542 0.91994,0.920037 2.25256,0.920037 z m 9.96184,6.345176 h 12.6904 l -6.3452,-10.152274 z m 6.3452,15.228432 6.3452,-10.152284 h -12.6904 z m -25.38069,12.309636 q -3.36291,0 -5.67889,-2.315986 -2.31606,-2.315986 -2.31606,-5.678936 V 32.7394 q 0,-3.362945 2.31606,-5.678933 2.31598,-2.315988 5.67889,-2.315988 h 34.01019 q 3.36292,0 5.67889,2.315988 2.31597,2.315988 2.31597,5.678933 v 34.010146 q 0,3.36295 -2.31597,5.678936 -2.31597,2.315986 -5.67889,2.315986 z"
+       id="path1-3-2"
+       style="fill:#ffffff;stroke-width:0.0634518;fill-opacity:1" /></g></svg>
--- a/index.html
+++ b/index.html
@ -11,7 +11,7 @@
    <link rel="shortcut icon" href="/icons/favicon.svg">
    <link rel="manifest" href="/manifest.json">
    <link rel="mask-icon" href="/icons/favicon-transparent.svg" color="#047857">
-    <title>Barrierefreie Aufzugs-Liste</title>
+    <title>hvvstuhl.de</title>
 </head>
 <body>
 <h1>Barrierefreie Aufzugs-Liste</h1>
@ -37,9 +37,8 @@
        <button id="loadElevators" class="hidden">
            Aktualisieren
            <span data-icon="load" class="size-s spinner hidden"></span>
-        </button><br>
+        </button>
    </div>
-    <br>

    <div class="hidden" id="filters">
        <input placeholder="Station suchen" id="searchStation">
@ -80,11 +79,14 @@

 <div id="dialog_layer" class="dialogs">
    <div role="dialog" id="dialog_osm" aria-labelledby="dialog_osm_label" aria-modal="true" class="">
-        <h2 id="dialog_osm_label" class="dialog_label">IPv4 RDAP Info</h2>
-        <button onclick="closeDialog('#dialog_osm')" class="close-modal">x</button>
-        <hr>
+        <h2 id="dialog_osm_label">
+            Fehlende Daten abrufen
+        </h2>
+        <button onclick="closeDialog('#dialog_osm')" class="close-modal">
+            <span data-icon="close" class="size-m"></span>
+        </button>
        <p>
-            Um die Stationen nach Entfernung sortieren zu können müssen zusätzliche Daten von OpenStreetMap geladen
+            Um die Stationen nach Entfernung sortieren zu können, müssen zusätzliche Daten von OpenStreetMap geladen
            werden.
        </p>
        <button id="loadOsm">
--- a/main.js
+++ b/main.js
@ -1,4 +1,4 @@
-const version = '0.6.0'
+const version = '0.6.1'
 const minorVersion = version.split('.').splice(0, 2).join('.');
 const numberFormat = new Intl.NumberFormat('de-DE', {
    maximumFractionDigits: 1
--- a/md_icons/close.svg
+++ b/md_icons/close.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m256-168-88-88 224-224-224-224 88-88 224 224 224-224 88 88-224 224 224 224-88 88-224-224-224 224Z"/></svg>
--- a/style.css
+++ b/style.css
@ -301,6 +301,7 @@
  --station-border: var(--color-gray-400);
  --station-border-hover: var(--color-gray-600);
  --elevator-bg: var(--color-gray-100);
+  --backdrop: rgb(0 0 0 / 20%);
  --elevator-list-gap: 3rem;
  --item-radius: 1.5rem;
  --btn-radius: 0.8rem;
@ -332,6 +333,7 @@
    --station-border: var(--color-gray-600);
    --station-border-hover: var(--color-gray-400);
    --elevator-bg: var(--color-gray-900);
+    --backdrop: rgb(100% 100% 100% / 20%);
  }
 }

@ -349,26 +351,39 @@ body.has-dialog {
  right: 0;
  bottom: 0;
  left: 0;
-  background: rgba(0, 0, 0, 0.3);
+  z-index: 99;
+  background: var(--backdrop);
 }
 .dialogs.active {
  display: block;
 }
-
-[role=dialog] {
+.dialogs [role=dialog] {
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
-  padding: 15px;
-  border-radius: 1rem;
-  background-color: var(--background);
-  color: var(--color);
-  position: relative;
+  padding: var(--space-xl);
+  padding-bottom: var(--space-2xl);
+  background-color: var(--bg);
+  color: var(--text);
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: var(--item-radius) var(--item-radius) 0 0;
 }
-[role=dialog] button.close-modal {
+@media screen and (min-width: 576px) {
+  .dialogs [role=dialog] {
+    position: relative;
+    border-radius: var(--item-radius);
+  }
+}
+.dialogs [role=dialog] button.close-modal {
  position: absolute;
  top: 0;
  right: 0;
+  border-radius: 0 0 0 var(--btn-radius);
+  border: none;
 }

 .hidden {
@ -485,6 +500,13 @@ div#updateInfo {
  align-items: center;
  gap: var(--space-m);
  justify-content: end;
+  flex-direction: column;
+  margin-bottom: var(--space-l);
+}
+@media screen and (min-width: 576px) {
+  div#updateInfo {
+    flex-direction: row;
+  }
 }
 div#updateInfo #oldDataWarning {
  color: var(--color-red-600);
@ -1053,6 +1075,9 @@ span[data-icon][data-icon=location-searching] {
 span[data-icon][data-icon=load] {
  mask-image: url(/md_icons/load.svg);
 }
+span[data-icon][data-icon=close] {
+  mask-image: url(/md_icons/close.svg);
+}
 span[data-icon].spinner {
  animation-delay: 0s;
  animation-direction: normal;
--- a/style.css.map
+++ b/style.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss","colors.scss"],"names":[],"mappings":"AAMA;ACLE;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAwBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;ED/PA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EA8BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AApCA;EAlDF;IAoDI;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAeF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAjCF;IAkCI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["style.scss","colors.scss"],"names":[],"mappings":"AAMA;ACLE;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAwBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;ED/PA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EAgCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAtCA;EApDF;IAsDI;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IAEA;;;;AAeF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAfF;IAgBI;IACA;;;AAIA;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAjCF;IAkCI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"}
--- a/style.scss
+++ b/style.scss
@ -54,6 +54,8 @@ $mediumBreakpoint: 800px;
  --station-border-hover: var(--color-gray-600);
  --elevator-bg: var(--color-gray-100);

+  --backdrop: rgb(0 0 0 / 20%);
+
  @media (prefers-color-scheme: dark) {
    // LineType Colors
    --bg-type-u-disabled: #{scale-color($colorTypeU, $saturation: -80%, $lightness: +20%)};
@ -80,6 +82,8 @@ $mediumBreakpoint: 800px;
    --station-border: var(--color-gray-600);
    --station-border-hover: var(--color-gray-400);
    --elevator-bg: var(--color-gray-900);
+
+    --backdrop: rgb(100% 100% 100% / 20%);
  }

  --elevator-list-gap: 3rem;
@ -109,29 +113,42 @@ body {
  right: 0;
  bottom: 0;
  left: 0;
-  background: rgb(0 0 0 / 30%);
+  z-index: 99;
+  background: var(--backdrop);

  &.active {
    display: block;
  }
-}


-[role="dialog"] {
-  box-sizing: border-box;
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 15px;
-  border-radius: 1rem;
-  background-color: var(--background);
-  color: var(--color);
-  position: relative;
+  [role="dialog"] {
+    box-sizing: border-box;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: var(--space-xl);
+    padding-bottom: var(--space-2xl);
+    background-color: var(--bg);
+    color: var(--text);
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: var(--item-radius) var(--item-radius) 0 0;

-  button {
-    &.close-modal {
-      position: absolute;
-      top: 0;
-      right: 0;
+    @media screen and (min-width: $mobileBreakpoint) {
+      position: relative;
+      border-radius: var(--item-radius);
+    }
+
+    button {
+      &.close-modal {
+        position: absolute;
+        top: 0;
+        right: 0;
+        border-radius: 0 0 0 var(--btn-radius);
+        border: none;
+      }
    }
  }
 }
@ -267,6 +284,12 @@ div#updateInfo {
  align-items: center;
  gap: var(--space-m);
  justify-content: end;
+  flex-direction: column;
+  margin-bottom: var(--space-l);
+
+  @media screen and (min-width: $mobileBreakpoint) {
+    flex-direction: row;
+  }

  #oldDataWarning {
    color: var(--color-red-600);
@ -948,6 +971,10 @@ span[data-icon] {
    mask-image: url(/md_icons/load.svg);
  }

+  &[data-icon="close"] {
+    mask-image: url(/md_icons/close.svg);
+  }
+
  &.spinner {
    animation-delay: 0s;
    animation-direction: normal;
--- a/sw.js
+++ b/sw.js
@ -1,4 +1,4 @@
-const version = '0.6.0'
+const version = '0.6.1'
 const consolePrefix = `[SW v${version}]  `

 const cacheName = `hvvstuhl-${version}`;
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m256-168-88-88 224-224-224-224 88-88 224 224 224-224 88 88-224 224 224 224-88 88-224-224-224 224Z"/></svg>`