diff --git a/index.html b/index.html
index 66927c3..2099374 100644
--- a/index.html
+++ b/index.html
@@ -44,7 +44,7 @@
diff --git a/main.js b/main.js
index e032909..dff3f0b 100644
--- a/main.js
+++ b/main.js
@@ -1,4 +1,4 @@
-const version = '0.6.3'
+const version = '0.6.4'
const minorVersion = version.split('.').splice(0, 2).join('.');
const numberFormat = new Intl.NumberFormat('de-DE', {
maximumFractionDigits: 1
diff --git a/style.css b/style.css
index 9f222c5..331675e 100644
--- a/style.css
+++ b/style.css
@@ -517,10 +517,7 @@ div#filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
- justify-content: stretch;
-}
-div#filters button, div#filters input {
- font-size: 1.5rem;
+ justify-content: center;
}
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;
diff --git a/style.css.map b/style.css.map
index 479054d..56af578 100644
--- 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;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"}
\ No newline at end of file
+{"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"}
\ No newline at end of file
diff --git a/style.scss b/style.scss
index a9ed6cf..49a4971 100644
--- a/style.scss
+++ b/style.scss
@@ -301,11 +301,7 @@ div#filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
- justify-content: stretch;
-
- button, input {
- font-size: 1.5rem;
- }
+ justify-content: center;
> * {
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;
diff --git a/sw.js b/sw.js
index fbfa986..8b19416 100644
--- a/sw.js
+++ b/sw.js
@@ -1,4 +1,4 @@
-const version = '0.6.3'
+const version = '0.6.4'
const consolePrefix = `[SW v${version}] `
const cacheName = `hvvstuhl-${version}`;