kritzl/hvvstuhl.de
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

minor layout improvements

Browse source
This commit is contained in:
kritzl 2024-06-04 21:23:27 +02:00
parent 7673265167
commit 470b3e2336
4 changed files with 56 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

16
elevators.js
View file

@ -93,6 +93,7 @@ async function loadElevators() {
internalData.stations[stationIndex++] = { internalData.stations[stationIndex++] = {
name: stationName, name: stationName,
comment: station['comment'],
state: stationState, state: stationState,
lines: stationLines, lines: stationLines,
types: stationTypes, types: stationTypes,
@ -283,13 +284,17 @@ Auf Karte anzeigen
} }
osmTemplate += '<dl>'; osmTemplate += '<dl>';
} else {
console.warn(`OSM Node is not an elevator. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`);
} }
} else { } else {
osmTemplate = 'keine Daten'; console.warn(`OSM Node has no Tags. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`);
} }
} else { } else {
osmTemplate = 'keine Daten'; console.warn(`OSM Node not found (deleted). At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`);
} }
} else {
console.warn(`Elevator has no OSM Node id:\t${station.name}\t${elevator}`);
} }
@ -308,6 +313,7 @@ Auf Karte anzeigen
: 'Außer Betrieb'}"> : 'Außer Betrieb'}">
</span> </span>
<div class="elevatorData"> <div class="elevatorData">
${elevator.lines.length ? `${linesTemplate}` : ''}
${elevator.instCause !== '' ? `<div class="elevatorInfo">${elevator.instCause}</div>` : ''} ${elevator.instCause !== '' ? `<div class="elevatorInfo">${elevator.instCause}</div>` : ''}
${elevator.levels.length ? levelsTemplate : elevator.description} ${elevator.levels.length ? levelsTemplate : elevator.description}
<dl> <dl>
@ -332,11 +338,11 @@ Auf Karte anzeigen
<dd>${elevator.speaker === -1 ? 'unbekannt' : elevator.speaker ? `verfügbar` : 'nicht verfügbar'}</dd> <dd>${elevator.speaker === -1 ? 'unbekannt' : elevator.speaker ? `verfügbar` : 'nicht verfügbar'}</dd>
</div> </div>
</dl> </dl>
${elevator.lines.length ? `${linesTemplate}` : ''} <!--<hr>-->
<div class="osm" data-nodeid="${elevator.osmNodeId}"> ${osmTemplate ? `<div class="osm" data-nodeid="${elevator.osmNodeId}">
<h4>Daten von OpenStreetMap</h4> <h4>Daten von OpenStreetMap</h4>
${osmTemplate} ${osmTemplate}
</div> </div>` : ''}
</div> </div>
</li>`; </li>`;
} }

23
style.css
View file

@ -34,6 +34,7 @@
--space-m: 0.5rem; --space-m: 0.5rem;
--space-l: 1rem; --space-l: 1rem;
--space-xl: 2rem; --space-xl: 2rem;
--space-2xl: 3rem;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
@ -258,10 +259,11 @@ ul#stationList > li.station > details > ul > li.elevator {
gap: var(--space-m); gap: var(--space-m);
position: relative; position: relative;
margin: 0 1rem 1rem; margin: 0 1rem 1rem;
padding-right: var(--space-2xl);
} }
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
ul#stationList > li.station > details > ul > li.elevator { ul#stationList > li.station > details > ul > li.elevator {
margin: 0 3rem 1rem; margin: 0 var(--space-2xl) 1rem;
} }
} }
ul#stationList > li.station > details > ul > li.elevator > span { ul#stationList > li.station > details > ul > li.elevator > span {
@ -298,10 +300,24 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .lin
gap: var(--space-m); gap: var(--space-m);
align-items: center; align-items: center;
grid-column: 1/-1; grid-column: 1/-1;
min-height: var(--space-2xl);
}
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData hr {
grid-column: 1/-1;
width: 100%;
margin: 0;
border: none;
border-bottom: dashed 2px var(--station-border);
} }
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm { ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm {
grid-column: 1/-1; grid-column: 1/-1;
color: var(--text-secondary); color: var(--text-secondary);
border: dashed 2px var(--station-border);
border-radius: var(--item-radius);
padding: var(--space-l);
}
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm h4 {
margin-top: 0;
} }
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm dl div dt { ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm dl div dt {
min-width: 18ch; min-width: 18ch;
@ -367,8 +383,9 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData dl d
} }
} }
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData dl div dd { ul#stationList > li.station > details > ul > li.elevator > div.elevatorData dl div dd {
flex-shrink: 0; width: 0;
margin-left: 3rem; flex-grow: 1;
margin-left: var(--space-2xl);
} }
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData dl div dd { ul#stationList > li.station > details > ul > li.elevator > div.elevatorData dl div dd {

2
style.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAmBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAxBA;EA/BF;IAgCI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;;AAaJ;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIF;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;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EA1BF;IA2BI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EATF;IAUI;;;AAIF;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;EACA;;AAGF;EACE;EACA;;AAII;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;;AAEA;EAJF;IAKI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;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;;;;AAKN;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","file":"style.css"} {"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAmBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAzBA;EA/BF;IAgCI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;;AAcJ;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIF;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;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EA1BF;IA2BI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EAKA;;AAJA;EATF;IAUI;;;AAMF;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;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKE;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;;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;;;;AAKN;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","file":"style.css"}

27
style.scss
View file

@ -57,6 +57,7 @@ $mediumBreakpoint: 800px;
--space-m: 0.5rem; --space-m: 0.5rem;
--space-l: 1rem; --space-l: 1rem;
--space-xl: 2rem; --space-xl: 2rem;
--space-2xl: 3rem;
} }
.hidden { .hidden {
@ -289,9 +290,11 @@ ul#stationList {
margin: 0 1rem 1rem; margin: 0 1rem 1rem;
@media screen and (min-width: $mobileBreakpoint) { @media screen and (min-width: $mobileBreakpoint) {
margin: 0 3rem 1rem; margin: 0 var(--space-2xl) 1rem;
} }
padding-right: var(--space-2xl);
// elevator icon // elevator icon
> span { > span {
flex-shrink: 0; flex-shrink: 0;
@ -330,11 +333,27 @@ ul#stationList {
gap: var(--space-m); gap: var(--space-m);
align-items: center; align-items: center;
grid-column: 1 / -1; grid-column: 1 / -1;
min-height: var(--space-2xl);
}
hr {
grid-column: 1 / -1;
width: 100%;
margin: 0;
border: none;
border-bottom: dashed 2px var(--station-border);
} }
.osm { .osm {
grid-column: 1 / -1; grid-column: 1 / -1;
color: var(--text-secondary); color: var(--text-secondary);
border: dashed 2px var(--station-border);
border-radius: var(--item-radius);
padding: var(--space-l);
h4 {
margin-top: 0;
}
dl { dl {
div { div {
@ -418,8 +437,10 @@ ul#stationList {
} }
dd { dd {
flex-shrink: 0; width: 0;
margin-left: 3rem; flex-grow: 1;
margin-left: var(--space-2xl);
@media screen and (min-width: $mobileBreakpoint) { @media screen and (min-width: $mobileBreakpoint) {
margin-left: 1rem; margin-left: 1rem;