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

minor template and layout fixes

Browse source
This commit is contained in:
kritzl 2024-06-05 11:49:38 +02:00
parent d9a21b53be
commit af50e0f04d
5 changed files with 75 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

49
elevators.js
View file

@ -249,8 +249,6 @@ function renderData() {
let elevatorsTemplate = '';
let previewTemplate = '';
let templateHasOsmButton = false;
for (const elevator of station.elevators) {
let linesTemplate = '<div class="lineList">Linien: ';
for (const line of elevator.lines) {
@ -273,9 +271,14 @@ function renderData() {
const tags = nodeInfo['tags'];
if (tags['highway'] === 'elevator') {
osmTemplate = '<dl>';
osmTemplate += `<div><dt><span data-icon="location" class="size-l"></span>Link zur Karte</dt><dd><a href="https://www.openstreetmap.org/node/${elevator.osmNodeId}" target="_blank">
Auf Karte anzeigen
</a></dd></div>`;
osmTemplate += `<div>
<dt><span data-icon="location" class="size-l"></span>Link zur Karte</dt>
<dd>
<a href="https://www.openstreetmap.org/node/${elevator.osmNodeId}" target="_blank">
Auf Karte anzeigen
</a>
</dd>
</div>`;
if (tags.hasOwnProperty('description')) {
osmTemplate += `<div><dt><span data-icon="info" class="size-l"></span>Beschreibung</dt><dd>${tags['description']}</dd></div>`;
}
@ -289,7 +292,7 @@ Auf Karte anzeigen
osmTemplate += `<div><dt><span data-icon="bicycle" class="size-l"></span>Fahrräder</dt><dd>${tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}</dd></div>`;
}
osmTemplate += '<dl>';
osmTemplate += '</dl>';
} else {
console.warn(`OSM Node is not an elevator. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`);
}
@ -346,7 +349,13 @@ Auf Karte anzeigen
</dl>
<!--<hr>-->
${osmTemplate ? `<div class="osm" data-nodeid="${elevator.osmNodeId}">
<h4>Daten von OpenStreetMap</h4>
<div class="osmHeading">
<h4>Daten von OpenStreetMap</h4>
<button class="loadOSM size-s">
OSM Daten aktualisieren
<span data-icon="load" class="size-s spinner hidden"></span>
</button>
</div>
${osmTemplate}
</div>` : `<button class="loadOSM">
Zusätzliche Daten von OpenStreetMap abrufen
@ -354,8 +363,6 @@ Auf Karte anzeigen
</button>`}
</div>
</li>`;
templateHasOsmButton = templateHasOsmButton || !osmTemplate;
}
const template = `<li class="station" id="station_${stationIndex}">
@ -384,20 +391,18 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
</li>`;
listContainer.insertAdjacentHTML('beforeend', template);
if (templateHasOsmButton) {
//immediate invocation
(function () {
listContainer.querySelectorAll(`#station_${stationIndex} .loadOSM`).forEach(e => {
e.addEventListener('click', (ev) => {
ev.target.querySelector('.spinner').classList.remove('hidden');
loadOsmData().then(() => {
ev.target.classList.add('hidden');
renderData();
});
})
//immediate invocation
(function () {
listContainer.querySelectorAll(`#station_${stationIndex} .loadOSM`).forEach(e => {
e.addEventListener('click', (ev) => {
ev.target.querySelector('.spinner').classList.remove('hidden');
loadOsmData().then(() => {
ev.target.classList.add('hidden');
renderData();
});
})
}());
}
})
}());
}

2
index.html
View file

@ -39,7 +39,7 @@
<input placeholder="Station suchen" id="searchStation">
<button id="stationsNearMe">
<span data-icon="location-searching" class="size-m"></span>
Stationen in der Nähe
Nach Entfernung sortieren
</button>
</div>

23
style.css
View file

@ -60,7 +60,7 @@
}
.text-red {
color: #e32d2d;
color: #971616;
}
.text-orange {
@ -147,6 +147,17 @@ button:hover {
background-color: var(--station-bg-hover);
border-color: var(--station-border-hover);
}
button.size-s {
font-size: 0.8rem;
padding: var(--space-s) var(--space-m);
}
button.size-m {
padding: var(--space-m) var(--space-l);
}
button.size-l {
font-size: 1.5rem;
padding: var(--space-m) var(--space-l);
}
div#updateInfo {
display: flex;
@ -336,8 +347,14 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm
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 .osmHeading {
display: flex;
align-items: center;
gap: var(--space-l);
margin-bottom: var(--space-l);
}
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm .osmHeading h4 {
margin: 0;
}
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm dl div dt {
min-width: 18ch;

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;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;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;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","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;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;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;EACA;EACA;EACA;;AAEA;EACE;;AAQA;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;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"}

29
style.scss
View file

@ -65,7 +65,7 @@ $mediumBreakpoint: 800px;
}
.text-red {
color: #e32d2d;
color: #971616;
}
.text-orange {
@ -164,6 +164,20 @@ button {
background-color: var(--station-bg-hover);
border-color: var(--station-border-hover);
}
&.size-s {
font-size: 0.8rem;
padding: var(--space-s) var(--space-m);
}
&.size-m {
padding: var(--space-m) var(--space-l);
}
&.size-l {
font-size: 1.5rem;
padding: var(--space-m) var(--space-l);
}
}
div#updateInfo {
@ -371,10 +385,19 @@ ul#stationList {
border-radius: var(--item-radius);
padding: var(--space-l);
h4 {
margin-top: 0;
.osmHeading{
display: flex;
align-items: center;
gap: var(--space-l);
margin-bottom: var(--space-l);
h4 {
margin: 0;
}
}
dl {
div {
dt {