v0.6.4: update filter styles

elevators.js

@@ -232,6 +232,7 @@ async function loadOsmData() {
 
         if (!internalData.stations[stationIndex].hasOwnProperty('coordinates')) {
             const substitute = substituteData.filter(subs => subs.name === internalData.stations[stationIndex].name)
+            console.log(substitute)
             if (substitute.length && substitute[0].hasOwnProperty('coordinates')) {
                 internalData.stations[stationIndex]['coordinates'] = substitute[0].coordinates;
             }

icons/favicon_source.svg

@@ -53,7 +53,10 @@
        y="0"
        width="100"
        height="100"
-       id="page4" /></sodipodi:namedview><defs
+       id="page4"
+       inkscape:export-filename="favicon-transparent.svg"
+       inkscape:export-xdpi="130.048"
+       inkscape:export-ydpi="130.048" /></sodipodi:namedview><defs
      id="defs1" /><g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"

index.html

@@ -44,7 +44,7 @@
         <input placeholder="Station suchen" id="searchStation">
         <button id="stationsNearMe" aria-pressed="false">
             <span data-icon="location-searching" class="size-m"></span>
-            Nach Entfernung sortieren
+            Standort
             <span data-icon="load" class="size-m spinner hidden"></span>
         </button>
         <div id="typeFilter">

main.js

@@ -1,4 +1,4 @@
-const version = '0.6.2'
+const version = '0.6.4'
 const minorVersion = version.split('.').splice(0, 2).join('.');
 const numberFormat = new Intl.NumberFormat('de-DE', {
     maximumFractionDigits: 1
@@ -34,8 +34,18 @@ function closeDialog(selector) {
 }
 
 if ("serviceWorker" in navigator) {
-    console.log('installing sw');
+    navigator.serviceWorker.register("/sw.js")
-    navigator.serviceWorker.register("/sw.js").then((registration) => {
+        .then((registration) => {
-        console.log('done installing sw');
+            if (registration.installing) {
-    });
+                console.log('New Service Worker is installing...');
+            } else if (registration.waiting) {
+                console.log('Installed new service worker. Waiting for Update (up to 24h).');
+            } else if (registration.active) {
+                console.log('Service Worker is up to date.');
+            }
+        })
+        .catch((error) => {
+            // registration failed
+            console.error(`Registration failed with ${error}`);
+        });
 }

style.css

@@ -404,7 +404,7 @@ body.has-dialog {
 
 body {
   font-family: system-ui, ui-sans-serif, sans-serif;
-  font-size: 1.2rem;
+  font-size: 1rem;
   background-color: var(--bg);
   color: var(--text);
 }
@@ -517,10 +517,7 @@ div#filters {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-m);
-  justify-content: stretch;
+  justify-content: center;
-}
-div#filters button, div#filters input {
-  font-size: 1.5rem;
 }
 div#filters > * {
   width: 100%;
@@ -530,8 +527,63 @@ div#filters > * {
 @media screen and (min-width: 576px) {
   div#filters > * {
     width: auto;
+    min-width: 0;
   }
 }
+div#filters input#searchStation {
+  flex-grow: 1;
+  font-size: 1.5rem;
+  min-width: 10ch;
+}
+div#filters button#stationsNearMe {
+  font-size: 1.5rem;
+}
+div#filters div#typeFilter {
+  font-size: 1.5rem;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  min-height: var(--space-2xl);
+  gap: var(--space-m);
+}
+div#filters div#typeFilter button.typeChip {
+  flex-shrink: 0;
+  padding: 0;
+  height: var(--space-2xl);
+  aspect-ratio: 1/1;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  border-radius: 9999px;
+}
+div#filters div#typeFilter button.typeChip[data-type=U], div#filters div#typeFilter button.typeChip[data-type=S], div#filters div#typeFilter button.typeChip[data-type=A], div#filters div#typeFilter button.typeChip[data-type=R] {
+  border: solid 2px var(--text);
+}
+div#filters div#typeFilter button.typeChip[data-type=U][data-pressed=false], div#filters div#typeFilter button.typeChip[data-type=S][data-pressed=false], div#filters div#typeFilter button.typeChip[data-type=A][data-pressed=false], div#filters div#typeFilter button.typeChip[data-type=R][data-pressed=false] {
+  background-color: var(--color-gray-500);
+  color: var(--color-type-disabled);
+}
+div#filters div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=U], div#filters div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=U], div#filters div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=U], div#filters div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=U] {
+  background-color: var(--bg-type-u-disabled);
+}
+div#filters div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=S], div#filters div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=S], div#filters div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=S], div#filters div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=S] {
+  background-color: var(--bg-type-s-disabled);
+}
+div#filters div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=A], div#filters div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=A], div#filters div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=A], div#filters div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=A] {
+  background-color: var(--bg-type-a-disabled);
+}
+div#filters div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=R], div#filters div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=R], div#filters div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=R], div#filters div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=R] {
+  background-color: var(--bg-type-r-disabled);
+}
+div#filters div#typeFilter button.typeChip[data-type=U][data-pressed=false]::after, div#filters div#typeFilter button.typeChip[data-type=S][data-pressed=false]::after, div#filters div#typeFilter button.typeChip[data-type=A][data-pressed=false]::after, div#filters div#typeFilter button.typeChip[data-type=R][data-pressed=false]::after {
+  position: absolute;
+  content: "";
+  width: 144%;
+  height: 0.4rem;
+  background-color: var(--color-gray-700);
+  transform: rotate(-45deg);
+}
 
 button#initialLoad {
   font-size: 1.5rem;
@@ -920,52 +972,6 @@ span.lineChip[data-type=R], span.typeChip[data-type=R], button.typeChip[data-typ
   }
 }
 
-div#typeFilter {
-  display: flex;
-  flex-grow: 1;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  min-height: var(--space-2xl);
-  gap: var(--space-m);
-}
-div#typeFilter button.typeChip {
-  padding: 0;
-  height: 100%;
-  aspect-ratio: 1/1;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-}
-div#typeFilter button.typeChip[data-type=U], div#typeFilter button.typeChip[data-type=S], div#typeFilter button.typeChip[data-type=A], div#typeFilter button.typeChip[data-type=R] {
-  border: solid 2px var(--station-border);
-}
-div#typeFilter button.typeChip[data-type=U][data-pressed=false], div#typeFilter button.typeChip[data-type=S][data-pressed=false], div#typeFilter button.typeChip[data-type=A][data-pressed=false], div#typeFilter button.typeChip[data-type=R][data-pressed=false] {
-  background-color: var(--color-gray-500);
-  color: var(--color-type-disabled);
-}
-div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=U] {
-  background-color: var(--bg-type-u-disabled);
-}
-div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=S] {
-  background-color: var(--bg-type-s-disabled);
-}
-div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=A] {
-  background-color: var(--bg-type-a-disabled);
-}
-div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=R] {
-  background-color: var(--bg-type-r-disabled);
-}
-div#typeFilter button.typeChip[data-type=U][data-pressed=false]::after, div#typeFilter button.typeChip[data-type=S][data-pressed=false]::after, div#typeFilter button.typeChip[data-type=A][data-pressed=false]::after, div#typeFilter button.typeChip[data-type=R][data-pressed=false]::after {
-  position: absolute;
-  content: "";
-  width: 144%;
-  height: 0.4rem;
-  background-color: var(--color-gray-500);
-  opacity: 80%;
-  transform: rotate(-45deg);
-}
-
 span.lineChip {
   padding: 0.3em 0.6em;
   min-width: 4ch;

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;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"}
+{"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;EACA;EACA;;AACA;EAJF;IAKI;IACA;;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;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;;;AAQZ;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;;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"}

style.scss

@@ -171,7 +171,7 @@ body {
 
 body {
   font-family: system-ui, ui-sans-serif, sans-serif;
-  font-size: 1.2rem;
+  font-size: 1rem;
 
   // colors
   background-color: var(--bg);
@@ -301,11 +301,7 @@ div#filters {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-m);
-  justify-content: stretch;
+  justify-content: center;
-
-  button, input {
-    font-size: 1.5rem;
-  }
 
   > * {
     width: 100%;
@@ -313,6 +309,72 @@ div#filters {
     text-align: center;
     @media screen and (min-width: $mobileBreakpoint) {
       width: auto;
+      min-width: 0;
+    }
+  }
+
+  input#searchStation {
+    flex-grow: 1;
+    font-size: 1.5rem;
+    min-width: 10ch;
+  }
+
+  button#stationsNearMe {
+    font-size: 1.5rem;
+  }
+
+  div#typeFilter {
+    font-size: 1.5rem;
+    display: flex;
+    justify-content: center;
+    flex-shrink: 0;
+    min-height: var(--space-2xl);
+    gap: var(--space-m);
+
+    button.typeChip {
+      flex-shrink: 0;
+      padding: 0;
+      height: var(--space-2xl);
+      aspect-ratio: 1/1;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      overflow: hidden;
+      border-radius: 9999px;
+
+      &[data-type="U"], &[data-type="S"], &[data-type="A"], &[data-type="R"] {
+        border: solid 2px var(--text);
+
+        &[data-pressed="false"] {
+          background-color: var(--color-gray-500);
+          color: var(--color-type-disabled);
+
+          &[data-type="U"] {
+            background-color: var(--bg-type-u-disabled);
+          }
+
+          &[data-type="S"] {
+            background-color: var(--bg-type-s-disabled);
+          }
+
+          &[data-type="A"] {
+            background-color: var(--bg-type-a-disabled);
+          }
+
+          &[data-type="R"] {
+            background-color: var(--bg-type-r-disabled);
+          }
+
+          &::after {
+            position: absolute;
+            content: '';
+            width: 144%;
+            height: 0.4rem;
+            background-color: var(--color-gray-700);
+            transform: rotate(-45deg);
+          }
+        }
+      }
     }
   }
 }
@@ -777,61 +839,6 @@ span.lineChip, span.typeChip, button.typeChip {
 }
 
 
-div#typeFilter {
-  display: flex;
-  flex-grow: 1;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  min-height: var(--space-2xl);
-  gap: var(--space-m);
-
-  button.typeChip {
-    padding: 0;
-    height: 100%;
-    aspect-ratio: 1/1;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    overflow: hidden;
-
-    &[data-type="U"], &[data-type="S"], &[data-type="A"], &[data-type="R"] {
-      border: solid 2px var(--station-border);
-
-      &[data-pressed="false"] {
-        background-color: var(--color-gray-500);
-        color: var(--color-type-disabled);
-
-        &[data-type="U"] {
-          background-color: var(--bg-type-u-disabled);
-        }
-
-        &[data-type="S"] {
-          background-color: var(--bg-type-s-disabled);
-        }
-
-        &[data-type="A"] {
-          background-color: var(--bg-type-a-disabled);
-        }
-
-        &[data-type="R"] {
-          background-color: var(--bg-type-r-disabled);
-        }
-
-        &::after {
-          position: absolute;
-          content: '';
-          width: 144%;
-          height: 0.4rem;
-          background-color: var(--color-gray-500);
-          opacity: 80%;
-          transform: rotate(-45deg);
-        }
-      }
-    }
-  }
-}
-
-
 span.lineChip {
   padding: 0.3em 0.6em;
   min-width: 4ch;

sw.js

@@ -1,4 +1,4 @@
-const version = '0.6.2'
+const version = '0.6.4'
 const consolePrefix = `[SW v${version}]  `
 
 const cacheName = `hvvstuhl-${version}`;
@@ -36,13 +36,16 @@ const contentToCache = [
 
 // Service worker Install: Cache all files
 self.addEventListener("install", (e) => {
-    console.log("[Service Worker] Wird installiert....");
+    console.log(`${consolePrefix}Wird installiert....`);
     e.waitUntil(
         (async () => {
             const cache = await caches.open(cacheName);
-            console.log("[Service Worker]   Cache wird aufgebaut...");
+            console.log(`${consolePrefix}  Cache wird aufgebaut...`);
             await cache.addAll(contentToCache);
-            console.log("[Service Worker]   FERTIG");
+            console.log(`${consolePrefix}  > FERTIG`);
+            console.log(`${consolePrefix}  Versuche Wartezeit zu überspringen...`);
+            await self.skipWaiting();
+            console.log(`${consolePrefix}  > Erfolgreich`);
         })(),
     );
 });
@@ -60,8 +63,10 @@ const deleteOldCaches = async () => {
 self.addEventListener("activate", (event) => {
     event.waitUntil(
         (async () => {
-            await deleteOldCaches()
+            await deleteOldCaches();
-            await clients.claim();
+            console.log(`${consolePrefix}Versuche Clients zu beanspruchen...`);
+            await self.clients.claim();
+            console.log(`${consolePrefix}  > Erfolgreich`);
         })(),
     );
 });
@@ -79,12 +84,12 @@ self.addEventListener("fetch", (e) => {
 
                 const r = await caches.match(e.request);
                 if (r) {
-                    console.log(`${consolePrefix}  Im Cache gefunden.`);
+                    console.log(`${consolePrefix}  > Im Cache gefunden.`);
                     return r;
                 }
                 const response = await fetch(e.request);
                 const cache = await caches.open(cacheName);
-                console.log(`${consolePrefix}  Nicht gefunden. Aktualisiere Cache: ${path}`);
+                console.log(`${consolePrefix}  > Nicht gefunden. Aktualisiere Cache: ${path}`);
                 await cache.put(e.request, response.clone());
                 return response;
             }else{