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
229
style.scss
229
style.scss
|
|
@ -1,4 +1,7 @@
|
|||
@use 'sass:color';
|
||||
|
||||
$mobileBreakpoint: 576px;
|
||||
$smallBreakpoint: 400px;
|
||||
$mediumBreakpoint: 800px;
|
||||
|
||||
:root {
|
||||
|
|
@ -14,6 +17,24 @@ $mediumBreakpoint: 800px;
|
|||
--color-gray-900: hsl(24, 10%, 10%);
|
||||
--color-gray-950: hsl(20, 14%, 4%);
|
||||
|
||||
--color-red: #971616;
|
||||
--color-orange: #cc6300;
|
||||
--color-green: #19942e;
|
||||
|
||||
|
||||
$colorTypeU: #006ab3;
|
||||
$colorTypeS: #1a962b;
|
||||
$colorTypeA: #f39100;
|
||||
$colorTypeR: #000000;
|
||||
--bg-type-u: #{$colorTypeU};
|
||||
--bg-type-s: #{$colorTypeS};
|
||||
--bg-type-a: #{$colorTypeA};
|
||||
--bg-type-r: #{$colorTypeR};
|
||||
--bg-type-u-disabled: #{scale-color($colorTypeU, $saturation: -80%, $lightness: +70%)};
|
||||
--bg-type-s-disabled: #{scale-color($colorTypeS, $saturation: -80%, $lightness: +70%)};
|
||||
--bg-type-a-disabled: #{scale-color($colorTypeA, $saturation: -80%, $lightness: +70%)};
|
||||
--bg-type-r-disabled: #{scale-color($colorTypeR, $saturation: -80%, $lightness: +70%)};
|
||||
--color-type-disabled: var(--color-gray-400);
|
||||
|
||||
--bg: var(--color-gray-50);
|
||||
--text: var(--color-gray-950);
|
||||
|
|
@ -47,6 +68,13 @@ $mediumBreakpoint: 800px;
|
|||
--station-border: var(--color-gray-600);
|
||||
--station-border-hover: var(--color-gray-400);
|
||||
--elevator-bg: var(--color-gray-900);
|
||||
|
||||
--bg-type-u-disabled: #{scale-color($colorTypeU, $saturation: -80%, $lightness: +20%)};
|
||||
--bg-type-s-disabled: #{scale-color($colorTypeS, $saturation: -80%, $lightness: +20%)};
|
||||
--bg-type-a-disabled: #{scale-color($colorTypeA, $saturation: -80%, $lightness: +20%)};
|
||||
--bg-type-r-disabled: #{scale-color($colorTypeR, $saturation: -80%, $lightness: +20%)};
|
||||
--color-type-disabled: var(--color-gray-200);
|
||||
|
||||
}
|
||||
|
||||
--elevator-list-gap: 3rem;
|
||||
|
|
@ -60,20 +88,63 @@ $mediumBreakpoint: 800px;
|
|||
--space-2xl: 3rem;
|
||||
}
|
||||
|
||||
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: rgb(0 0 0 / 30%);
|
||||
|
||||
&.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;
|
||||
|
||||
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 {
|
||||
|
|
@ -142,6 +213,8 @@ main {
|
|||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1em auto;
|
||||
max-width: 960px;
|
||||
}
|
||||
|
|
@ -165,6 +238,10 @@ button {
|
|||
border-color: var(--station-border-hover);
|
||||
}
|
||||
|
||||
&[aria-pressed='true'] {
|
||||
background-color: var(--nav-bg-visited);
|
||||
}
|
||||
|
||||
&.size-s {
|
||||
font-size: 0.8rem;
|
||||
padding: var(--space-s) var(--space-m);
|
||||
|
|
@ -189,12 +266,22 @@ div#updateInfo {
|
|||
|
||||
div#filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-m);
|
||||
justify-items: stretch;
|
||||
justify-content: stretch;
|
||||
|
||||
button, input {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
@media screen and (min-width: $mobileBreakpoint) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button#initialLoad {
|
||||
|
|
@ -205,6 +292,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;
|
||||
|
|
@ -220,12 +315,35 @@ ul#stationList {
|
|||
position: relative;
|
||||
padding: var(--space-m);
|
||||
|
||||
//div.distance {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// font-size: 0.8rem;
|
||||
// color: var(--text-secondary);
|
||||
// position: absolute;
|
||||
// width: 100%;
|
||||
//}
|
||||
|
||||
> div.stationSummary {
|
||||
display: flex;
|
||||
gap: var(--space-m);
|
||||
|
||||
div.typeList {
|
||||
flex-shrink: 0;
|
||||
div.symbol {
|
||||
position: relative;
|
||||
|
||||
div.typeList {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
div.distance {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: -2lh;
|
||||
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -318,20 +436,24 @@ ul#stationList {
|
|||
display: flex;
|
||||
align-items: start;
|
||||
flex-wrap: nowrap;
|
||||
padding: var(--space-m);
|
||||
gap: var(--space-m);
|
||||
position: relative;
|
||||
|
||||
margin: 0 1rem 1rem;
|
||||
margin: 0 var(--space-s) var(--space-s);
|
||||
padding: var(--space-s);
|
||||
@media screen and (min-width: $mobileBreakpoint) {
|
||||
margin: 0 var(--space-2xl) 1rem;
|
||||
padding: var(--space-m);
|
||||
padding-right: var(--space-2xl);
|
||||
}
|
||||
|
||||
padding-right: var(--space-2xl);
|
||||
|
||||
// elevator icon
|
||||
> span {
|
||||
> .stateIcon {
|
||||
flex-shrink: 0;
|
||||
display: none;
|
||||
@media screen and (min-width: $mobileBreakpoint) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
// divider between elevators
|
||||
|
|
@ -362,14 +484,33 @@ ul#stationList {
|
|||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.lineList {
|
||||
div.firstRow {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
gap: var(--space-m);
|
||||
align-items: center;
|
||||
grid-column: 1 / -1;
|
||||
min-height: var(--space-2xl);
|
||||
|
||||
&.hiddenOnDesktop {
|
||||
@media screen and (min-width: $mobileBreakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stateIcon {
|
||||
@media screen and (min-width: $mobileBreakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.lineList {
|
||||
display: flex;
|
||||
gap: var(--space-m);
|
||||
align-items: center;
|
||||
min-height: var(--space-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
|
|
@ -385,9 +526,10 @@ ul#stationList {
|
|||
border-radius: var(--item-radius);
|
||||
padding: var(--space-l);
|
||||
|
||||
.osmHeading{
|
||||
.osmHeading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-l);
|
||||
margin-bottom: var(--space-l);
|
||||
|
||||
|
|
@ -397,7 +539,6 @@ ul#stationList {
|
|||
}
|
||||
|
||||
|
||||
|
||||
dl {
|
||||
div {
|
||||
dt {
|
||||
|
|
@ -474,7 +615,7 @@ ul#stationList {
|
|||
font-weight: bold;
|
||||
min-width: 15ch;
|
||||
|
||||
@media (max-width: $mobileBreakpoint) {
|
||||
@media (max-width: $smallBreakpoint) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -498,14 +639,14 @@ ul#stationList {
|
|||
}
|
||||
}
|
||||
|
||||
span.lineChip, span.typeChip {
|
||||
span.lineChip, span.typeChip, button.typeChip {
|
||||
font-weight: bold;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
&[data-type="U"] {
|
||||
background-color: #006ab3;
|
||||
background-color: var(--bg-type-u);
|
||||
color: #ffffff;
|
||||
|
||||
&[data-line="U1"] {
|
||||
|
|
@ -527,7 +668,7 @@ span.lineChip, span.typeChip {
|
|||
}
|
||||
|
||||
&[data-type="S"] {
|
||||
background-color: #1a962b;
|
||||
background-color: var(--bg-type-s);
|
||||
color: #ffffff;
|
||||
|
||||
&[data-line="S1"] {
|
||||
|
|
@ -557,12 +698,12 @@ span.lineChip, span.typeChip {
|
|||
}
|
||||
|
||||
&[data-type="A"] {
|
||||
background-color: #f39100;
|
||||
background-color: var(--bg-type-a);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&[data-type="R"] {
|
||||
background-color: #000000;
|
||||
background-color: var(--bg-type-r);
|
||||
color: #ffffff;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -571,6 +712,48 @@ span.lineChip, span.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;
|
||||
&[data-type="U"], &[data-type="S"], &[data-type="A"], &[data-type="R"] {
|
||||
border: solid 2px var(--station-border);
|
||||
&[aria-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
span.lineChip {
|
||||
padding: 0.3em 0.6em;
|
||||
min-width: 4ch;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue