some major improvements
- filter by station type - sort by distance (WIP) - detect old data structure and clear localStorage if not compatible - add substitue coordinates for stations without valid osm node - improve responsive styles
This commit is contained in:
parent
af50e0f04d
commit
14a514e3e4
5 changed files with 726 additions and 128 deletions
209
style.css
209
style.css
|
|
@ -10,6 +10,18 @@
|
|||
--color-gray-800: hsl(12, 6%, 15%);
|
||||
--color-gray-900: hsl(24, 10%, 10%);
|
||||
--color-gray-950: hsl(20, 14%, 4%);
|
||||
--color-red: #971616;
|
||||
--color-orange: #cc6300;
|
||||
--color-green: #19942e;
|
||||
--bg-type-u: #006ab3;
|
||||
--bg-type-s: #1a962b;
|
||||
--bg-type-a: #f39100;
|
||||
--bg-type-r: #000000;
|
||||
--bg-type-u-disabled: #c3cfd7;
|
||||
--bg-type-s-disabled: #c6d4c8;
|
||||
--bg-type-a-disabled: #dfd8cf;
|
||||
--bg-type-r-disabled: #b3b3b3;
|
||||
--color-type-disabled: var(--color-gray-400);
|
||||
--bg: var(--color-gray-50);
|
||||
--text: var(--color-gray-950);
|
||||
--text-secondary: var(--color-gray-700);
|
||||
|
|
@ -52,23 +64,64 @@
|
|||
--station-border: var(--color-gray-600);
|
||||
--station-border-hover: var(--color-gray-400);
|
||||
--elevator-bg: var(--color-gray-900);
|
||||
--bg-type-u-disabled: #627f93;
|
||||
--bg-type-s-disabled: #688b6d;
|
||||
--bg-type-a-disabled: #aa987f;
|
||||
--bg-type-r-disabled: #333333;
|
||||
--color-type-disabled: var(--color-gray-200);
|
||||
}
|
||||
}
|
||||
|
||||
body.has-dialog {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialogs {
|
||||
display: none;
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
max-width: 100vw;
|
||||
padding: 1em;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.dialogs.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] button.close-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #971616;
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
color: #cc6300;
|
||||
color: var(--color-orange);
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: #19942e;
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -125,6 +178,8 @@ main {
|
|||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1em auto;
|
||||
max-width: 960px;
|
||||
}
|
||||
|
|
@ -147,6 +202,9 @@ button:hover {
|
|||
background-color: var(--station-bg-hover);
|
||||
border-color: var(--station-border-hover);
|
||||
}
|
||||
button[aria-pressed=true] {
|
||||
background-color: var(--nav-bg-visited);
|
||||
}
|
||||
button.size-s {
|
||||
font-size: 0.8rem;
|
||||
padding: var(--space-s) var(--space-m);
|
||||
|
|
@ -168,12 +226,23 @@ div#updateInfo {
|
|||
|
||||
div#filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-m);
|
||||
justify-items: stretch;
|
||||
justify-content: stretch;
|
||||
}
|
||||
div#filters button, div#filters input {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
div#filters > * {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
@media screen and (min-width: 576px) {
|
||||
div#filters > * {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
button#initialLoad {
|
||||
font-size: 1.5rem;
|
||||
|
|
@ -183,6 +252,14 @@ button.loadOSM {
|
|||
width: fit-content;
|
||||
}
|
||||
|
||||
div#errorMessage {
|
||||
border: solid 2px var(--color-red);
|
||||
border-radius: var(--item-radius);
|
||||
padding: var(--space-xl) var(--space-xl);
|
||||
margin-top: var(--space-l);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
ul#stationList {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
|
@ -202,9 +279,20 @@ ul#stationList > li.station > div.stationSummary {
|
|||
display: flex;
|
||||
gap: var(--space-m);
|
||||
}
|
||||
ul#stationList > li.station > div.stationSummary div.typeList {
|
||||
ul#stationList > li.station > div.stationSummary div.symbol {
|
||||
position: relative;
|
||||
}
|
||||
ul#stationList > li.station > div.stationSummary div.symbol div.typeList {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
ul#stationList > li.station > div.stationSummary div.symbol div.distance {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: -2lh;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
ul#stationList > li.station > div.stationSummary div.stationTitle {
|
||||
align-self: stretch;
|
||||
flex-grow: 1;
|
||||
|
|
@ -286,19 +374,26 @@ ul#stationList > li.station > details > ul > li.elevator {
|
|||
display: flex;
|
||||
align-items: start;
|
||||
flex-wrap: nowrap;
|
||||
padding: var(--space-m);
|
||||
gap: var(--space-m);
|
||||
position: relative;
|
||||
margin: 0 1rem 1rem;
|
||||
padding-right: var(--space-2xl);
|
||||
margin: 0 var(--space-s) var(--space-s);
|
||||
padding: var(--space-s);
|
||||
}
|
||||
@media screen and (min-width: 576px) {
|
||||
ul#stationList > li.station > details > ul > li.elevator {
|
||||
margin: 0 var(--space-2xl) 1rem;
|
||||
padding: var(--space-m);
|
||||
padding-right: var(--space-2xl);
|
||||
}
|
||||
}
|
||||
ul#stationList > li.station > details > ul > li.elevator > span {
|
||||
ul#stationList > li.station > details > ul > li.elevator > .stateIcon {
|
||||
flex-shrink: 0;
|
||||
display: none;
|
||||
}
|
||||
@media screen and (min-width: 576px) {
|
||||
ul#stationList > li.station > details > ul > li.elevator > .stateIcon {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
ul#stationList > li.station > details > ul > li.elevator:not(:first-child):before {
|
||||
content: "";
|
||||
|
|
@ -326,11 +421,25 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .ele
|
|||
font-weight: bold;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .lineList {
|
||||
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData div.firstRow {
|
||||
grid-column: 1/-1;
|
||||
display: flex;
|
||||
gap: var(--space-m);
|
||||
}
|
||||
@media screen and (min-width: 576px) {
|
||||
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData div.firstRow.hiddenOnDesktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 576px) {
|
||||
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData div.firstRow .stateIcon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData div.firstRow .lineList {
|
||||
display: flex;
|
||||
gap: var(--space-m);
|
||||
align-items: center;
|
||||
grid-column: 1/-1;
|
||||
min-height: var(--space-2xl);
|
||||
}
|
||||
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData hr {
|
||||
|
|
@ -350,6 +459,7 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm
|
|||
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm .osmHeading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-l);
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
|
@ -414,7 +524,7 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData dl d
|
|||
font-weight: bold;
|
||||
min-width: 15ch;
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
@media (max-width: 400px) {
|
||||
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData dl div dt {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -430,66 +540,101 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData dl d
|
|||
}
|
||||
}
|
||||
|
||||
span.lineChip, span.typeChip {
|
||||
span.lineChip, span.typeChip, button.typeChip {
|
||||
font-weight: bold;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
span.lineChip[data-type=U], span.typeChip[data-type=U] {
|
||||
background-color: #006ab3;
|
||||
span.lineChip[data-type=U], span.typeChip[data-type=U], button.typeChip[data-type=U] {
|
||||
background-color: var(--bg-type-u);
|
||||
color: #ffffff;
|
||||
}
|
||||
span.lineChip[data-type=U][data-line=U1], span.typeChip[data-type=U][data-line=U1] {
|
||||
span.lineChip[data-type=U][data-line=U1], span.typeChip[data-type=U][data-line=U1], button.typeChip[data-type=U][data-line=U1] {
|
||||
background-color: #006ab3;
|
||||
}
|
||||
span.lineChip[data-type=U][data-line=U2], span.typeChip[data-type=U][data-line=U2] {
|
||||
span.lineChip[data-type=U][data-line=U2], span.typeChip[data-type=U][data-line=U2], button.typeChip[data-type=U][data-line=U2] {
|
||||
background-color: #e2001a;
|
||||
}
|
||||
span.lineChip[data-type=U][data-line=U3], span.typeChip[data-type=U][data-line=U3] {
|
||||
span.lineChip[data-type=U][data-line=U3], span.typeChip[data-type=U][data-line=U3], button.typeChip[data-type=U][data-line=U3] {
|
||||
background-color: #ffdd00;
|
||||
color: #000000;
|
||||
}
|
||||
span.lineChip[data-type=U][data-line=U4], span.typeChip[data-type=U][data-line=U4] {
|
||||
span.lineChip[data-type=U][data-line=U4], span.typeChip[data-type=U][data-line=U4], button.typeChip[data-type=U][data-line=U4] {
|
||||
background-color: #0098a1;
|
||||
}
|
||||
span.lineChip[data-type=S], span.typeChip[data-type=S] {
|
||||
background-color: #1a962b;
|
||||
span.lineChip[data-type=S], span.typeChip[data-type=S], button.typeChip[data-type=S] {
|
||||
background-color: var(--bg-type-s);
|
||||
color: #ffffff;
|
||||
}
|
||||
span.lineChip[data-type=S][data-line=S1], span.typeChip[data-type=S][data-line=S1] {
|
||||
span.lineChip[data-type=S][data-line=S1], span.typeChip[data-type=S][data-line=S1], button.typeChip[data-type=S][data-line=S1] {
|
||||
background-color: #1a962b;
|
||||
}
|
||||
span.lineChip[data-type=S][data-line=S2], span.typeChip[data-type=S][data-line=S2] {
|
||||
span.lineChip[data-type=S][data-line=S2], span.typeChip[data-type=S][data-line=S2], button.typeChip[data-type=S][data-line=S2] {
|
||||
background-color: #b51143;
|
||||
}
|
||||
span.lineChip[data-type=S][data-line=S3], span.typeChip[data-type=S][data-line=S3] {
|
||||
span.lineChip[data-type=S][data-line=S3], span.typeChip[data-type=S][data-line=S3], button.typeChip[data-type=S][data-line=S3] {
|
||||
background-color: #622181;
|
||||
}
|
||||
span.lineChip[data-type=S][data-line=S4], span.typeChip[data-type=S][data-line=S4] {
|
||||
span.lineChip[data-type=S][data-line=S4], span.typeChip[data-type=S][data-line=S4], button.typeChip[data-type=S][data-line=S4] {
|
||||
background-color: #be148e;
|
||||
}
|
||||
span.lineChip[data-type=S][data-line=S5], span.typeChip[data-type=S][data-line=S5] {
|
||||
span.lineChip[data-type=S][data-line=S5], span.typeChip[data-type=S][data-line=S5], button.typeChip[data-type=S][data-line=S5] {
|
||||
background-color: #0089bb;
|
||||
}
|
||||
span.lineChip[data-type=S][data-line=S6], span.typeChip[data-type=S][data-line=S6] {
|
||||
span.lineChip[data-type=S][data-line=S6], span.typeChip[data-type=S][data-line=S6], button.typeChip[data-type=S][data-line=S6] {
|
||||
background-color: #d3da00;
|
||||
color: #000000;
|
||||
}
|
||||
span.lineChip[data-type=A], span.typeChip[data-type=A] {
|
||||
background-color: #f39100;
|
||||
span.lineChip[data-type=A], span.typeChip[data-type=A], button.typeChip[data-type=A] {
|
||||
background-color: var(--bg-type-a);
|
||||
color: #ffffff;
|
||||
}
|
||||
span.lineChip[data-type=R], span.typeChip[data-type=R] {
|
||||
background-color: #000000;
|
||||
span.lineChip[data-type=R], span.typeChip[data-type=R], button.typeChip[data-type=R] {
|
||||
background-color: var(--bg-type-r);
|
||||
color: #ffffff;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
span.lineChip[data-type=R], span.typeChip[data-type=R] {
|
||||
span.lineChip[data-type=R], span.typeChip[data-type=R], button.typeChip[data-type=R] {
|
||||
border: solid 2px #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
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][aria-pressed=false], div#typeFilter button.typeChip[data-type=S][aria-pressed=false], div#typeFilter button.typeChip[data-type=A][aria-pressed=false], div#typeFilter button.typeChip[data-type=R][aria-pressed=false] {
|
||||
background-color: var(--color-gray-500);
|
||||
color: var(--color-type-disabled);
|
||||
}
|
||||
div#typeFilter button.typeChip[data-type=U][aria-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=S][aria-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=A][aria-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=R][aria-pressed=false][data-type=U] {
|
||||
background-color: var(--bg-type-u-disabled);
|
||||
}
|
||||
div#typeFilter button.typeChip[data-type=U][aria-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=S][aria-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=A][aria-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=R][aria-pressed=false][data-type=S] {
|
||||
background-color: var(--bg-type-s-disabled);
|
||||
}
|
||||
div#typeFilter button.typeChip[data-type=U][aria-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=S][aria-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=A][aria-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=R][aria-pressed=false][data-type=A] {
|
||||
background-color: var(--bg-type-a-disabled);
|
||||
}
|
||||
div#typeFilter button.typeChip[data-type=U][aria-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=S][aria-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=A][aria-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=R][aria-pressed=false][data-type=R] {
|
||||
background-color: var(--bg-type-r-disabled);
|
||||
}
|
||||
|
||||
span.lineChip {
|
||||
padding: 0.3em 0.6em;
|
||||
min-width: 4ch;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue