minor template and layout fixes
This commit is contained in:
parent
d9a21b53be
commit
af50e0f04d
5 changed files with 75 additions and 30 deletions
49
elevators.js
49
elevators.js
|
|
@ -249,8 +249,6 @@ function renderData() {
|
||||||
let elevatorsTemplate = '';
|
let elevatorsTemplate = '';
|
||||||
let previewTemplate = '';
|
let previewTemplate = '';
|
||||||
|
|
||||||
let templateHasOsmButton = false;
|
|
||||||
|
|
||||||
for (const elevator of station.elevators) {
|
for (const elevator of station.elevators) {
|
||||||
let linesTemplate = '<div class="lineList">Linien: ';
|
let linesTemplate = '<div class="lineList">Linien: ';
|
||||||
for (const line of elevator.lines) {
|
for (const line of elevator.lines) {
|
||||||
|
|
@ -273,9 +271,14 @@ function renderData() {
|
||||||
const tags = nodeInfo['tags'];
|
const tags = nodeInfo['tags'];
|
||||||
if (tags['highway'] === 'elevator') {
|
if (tags['highway'] === 'elevator') {
|
||||||
osmTemplate = '<dl>';
|
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">
|
osmTemplate += `<div>
|
||||||
Auf Karte anzeigen
|
<dt><span data-icon="location" class="size-l"></span>Link zur Karte</dt>
|
||||||
</a></dd></div>`;
|
<dd>
|
||||||
|
<a href="https://www.openstreetmap.org/node/${elevator.osmNodeId}" target="_blank">
|
||||||
|
Auf Karte anzeigen
|
||||||
|
</a>
|
||||||
|
</dd>
|
||||||
|
</div>`;
|
||||||
if (tags.hasOwnProperty('description')) {
|
if (tags.hasOwnProperty('description')) {
|
||||||
osmTemplate += `<div><dt><span data-icon="info" class="size-l"></span>Beschreibung</dt><dd>${tags['description']}</dd></div>`;
|
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 += `<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 {
|
} else {
|
||||||
console.warn(`OSM Node is not an elevator. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`);
|
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>
|
</dl>
|
||||||
<!--<hr>-->
|
<!--<hr>-->
|
||||||
${osmTemplate ? `<div class="osm" data-nodeid="${elevator.osmNodeId}">
|
${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}
|
${osmTemplate}
|
||||||
</div>` : `<button class="loadOSM">
|
</div>` : `<button class="loadOSM">
|
||||||
Zusätzliche Daten von OpenStreetMap abrufen
|
Zusätzliche Daten von OpenStreetMap abrufen
|
||||||
|
|
@ -354,8 +363,6 @@ Auf Karte anzeigen
|
||||||
</button>`}
|
</button>`}
|
||||||
</div>
|
</div>
|
||||||
</li>`;
|
</li>`;
|
||||||
|
|
||||||
templateHasOsmButton = templateHasOsmButton || !osmTemplate;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const template = `<li class="station" id="station_${stationIndex}">
|
const template = `<li class="station" id="station_${stationIndex}">
|
||||||
|
|
@ -384,20 +391,18 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
|
||||||
</li>`;
|
</li>`;
|
||||||
listContainer.insertAdjacentHTML('beforeend', template);
|
listContainer.insertAdjacentHTML('beforeend', template);
|
||||||
|
|
||||||
if (templateHasOsmButton) {
|
//immediate invocation
|
||||||
//immediate invocation
|
(function () {
|
||||||
(function () {
|
listContainer.querySelectorAll(`#station_${stationIndex} .loadOSM`).forEach(e => {
|
||||||
listContainer.querySelectorAll(`#station_${stationIndex} .loadOSM`).forEach(e => {
|
e.addEventListener('click', (ev) => {
|
||||||
e.addEventListener('click', (ev) => {
|
ev.target.querySelector('.spinner').classList.remove('hidden');
|
||||||
ev.target.querySelector('.spinner').classList.remove('hidden');
|
loadOsmData().then(() => {
|
||||||
loadOsmData().then(() => {
|
ev.target.classList.add('hidden');
|
||||||
ev.target.classList.add('hidden');
|
renderData();
|
||||||
renderData();
|
});
|
||||||
});
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
}());
|
})
|
||||||
}
|
}());
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
<input placeholder="Station suchen" id="searchStation">
|
<input placeholder="Station suchen" id="searchStation">
|
||||||
<button id="stationsNearMe">
|
<button id="stationsNearMe">
|
||||||
<span data-icon="location-searching" class="size-m"></span>
|
<span data-icon="location-searching" class="size-m"></span>
|
||||||
Stationen in der Nähe
|
Nach Entfernung sortieren
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
23
style.css
23
style.css
|
|
@ -60,7 +60,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-red {
|
.text-red {
|
||||||
color: #e32d2d;
|
color: #971616;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-orange {
|
.text-orange {
|
||||||
|
|
@ -147,6 +147,17 @@ button:hover {
|
||||||
background-color: var(--station-bg-hover);
|
background-color: var(--station-bg-hover);
|
||||||
border-color: var(--station-border-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 {
|
div#updateInfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -336,8 +347,14 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm
|
||||||
border-radius: var(--item-radius);
|
border-radius: var(--item-radius);
|
||||||
padding: var(--space-l);
|
padding: var(--space-l);
|
||||||
}
|
}
|
||||||
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm h4 {
|
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm .osmHeading {
|
||||||
margin-top: 0;
|
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 {
|
ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .osm dl div dt {
|
||||||
min-width: 18ch;
|
min-width: 18ch;
|
||||||
|
|
|
||||||
|
|
@ -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
29
style.scss
|
|
@ -65,7 +65,7 @@ $mediumBreakpoint: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-red {
|
.text-red {
|
||||||
color: #e32d2d;
|
color: #971616;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-orange {
|
.text-orange {
|
||||||
|
|
@ -164,6 +164,20 @@ button {
|
||||||
background-color: var(--station-bg-hover);
|
background-color: var(--station-bg-hover);
|
||||||
border-color: var(--station-border-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 {
|
div#updateInfo {
|
||||||
|
|
@ -371,10 +385,19 @@ ul#stationList {
|
||||||
border-radius: var(--item-radius);
|
border-radius: var(--item-radius);
|
||||||
padding: var(--space-l);
|
padding: var(--space-l);
|
||||||
|
|
||||||
h4 {
|
.osmHeading{
|
||||||
margin-top: 0;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-l);
|
||||||
|
margin-bottom: var(--space-l);
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
dl {
|
dl {
|
||||||
div {
|
div {
|
||||||
dt {
|
dt {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue