From 767326516786c521bf7985bff96fd647aef5ae46 Mon Sep 17 00:00:00 2001 From: kritzl Date: Tue, 4 Jun 2024 16:08:44 +0200 Subject: [PATCH 01/18] only render Elements in renderData --- elevators.js | 308 ++++++++++++++++++++++++++++----------------------- 1 file changed, 167 insertions(+), 141 deletions(-) diff --git a/elevators.js b/elevators.js index 34b9713..912f1ea 100644 --- a/elevators.js +++ b/elevators.js @@ -1,3 +1,11 @@ +const internalData = { + lastUpdate: 0, + stations: [], +}; +let geolocationPermission = false; +let geolocation = [null, null]; + + Object.defineProperty(String.prototype, 'capitalize', { value: function () { return this.charAt(0).toUpperCase() + this.toLowerCase().slice(1); @@ -9,7 +17,90 @@ async function loadElevators() { const res = await fetch('https://www.hvv.de/elevators', {referrer: ""}); const data = await res.json(); - localStorage.setItem("elevator_data", JSON.stringify(data)); + + const stations = data['stations']; + stations.sort(sortStations) + internalData.lastUpdate = new Date(data['lastUpdate']); + + let stationIndex = 0; + + for (const station of stations) { + const stationName = station['mainSubStation']['stationName']; + const lines = new Set(); + const elevators = []; + for (const elevatorKey of Object.keys(station.elevators)) { + const elevatorApi = station.elevators[elevatorKey]; + const elevatorLines = []; + for (let line of elevatorApi.lines) { + line = line.replace(/[()]/g, ""); + lines.add(line); + elevatorLines.push({ + line: line, + type: getType(line), + }); + } + + // try to detect levels from description + let levels = []; + if (elevatorApi.description.search('<->') >= 0) { + levels = elevatorApi.description.split('<->').map(level => level.trim()); + } else if (elevatorApi.description.search('<>') >= 0) { + levels = elevatorApi.description.split('<>').map(level => level.trim()); + } else if (elevatorApi.description.search('/ ') >= 0) { + levels = elevatorApi.description.split('/ ').map(level => level.trim()); + } + + const elevator = { + working: elevatorApi['state'] === 1, + stateUnavailable: elevatorApi['state'] === -1, + dimensions: { + width: elevatorApi['cabinWidth'], + length: elevatorApi['cabinLength'], + door: elevatorApi['doorWidth'], + }, + description: elevatorApi['description'], + label: elevatorApi['label'], + type: elevatorApi['type'].replace('_', ' ').capitalize(), + braille: elevatorApi['tasterType'] === 'UNBEKANNT' ? -1 : elevatorApi['tasterType'] === 'KOMBI' || elevatorApi['tasterType'] === 'BRAILLE', + speaker: elevatorApi['tasterType'] === 'UNBEKANNT' ? -1 : elevatorApi['tasterType'] === 'KOMBI', + lines: elevatorLines, + levels: levels, + instCause: elevatorApi['instCause'], + osmNodeId: elevatorApi['osmId'], + } + + elevators.push(elevator); + } + + let stationState = { + unavailable: 0, + working: 0, + outOfOrder: 0, + } + + for (const elevator of elevators) { + if (elevator.stateUnavailable) { + stationState.unavailable++; + } else if (elevator.working) { + stationState.working++; + } else { + stationState.outOfOrder++; + } + } + + const stationLines = Array.from(lines); + const stationTypes = Array.from(getTypes(stationLines)); + + internalData.stations[stationIndex++] = { + name: stationName, + state: stationState, + lines: stationLines, + types: stationTypes, + elevators: elevators, + } + } + + localStorage.setItem("internal_data", JSON.stringify(internalData)); } const dateTimeStyle = new Intl.DateTimeFormat('de-DE', { @@ -18,19 +109,11 @@ const dateTimeStyle = new Intl.DateTimeFormat('de-DE', { timeZone: 'Europe/Berlin', }) -const internalData = [] -let geolocationPermission = false; -let geolocation = [null, null]; - async function loadOsmData() { - const elevatorNodes = document.querySelectorAll('.elevator'); const nodeIdList = []; - for (const elevator of elevatorNodes) { - const osmContainer = elevator.querySelector('.osm'); - const nodeId = osmContainer.dataset.nodeid; - if (nodeId > 0) { - elevator.querySelector('.osm').insertAdjacentHTML("beforeend", '
loading...
'); - nodeIdList.push(nodeId) + for (const station of internalData.stations) { + for (const elevator of station.elevators) { + nodeIdList.push(elevator.osmNodeId) } } @@ -39,44 +122,7 @@ async function loadOsmData() { if (!osmJson.hasOwnProperty('elements')) return; - for (const elevator of elevatorNodes) { - const tagContainer = elevator.querySelector('.osmTags'); - const nodeId = elevator.querySelector('.osm').dataset.nodeid; - - const nodes = osmJson.elements.filter(node => node.id === parseInt(nodeId)) - if (!nodes.length) { - tagContainer.innerHTML = 'keine Daten'; - continue; - } - const nodeInfo = nodes[0]; - - if (!nodeInfo.hasOwnProperty('tags')) { - tagContainer.innerHTML = 'keine Daten'; - continue; - } - const tags = nodeInfo['tags']; - - if (tags['highway'] === 'elevator') { - let osmTemplate = ''; - osmTemplate += `
Link zur Karte
-Auf Karte anzeigen -
`; - if (tags.hasOwnProperty('description')) { - osmTemplate += `
Beschreibung
${tags['description']}
`; - } - if (tags.hasOwnProperty('level')) { - osmTemplate += `
Ebenen
${tags['level'].split(';').sort().join(', ')}
`; - } - if (tags.hasOwnProperty('wheelchair')) { - osmTemplate += `
Rollstühle
${tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}
`; - } - if (tags.hasOwnProperty('bicycle')) { - osmTemplate += `
Fahrräder
${tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}
`; - } - tagContainer.innerHTML = ''; // clear loading state - tagContainer.insertAdjacentHTML('beforeend', osmTemplate); - } - } + localStorage.setItem("osm_data", JSON.stringify(osmJson)); } function distance([lat1, lon1], [lat2, lon2]) { @@ -171,85 +217,34 @@ function getTypes(lines) { } function renderData() { - const data = JSON.parse(localStorage.getItem("elevator_data")); + const ls = JSON.parse(localStorage.getItem("internal_data")); + if (!ls) return; + internalData.lastUpdate = ls['lastUpdate']; + internalData.stations = ls['stations']; + const osmData = JSON.parse(localStorage.getItem("osm_data")); - if (!data) { + if (!internalData || !internalData.stations.length) { console.error('No Data available!') return; } - let stations = data.stations; - stations.sort(sortStations) - const date = new Date(data.lastUpdate); - document.querySelector('#loadElevators').innerHTML = 'Daten aktualisieren'; - const listContainer = document.querySelector('#stationList'); const dateContainer = document.querySelector('#lastUpdated'); + dateContainer.innerHTML = dateTimeStyle.format(new Date(internalData.lastUpdate)); - dateContainer.innerHTML = dateTimeStyle.format(date); - - let stationIndex = 0; - + const listContainer = document.querySelector('#stationList'); //clear list before update listContainer.innerHTML = ''; - for (const station of stations) { - const stationName = station.mainSubStation.stationName; - const lines = new Set(); - const elevators = []; - for (const elevatorKey of Object.keys(station.elevators)) { - const elevatorApi = station.elevators[elevatorKey]; - const elevatorLines = []; - for (let line of elevatorApi.lines) { - line = line.replace(/[\(\)]/g, ""); - lines.add(line); - elevatorLines.push({ - line: line, - type: getType(line), - }); - } - // try to detect levels from description - let levels = []; - if (elevatorApi.description.search('<->') >= 0) { - levels = elevatorApi.description.split('<->').map(level => level.trim()); - } else if (elevatorApi.description.search('<>') >= 0) { - levels = elevatorApi.description.split('<>').map(level => level.trim()); - } else if (elevatorApi.description.search('/ ') >= 0) { - levels = elevatorApi.description.split('/ ').map(level => level.trim()); - } + const stations = internalData['stations']; - const elevator = { - working: elevatorApi['state'] === 1, - stateUnavailable: elevatorApi['state'] === -1, - dimensions: { - width: elevatorApi['cabinWidth'], - length: elevatorApi['cabinLength'], - door: elevatorApi['doorWidth'], - }, - description: elevatorApi['description'], - label: elevatorApi['label'], - type: elevatorApi['type'].replace('_', ' ').capitalize(), - braille: elevatorApi['tasterType'] === 'UNBEKANNT' ? -1 : elevatorApi['tasterType'] === 'KOMBI' || elevatorApi['tasterType'] === 'BRAILLE', - speaker: elevatorApi['tasterType'] === 'UNBEKANNT' ? -1 : elevatorApi['tasterType'] === 'KOMBI', - lines: elevatorLines, - levels: levels, - instCause: elevatorApi['instCause'], - osmNodeId: elevatorApi['osmId'], - } - - elevators.push(elevator); - } - - const stationTypes = getTypes(Array.from(lines)); + for (const stationIndex in stations) { + const station = stations[stationIndex]; let elevatorsTemplate = ''; let previewTemplate = ''; - let stationState = { - unavailable: 0, - working: 0, - outOfOrder: 0, - } - for (const elevator of elevators) { + + for (const elevator of station.elevators) { let linesTemplate = '
Linien: '; for (const line of elevator.lines) { linesTemplate += `${line.line}`; @@ -262,16 +257,45 @@ function renderData() { } levelsTemplate += ''; + let osmTemplate = ''; + if (osmData) { + const nodes = osmData.elements.filter(node => node.id === elevator.osmNodeId) + if (nodes.length) { + const nodeInfo = nodes[0]; + if (nodeInfo.hasOwnProperty('tags')) { + const tags = nodeInfo['tags']; + if (tags['highway'] === 'elevator') { + osmTemplate = '
'; + osmTemplate += `
Link zur Karte
+Auf Karte anzeigen +
`; + if (tags.hasOwnProperty('description')) { + osmTemplate += `
Beschreibung
${tags['description']}
`; + } + if (tags.hasOwnProperty('level')) { + osmTemplate += `
Ebenen
${tags['level'].split(';').sort().join(', ')}
`; + } + if (tags.hasOwnProperty('wheelchair')) { + osmTemplate += `
Rollstühle
${tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}
`; + } + if (tags.hasOwnProperty('bicycle')) { + osmTemplate += `
Fahrräder
${tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}
`; + } + + osmTemplate += '
'; + } + } else { + osmTemplate = 'keine Daten'; + } + } else { + osmTemplate = 'keine Daten'; + } + } + + previewTemplate += `` - if (elevator.stateUnavailable) { - stationState.unavailable++; - } else if (elevator.working) { - stationState.working++; - } else { - stationState.outOfOrder++; - } elevatorsTemplate += `

  • Daten von OpenStreetMap

    + ${osmTemplate}
    • `; @@ -319,14 +344,14 @@ function renderData() { const template = `
  • - ${Array.from(stationTypes).sort().map(t => `${t}`).join('')} + ${station.types.sort().map(t => `${t}`).join('')}
    -

    ${stationName}

    +

    ${station.name}

    @@ -349,38 +374,39 @@ ${stationState.unavailable ? `Bei ${stationState.unavailable} ${stationState.una // .addEventListener('click', () => toggleElevatorList(stationId)) // }()); - - internalData[stationIndex++] = { - name: stationName, - state: stationState, - elevators: elevators, - } } } document.querySelector('#loadElevators') .addEventListener('click', (e) => { - loadElevators().then(() => renderData()); + loadElevators().then(() => { + renderData(); + filterData(); + }); }) document.querySelector('#loadOSM') .addEventListener('click', (e) => { - loadOsmData(); + loadOsmData().then(() => { + renderData(); + }); }) renderData(); -function filterData(searchString) { - for (const stationIndex in internalData) { - const matches = internalData[stationIndex].name.toLowerCase().search(searchString.toLowerCase()) >= 0; - document.querySelector(`#station_${stationIndex}`).classList.toggle('hidden', !matches); - +function filterData() { + const searchString = document.querySelector('#searchStation').value; + if (internalData) { + for (const stationIndex in internalData.stations) { + const matches = internalData.stations[stationIndex].name.toLowerCase().search(searchString.toLowerCase()) >= 0; + document.querySelector(`#station_${stationIndex}`).classList.toggle('hidden', !matches); + } } } document.querySelector('#searchStation').addEventListener('input', (e) => { - filterData(e.target.value); + filterData(); }) -filterData(document.querySelector('#searchStation').value) \ No newline at end of file +filterData() \ No newline at end of file From 470b3e233620bcf63185410dbc883600732f63c4 Mon Sep 17 00:00:00 2001 From: kritzl Date: Tue, 4 Jun 2024 21:23:27 +0200 Subject: [PATCH 02/18] minor layout improvements --- elevators.js | 16 +++++++++++----- style.css | 23 ++++++++++++++++++++--- style.css.map | 2 +- style.scss | 27 ++++++++++++++++++++++++--- 4 files changed, 56 insertions(+), 12 deletions(-) diff --git a/elevators.js b/elevators.js index 912f1ea..20b4da6 100644 --- a/elevators.js +++ b/elevators.js @@ -93,6 +93,7 @@ async function loadElevators() { internalData.stations[stationIndex++] = { name: stationName, + comment: station['comment'], state: stationState, lines: stationLines, types: stationTypes, @@ -283,13 +284,17 @@ Auf Karte anzeigen } osmTemplate += '
    '; + } else { + console.warn(`OSM Node is not an elevator. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`); } } else { - osmTemplate = 'keine Daten'; + console.warn(`OSM Node has no Tags. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`); } } 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'}">
    + ${elevator.lines.length ? `${linesTemplate}` : ''} ${elevator.instCause !== '' ? `
    ${elevator.instCause}
    ` : ''} ${elevator.levels.length ? levelsTemplate : elevator.description}
    @@ -332,11 +338,11 @@ Auf Karte anzeigen
    ${elevator.speaker === -1 ? 'unbekannt' : elevator.speaker ? `verfügbar` : 'nicht verfügbar'}
    - ${elevator.lines.length ? `${linesTemplate}` : ''} -
    + + ${osmTemplate ? `

    Daten von OpenStreetMap

    ${osmTemplate} -
    +
    ` : ''}
    • `; } diff --git a/style.css b/style.css index 25e49c9..b042f7e 100644 --- a/style.css +++ b/style.css @@ -34,6 +34,7 @@ --space-m: 0.5rem; --space-l: 1rem; --space-xl: 2rem; + --space-2xl: 3rem; } @media (prefers-color-scheme: dark) { :root { @@ -258,10 +259,11 @@ ul#stationList > li.station > details > ul > li.elevator { gap: var(--space-m); position: relative; margin: 0 1rem 1rem; + padding-right: var(--space-2xl); } @media screen and (min-width: 576px) { 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 { @@ -298,10 +300,24 @@ ul#stationList > li.station > details > ul > li.elevator > div.elevatorData .lin 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 { + 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 { grid-column: 1/-1; 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 { 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 { - flex-shrink: 0; - margin-left: 3rem; + width: 0; + flex-grow: 1; + margin-left: var(--space-2xl); } @media screen and (min-width: 576px) { ul#stationList > li.station > details > ul > li.elevator > div.elevatorData dl div dd { diff --git a/style.css.map b/style.css.map index 108bf0f..04a470b 100644 --- a/style.css.map +++ b/style.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/style.scss b/style.scss index a731775..fbf5c6b 100644 --- a/style.scss +++ b/style.scss @@ -57,6 +57,7 @@ $mediumBreakpoint: 800px; --space-m: 0.5rem; --space-l: 1rem; --space-xl: 2rem; + --space-2xl: 3rem; } .hidden { @@ -289,9 +290,11 @@ ul#stationList { margin: 0 1rem 1rem; @media screen and (min-width: $mobileBreakpoint) { - margin: 0 3rem 1rem; + margin: 0 var(--space-2xl) 1rem; } + padding-right: var(--space-2xl); + // elevator icon > span { flex-shrink: 0; @@ -330,11 +333,27 @@ ul#stationList { gap: var(--space-m); align-items: center; 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 { grid-column: 1 / -1; color: var(--text-secondary); + border: dashed 2px var(--station-border); + border-radius: var(--item-radius); + padding: var(--space-l); + + h4 { + margin-top: 0; + } dl { div { @@ -418,8 +437,10 @@ ul#stationList { } dd { - flex-shrink: 0; - margin-left: 3rem; + width: 0; + flex-grow: 1; + + margin-left: var(--space-2xl); @media screen and (min-width: $mobileBreakpoint) { margin-left: 1rem; From 0639aeae6f80f2fe40f4ff6dc6ab103a3029e599 Mon Sep 17 00:00:00 2001 From: kritzl Date: Wed, 5 Jun 2024 11:08:32 +0200 Subject: [PATCH 03/18] reposition some buttons --- elevators.js | 57 ++++++++++++++++++++++++++++++++++++++--------- index.html | 15 +++++++++---- md_icons/load.svg | 1 + style.css | 33 ++++++++++++++++++++++++--- style.css.map | 2 +- style.scss | 33 +++++++++++++++++++++++++-- 6 files changed, 120 insertions(+), 21 deletions(-) create mode 100644 md_icons/load.svg diff --git a/elevators.js b/elevators.js index 20b4da6..7a86eae 100644 --- a/elevators.js +++ b/elevators.js @@ -4,6 +4,7 @@ const internalData = { }; let geolocationPermission = false; let geolocation = [null, null]; +const openStations = new Set(); Object.defineProperty(String.prototype, 'capitalize', { @@ -229,7 +230,10 @@ function renderData() { return; } - document.querySelector('#loadElevators').innerHTML = 'Daten aktualisieren'; + document.querySelector('#updateInfo').classList.remove('hidden'); + document.querySelector('#loadElevators').classList.remove('hidden'); + document.querySelector('#filters').classList.remove('hidden'); + document.querySelector('#initialLoad').classList.add('hidden'); const dateContainer = document.querySelector('#lastUpdated'); dateContainer.innerHTML = dateTimeStyle.format(new Date(internalData.lastUpdate)); @@ -245,6 +249,8 @@ function renderData() { let elevatorsTemplate = ''; let previewTemplate = ''; + let templateHasOsmButton = false; + for (const elevator of station.elevators) { let linesTemplate = '
    Linien: '; for (const line of elevator.lines) { @@ -342,9 +348,14 @@ Auf Karte anzeigen ${osmTemplate ? `

    Daten von OpenStreetMap

    ${osmTemplate} -
    ` : ''} +
    ` : ``} `; + + templateHasOsmButton = templateHasOsmButton || !osmTemplate; } const template = `
  • @@ -362,7 +373,7 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state. -
    +
    Aufzüge anzeigen @@ -373,28 +384,52 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
    • `; listContainer.insertAdjacentHTML('beforeend', template); - // immediate invocation - // (function () { - // const stationId = stationIndex; - // listContainer.querySelector(`#station_${stationIndex}`) - // .addEventListener('click', () => toggleElevatorList(stationId)) - // }()); + 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(); + }); + }) + }) + }()); + } } + + listContainer.querySelectorAll(`details`).forEach(e => { + e.addEventListener("toggle", (event) => { + const stationId = event.target.dataset['stationid']; + if (event.target.open) { + openStations.add(stationId); + } else { + openStations.delete(stationId); + } + }); + }) } document.querySelector('#loadElevators') .addEventListener('click', (e) => { + e.target.querySelector('.spinner').classList.remove('hidden'); loadElevators().then(() => { + e.target.querySelector('.spinner').classList.add('hidden'); renderData(); filterData(); }); }) -document.querySelector('#loadOSM') +document.querySelector('#initialLoad') .addEventListener('click', (e) => { - loadOsmData().then(() => { + e.target.querySelector('.spinner').classList.remove('hidden'); + loadElevators().then(() => { + e.target.classList.add('hidden'); renderData(); + filterData(); }); }) diff --git a/index.html b/index.html index 183742c..7a10c71 100644 --- a/index.html +++ b/index.html @@ -26,14 +26,16 @@

    Station List

    -
    +
    -
    + + +
    diff --git a/md_icons/load.svg b/md_icons/load.svg new file mode 100644 index 0000000..3a1bc93 --- /dev/null +++ b/md_icons/load.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/style.css b/style.css index b042f7e..9422e9c 100644 --- a/style.css +++ b/style.css @@ -56,7 +56,7 @@ } .hidden { - display: none; + display: none !important; } .text-red { @@ -143,15 +143,23 @@ button:hover { border-color: var(--station-border-hover); } -div.filters { +div#filters { display: flex; gap: var(--space-m); justify-items: stretch; } -div.filters button, div.filters input { +div#filters button, div#filters input { font-size: 1.5rem; } +button#initialLoad { + font-size: 1.5rem; +} + +button.loadOSM { + width: fit-content; +} + ul#stationList { padding: 0; list-style: none; @@ -559,5 +567,24 @@ span[data-icon][data-icon=up-down] { span[data-icon][data-icon=location-searching] { mask-image: url(/md_icons/location-searching.svg); } +span[data-icon][data-icon=load] { + mask-image: url(/md_icons/load.svg); +} +span[data-icon].spinner { + animation-delay: 0s; + animation-direction: normal; + animation-duration: 1s; + animation-fill-mode: none; + animation-iteration-count: infinite; + animation-name: spinner; + animation-play-state: running; + animation-timing-function: linear; +} + +@keyframes spinner { + to { + transform: rotate(360deg); + } +} /*# sourceMappingURL=style.css.map */ diff --git a/style.css.map b/style.css.map index 04a470b..caee605 100644 --- a/style.css.map +++ b/style.css.map @@ -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;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"} \ No newline at end of file +{"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;;;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"} \ No newline at end of file diff --git a/style.scss b/style.scss index fbf5c6b..3bc6d34 100644 --- a/style.scss +++ b/style.scss @@ -61,7 +61,7 @@ $mediumBreakpoint: 800px; } .hidden { - display: none; + display: none !important; } .text-red { @@ -161,7 +161,7 @@ button { } } -div.filters { +div#filters { display: flex; gap: var(--space-m); justify-items: stretch; @@ -171,6 +171,14 @@ div.filters { } } +button#initialLoad { + font-size: 1.5rem; +} + +button.loadOSM { + width: fit-content; +} + ul#stationList { padding: 0; list-style: none; @@ -662,4 +670,25 @@ span[data-icon] { &[data-icon="location-searching"] { mask-image: url(/md_icons/location-searching.svg); } + + &[data-icon="load"] { + mask-image: url(/md_icons/load.svg); + } + + &.spinner { + animation-delay: 0s; + animation-direction: normal; + animation-duration: 1s; + animation-fill-mode: none; + animation-iteration-count: infinite; + animation-name: spinner; + animation-play-state: running; + animation-timing-function: linear + } +} + +@keyframes spinner { + to { + transform: rotate(360deg); + } } From d9a21b53be3b2f0de74350c963e69e2a585391f8 Mon Sep 17 00:00:00 2001 From: kritzl Date: Wed, 5 Jun 2024 11:20:59 +0200 Subject: [PATCH 04/18] only german for now. add footer. reposition last updated info. --- about.html | 18 ++++++++++-------- index.html | 17 ++++++++++------- style.css | 12 ++++++++++++ style.css.map | 2 +- style.scss | 12 ++++++++++++ 5 files changed, 45 insertions(+), 16 deletions(-) diff --git a/about.html b/about.html index 91b1f6c..15f69e2 100644 --- a/about.html +++ b/about.html @@ -6,33 +6,35 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> - A11y Elevator List + Barrierefreie Aufzugs-Liste | Was ist das? -

    A11y Elevator List

    +

    Barrierefreie Aufzugs-Liste

    -

    What is this site?

    +

    Worum geht's hier?

    - This site provides an (at least more) accessible version of the HVV Website for (not) working elevators:
    - HVV Website + Diese Seite ermöglicht einen barrierefreien Zugang zu den Aufzugs informationen im HVV. + Der HVV selbst zeigt diese Informationen nur auf einer (vor allem ohne Ortskenntnis) schwer zu navigierenden Karte an: + HVV Webseite zu Aufzügen

    - The Source code of this page is available under: git.kritzl.dev + Dieses Projekt wurde unter AGPL-3 entwickelt und ist hier zu finden: + git.kritzl.dev

    diff --git a/index.html b/index.html index 7a10c71..56a2226 100644 --- a/index.html +++ b/index.html @@ -6,30 +6,30 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> - A11y Elevator List + Barrierefreie Aufzugs-Liste -

    A11y Elevator List

    +

    Barrierefreie Aufzugs-Liste

    -

    Station List

    +

    Liste aller Stationen mit Aufzug im HVV

    @@ -51,6 +51,9 @@
    + \ No newline at end of file diff --git a/style.css b/style.css index 9422e9c..3d8da66 100644 --- a/style.css +++ b/style.css @@ -124,6 +124,11 @@ main { max-width: 960px; } +footer { + margin: 1em auto; + max-width: 960px; +} + button, input { background-color: var(--station-bg); color: var(--text); @@ -143,6 +148,13 @@ button:hover { border-color: var(--station-border-hover); } +div#updateInfo { + display: flex; + align-items: center; + gap: var(--space-m); + justify-content: end; +} + div#filters { display: flex; gap: var(--space-m); diff --git a/style.css.map b/style.css.map index caee605..13e0328 100644 --- a/style.css.map +++ b/style.css.map @@ -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;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/style.scss b/style.scss index 3bc6d34..b8dda69 100644 --- a/style.scss +++ b/style.scss @@ -141,6 +141,11 @@ main { max-width: 960px; } +footer { + margin: 1em auto; + max-width: 960px; +} + button, input { background-color: var(--station-bg); color: var(--text); @@ -161,6 +166,13 @@ button { } } +div#updateInfo { + display: flex; + align-items: center; + gap: var(--space-m); + justify-content: end; +} + div#filters { display: flex; gap: var(--space-m); From af50e0f04da1ffce78fc587d42b937438daa81a8 Mon Sep 17 00:00:00 2001 From: kritzl Date: Wed, 5 Jun 2024 11:49:38 +0200 Subject: [PATCH 05/18] minor template and layout fixes --- elevators.js | 49 +++++++++++++++++++++++++++---------------------- index.html | 2 +- style.css | 23 ++++++++++++++++++++--- style.css.map | 2 +- style.scss | 29 ++++++++++++++++++++++++++--- 5 files changed, 75 insertions(+), 30 deletions(-) diff --git a/elevators.js b/elevators.js index 7a86eae..f302008 100644 --- a/elevators.js +++ b/elevators.js @@ -249,8 +249,6 @@ function renderData() { let elevatorsTemplate = ''; let previewTemplate = ''; - let templateHasOsmButton = false; - for (const elevator of station.elevators) { let linesTemplate = '
    Linien: '; for (const line of elevator.lines) { @@ -273,9 +271,14 @@ function renderData() { const tags = nodeInfo['tags']; if (tags['highway'] === 'elevator') { osmTemplate = '
    '; - osmTemplate += ``; + osmTemplate += `
    +
    Link zur Karte
    +
    + + Auf Karte anzeigen + +
    +
    `; if (tags.hasOwnProperty('description')) { osmTemplate += `
    Beschreibung
    ${tags['description']}
    `; } @@ -289,7 +292,7 @@ Auf Karte anzeigen osmTemplate += `
    Fahrräder
    ${tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}
    `; } - osmTemplate += '
    '; + osmTemplate += '
    '; } 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
    ${osmTemplate ? `
    -

    Daten von OpenStreetMap

    +
    +

    Daten von OpenStreetMap

    + +
    ${osmTemplate}
    ` : ``}
    `; - - templateHasOsmButton = templateHasOsmButton || !osmTemplate; } const template = `
  • @@ -384,20 +391,18 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
    • `; 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(); + }); }) - }()); - } + }) + }()); } diff --git a/index.html b/index.html index 56a2226..9770960 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@ diff --git a/style.css b/style.css index 3d8da66..35e2dc8 100644 --- a/style.css +++ b/style.css @@ -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; diff --git a/style.css.map b/style.css.map index 13e0328..cd7fca4 100644 --- a/style.css.map +++ b/style.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/style.scss b/style.scss index b8dda69..a57dd41 100644 --- a/style.scss +++ b/style.scss @@ -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 { From 14a514e3e4dea12821b0334c0a4ada22dea9fc87 Mon Sep 17 00:00:00 2001 From: kritzl Date: Thu, 6 Jun 2024 11:27:16 +0200 Subject: [PATCH 06/18] 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 --- elevators.js | 377 ++++++++++++++++++++++++++++++++++++++++---------- index.html | 37 ++++- style.css | 209 +++++++++++++++++++++++----- style.css.map | 2 +- style.scss | 229 +++++++++++++++++++++++++++--- 5 files changed, 726 insertions(+), 128 deletions(-) diff --git a/elevators.js b/elevators.js index f302008..5f4fc3b 100644 --- a/elevators.js +++ b/elevators.js @@ -3,8 +3,64 @@ const internalData = { stations: [], }; let geolocationPermission = false; -let geolocation = [null, null]; +let geolocation = null; const openStations = new Set(); +let sortByDistance = false; + +const substituteCoordinates = [ + { + name: 'Borgweg (Stadtpark)', + coordinates: [53.5907696, 10.0147719], + }, + { + name: 'Emilienstraße', + coordinates: [53.5716862, 9.9525424], + }, + { + name: 'Garstedt', + coordinates: [53.6844739, 9.9860415], + }, + { + name: 'Hagenbecks Tierpark', + coordinates: [53.5925874, 9.9440359], + }, + { + name: 'Hauptbahnhof Nord', + coordinates: [53.5541197, 10.0061270], + }, + { + name: 'Hoheneichen', + coordinates: [53.6355141, 10.0677176], + }, + { + name: 'Kornweg (Klein Borstel)', + coordinates: [53.6324430, 10.0541722], + }, + { + name: 'Lauenbrück', + coordinates: [53.1971209, 9.5640765], + }, + { + name: 'Lutterothstraße', + coordinates: [53.5819938, 9.9476215], + }, + { + name: 'Meckelfeld', + coordinates: [53.4248897, 10.0291223], + }, + { + name: 'Sengelmannstraße (City Nord)', + coordinates: [53.6093953, 10.0220004], + }, + { + name: 'St.Pauli', + coordinates: [53.5507957, 9.9700752], + }, + { + name: 'Winsen(Luhe)', + coordinates: [53.3534304, 10.2086841], + }, +] Object.defineProperty(String.prototype, 'capitalize', { @@ -15,12 +71,17 @@ Object.defineProperty(String.prototype, 'capitalize', { }); async function loadElevators() { - const res = await fetch('https://www.hvv.de/elevators', {referrer: ""}); + document.querySelector('#errorMessage').classList.add('hidden'); + const res = await fetch('https://www.hvv.de/elevators', { + referrer: "", + }).catch(e => { + document.querySelector('#errorMessage').classList.remove('hidden'); + }); const data = await res.json(); const stations = data['stations']; - stations.sort(sortStations) + stations.sort(sortStations); internalData.lastUpdate = new Date(data['lastUpdate']); let stationIndex = 0; @@ -102,7 +163,10 @@ async function loadElevators() { } } - localStorage.setItem("internal_data", JSON.stringify(internalData)); + localStorage.setItem("internal_data", JSON.stringify({ + api: 'v1', + ...internalData + })); } const dateTimeStyle = new Intl.DateTimeFormat('de-DE', { @@ -119,12 +183,55 @@ async function loadOsmData() { } } - const osmData = await fetch(`https://overpass-api.de/api/interpreter?data=[out:json];node(id:${nodeIdList.join(',')});out%20body;`, {}); - const osmJson = await osmData.json(); + const osmResponse = await fetch(`https://overpass-api.de/api/interpreter?data=[out:json];node(id:${nodeIdList.join(',')});out%20body;`, {}); + const osmJson = await osmResponse.json(); if (!osmJson.hasOwnProperty('elements')) return; - localStorage.setItem("osm_data", JSON.stringify(osmJson)); + const osmNodes = {}; + for await (const node of osmJson.elements) { + if (node.hasOwnProperty('tags')) { + const tags = node['tags']; + if (tags['highway'] === 'elevator') { + osmNodes[node['id']] = node; + } else { + console.warn(`OSM Node is not an elevator. (NodeID: ${node['id']})`); + } + } else { + console.warn(`OSM Node has no Tags. (NodeID: ${node['id']})`); + } + } + + //update coordinates in stations + for (const stationIndex in internalData.stations) { + const station = internalData.stations[stationIndex]; + for (const elevator of station.elevators) { + const node = osmNodes[elevator.osmNodeId] + if (node) { + internalData.stations[stationIndex]['coordinates'] = [ + node['lat'], + node['lon'], + ] + } + } + + if (!internalData.stations[stationIndex].hasOwnProperty('coordinates')) { + const substitute = substituteCoordinates.filter(subs => subs.name === internalData.stations[stationIndex].name) + if (substitute.length) { + internalData.stations[stationIndex]['coordinates'] = substitute[0].coordinates; + } + } + } + + localStorage.setItem("osm_data", JSON.stringify({ + api: 'v1', + lastUpdate: new Date(), + nodes: osmNodes + })); + localStorage.setItem("internal_data", JSON.stringify({ + api: 'v1', + ...internalData + })); } function distance([lat1, lon1], [lat2, lon2]) { @@ -145,9 +252,12 @@ function distance([lat1, lon1], [lat2, lon2]) { function registerGeolocationWatcher() { navigator.geolocation.watchPosition((pos) => { - geolocation = [pos.coords.latitude, pos.coords.longitude] + if (geolocation === null) { + geolocation = [pos.coords.latitude, pos.coords.longitude]; + renderData(geolocation); + } }, (e) => { - console.log(e) + console.warn(e) }, { enableHighAccuracy: true, timeout: 5000, @@ -177,8 +287,6 @@ function allowGeolocation() { checkGeolocationPermission() -document.querySelector('#stationsNearMe').addEventListener('click', allowGeolocation) - function sortStations(stationA, stationB) { const nameA = stationA.mainSubStation.stationName.toUpperCase(); // ignore upper and lowercase const nameB = stationB.mainSubStation.stationName.toUpperCase(); // ignore upper and lowercase @@ -193,6 +301,20 @@ function sortStations(stationA, stationB) { return 0; } +function sortStationsByDistance(stationA, stationB) { + const distanceA = stationA.distance; // ignore upper and lowercase + const distanceB = stationB.distance; // ignore upper and lowercase + if (distanceA < distanceB) { + return -1; + } + if (distanceA > distanceB) { + return 1; + } + + // names must be equal + return 0; +} + function getType(line) { const type = line.replace(/[^A-z]/g, ""); switch (type) { @@ -218,7 +340,7 @@ function getTypes(lines) { return types; } -function renderData() { +function renderData(location = null) { const ls = JSON.parse(localStorage.getItem("internal_data")); if (!ls) return; internalData.lastUpdate = ls['lastUpdate']; @@ -230,6 +352,18 @@ function renderData() { return; } + if ( + location !== null + && ( + location.length !== 2 + || typeof location[0] !== 'number' + || typeof location[1] !== 'number' + ) + ) { + console.error('No valid location provided') + return; + } + document.querySelector('#updateInfo').classList.remove('hidden'); document.querySelector('#loadElevators').classList.remove('hidden'); document.querySelector('#filters').classList.remove('hidden'); @@ -241,18 +375,57 @@ function renderData() { //clear list before update listContainer.innerHTML = ''; - const stations = internalData['stations']; + let stations = [...internalData['stations']]; for (const stationIndex in stations) { const station = stations[stationIndex]; + station.id = stationIndex; + + if (location !== null) { + if (station.hasOwnProperty('coordinates')) { + station.distance = distance(location, station.coordinates); + } else { + console.log('station has no position:', station.name); + } + } + } + + stations = stations.sort(sortStationsByDistance); + + for (const stationIndex in stations) { + const station = stations[stationIndex]; + + if (location !== null) { + if (station.hasOwnProperty('coordinates')) { + station.distance = distance(location, station.coordinates); + } else { + console.log('station has no position:', station.name); + } + } let elevatorsTemplate = ''; let previewTemplate = ''; for (const elevator of station.elevators) { - let linesTemplate = '
    Linien: '; - for (const line of elevator.lines) { - linesTemplate += `${line.line}`; + const stateTemplate = ` + `; + + let linesTemplate = ''; + linesTemplate = `
    ${stateTemplate}`; + if (elevator.lines.length) { + linesTemplate = `
    ${stateTemplate}`; + linesTemplate += `
    Linien: `; + for (const line of elevator.lines) { + linesTemplate += `${line.line}`; + } + linesTemplate += '
    '; } linesTemplate += '
    '; @@ -264,41 +437,32 @@ function renderData() { let osmTemplate = ''; if (osmData) { - const nodes = osmData.elements.filter(node => node.id === elevator.osmNodeId) - if (nodes.length) { - const nodeInfo = nodes[0]; - if (nodeInfo.hasOwnProperty('tags')) { - const tags = nodeInfo['tags']; - if (tags['highway'] === 'elevator') { - osmTemplate = '
    '; - osmTemplate += `
    -
    Link zur Karte
    -
    - - Auf Karte anzeigen - -
    -
    `; - if (tags.hasOwnProperty('description')) { - osmTemplate += `
    Beschreibung
    ${tags['description']}
    `; - } - if (tags.hasOwnProperty('level')) { - osmTemplate += `
    Ebenen
    ${tags['level'].split(';').sort().join(', ')}
    `; - } - if (tags.hasOwnProperty('wheelchair')) { - osmTemplate += `
    Rollstühle
    ${tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}
    `; - } - if (tags.hasOwnProperty('bicycle')) { - osmTemplate += `
    Fahrräder
    ${tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}
    `; - } + const node = osmData.nodes[elevator.osmNodeId] + if (node) { - osmTemplate += '
    '; - } else { - console.warn(`OSM Node is not an elevator. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`); - } - } else { - console.warn(`OSM Node has no Tags. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`); + osmTemplate = '
    '; + osmTemplate += `
    +
    Link zur Karte
    +
    + + Auf Karte anzeigen + +
    +
    `; + if (node.tags.hasOwnProperty('description')) { + osmTemplate += `
    Beschreibung
    ${node.tags['description']}
    `; } + if (node.tags.hasOwnProperty('level')) { + osmTemplate += `
    Ebenen
    ${node.tags['level'].split(';').sort().join(', ')}
    `; + } + if (node.tags.hasOwnProperty('wheelchair')) { + osmTemplate += `
    Rollstühle
    ${node.tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}
    `; + } + if (node.tags.hasOwnProperty('bicycle')) { + osmTemplate += `
    Fahrräder
    ${node.tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}
    `; + } + + osmTemplate += '
    '; } else { console.warn(`OSM Node not found (deleted). At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`); } @@ -310,19 +474,10 @@ function renderData() { previewTemplate += `` - elevatorsTemplate += `
  • - - + ${stateTemplate}
    - ${elevator.lines.length ? `${linesTemplate}` : ''} + ${linesTemplate} ${elevator.instCause !== '' ? `
    ${elevator.instCause}
    ` : ''} ${elevator.levels.length ? levelsTemplate : elevator.description}
    @@ -365,11 +520,14 @@ function renderData() {
    • `; } - const template = `
  • + const template = `
  • +
    ${station.types.sort().map(t => `${t}`).join('')}
    + ${typeof station.distance !== 'undefined' ? `
    ${Math.round(station.distance / 100) / 10}
    km
    ` : ''} +

    ${station.name}

    -
    +
    Aufzüge anzeigen -
    @@ -393,7 +551,7 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state. //immediate invocation (function () { - listContainer.querySelectorAll(`#station_${stationIndex} .loadOSM`).forEach(e => { + listContainer.querySelectorAll(`#station_${station.id} .loadOSM`).forEach(e => { e.addEventListener('click', (ev) => { ev.target.querySelector('.spinner').classList.remove('hidden'); loadOsmData().then(() => { @@ -416,6 +574,8 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state. } }); }) + + filterData(); } document.querySelector('#loadElevators') @@ -424,7 +584,6 @@ document.querySelector('#loadElevators') loadElevators().then(() => { e.target.querySelector('.spinner').classList.add('hidden'); renderData(); - filterData(); }); }) @@ -434,19 +593,65 @@ document.querySelector('#initialLoad') loadElevators().then(() => { e.target.classList.add('hidden'); renderData(); - filterData(); }); }) -renderData(); +document.querySelector('#loadOsm') + .addEventListener('click', (e) => { + e.target.querySelector('.spinner').classList.remove('hidden'); + loadOsmData().then(() => { + e.target.querySelector('.spinner').classList.add('hidden'); + renderData(); + closeDialog('#dialog_osm'); + }); + }) + +document.querySelector('#stationsNearMe') + .addEventListener('click', async (e) => { + e.target.querySelector('.spinner').classList.remove('hidden'); + if (!sortByDistance) { + if (JSON.parse(localStorage.getItem("osm_data")) === null) { + openDialog('#dialog_osm'); + } else { + if (geolocationPermission !== 'granted') { + allowGeolocation(); + } else { + // If geolocation is already set. + // If not the location watcher will re-render our data. + if (geolocation !== null) { + renderData(geolocation) + } + sortByDistance = e.target.ariaPressed = true; + } + } + } else { + sortByDistance = e.target.ariaPressed = false; + + renderData(); + } + e.target.querySelector('.spinner').classList.add('hidden'); + }) function filterData() { const searchString = document.querySelector('#searchStation').value; + const typeU = document.querySelector('button.typeChip[data-type="U"]'); + const typeS = document.querySelector('button.typeChip[data-type="S"]'); + const typeA = document.querySelector('button.typeChip[data-type="A"]'); + const typeR = document.querySelector('button.typeChip[data-type="R"]'); + const activeTypes = []; + if(typeU.ariaPressed === 'true') activeTypes.push('U'); + if(typeS.ariaPressed === 'true') activeTypes.push('S'); + if(typeA.ariaPressed === 'true') activeTypes.push('A'); + if(typeR.ariaPressed === 'true') activeTypes.push('R'); if (internalData) { for (const stationIndex in internalData.stations) { - const matches = internalData.stations[stationIndex].name.toLowerCase().search(searchString.toLowerCase()) >= 0; - document.querySelector(`#station_${stationIndex}`).classList.toggle('hidden', !matches); + const matchesSearch = internalData.stations[stationIndex].name.toLowerCase().search(searchString.toLowerCase()) >= 0; + let matchesType = false; + internalData.stations[stationIndex].types.forEach(type => { + if(activeTypes.includes(type)) matchesType = true; + }) + document.querySelector(`#station_${stationIndex}`).classList.toggle('hidden', !(matchesSearch && matchesType)); } } } @@ -455,4 +660,36 @@ document.querySelector('#searchStation').addEventListener('input', (e) => { filterData(); }) -filterData() \ No newline at end of file +document.querySelectorAll('button.typeChip').forEach(e => { + e.addEventListener('click', (event) => { + e.ariaPressed = e.ariaPressed === 'true' ? 'false' : 'true'; + filterData(); + }) +}) + +function openDialog(selector) { + document.querySelector('body').classList.add('has-dialog') + document.querySelector('#dialog_layer').classList.add('active') + document.querySelector(selector).classList.remove('hidden') +} + +function closeDialog(selector) { + document.querySelector('body').classList.remove('has-dialog') + document.querySelector('#dialog_layer').classList.remove('active') + document.querySelector(selector).classList.add('hidden') +} + +// data api version check +const check_internal = JSON.parse(localStorage.getItem("internal_data")); +const check_osm = JSON.parse(localStorage.getItem("osm_data")); +if (check_internal === null || check_internal.hasOwnProperty('api') && check_internal.api === 'v1') { + if (check_osm === null || check_osm.hasOwnProperty('api') && check_osm.api === 'v1') { + renderData(); + } else { + console.log('osm_data: version mismatch') + localStorage.removeItem('osm_data'); + } +} else { + console.log('internal_data: version mismatch') + localStorage.removeItem('internal_data'); +} diff --git a/index.html b/index.html index 9770960..58e4796 100644 --- a/index.html +++ b/index.html @@ -37,10 +37,17 @@ + +
    + + +
    + +
    \ No newline at end of file diff --git a/style.css b/style.css index 35e2dc8..94a7483 100644 --- a/style.css +++ b/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; diff --git a/style.css.map b/style.css.map index cd7fca4..0ae8de6 100644 --- a/style.css.map +++ b/style.css.map @@ -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;;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"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhCA;EAjDF;IAkDI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAgBF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAWA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;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;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;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;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAQV;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"} \ No newline at end of file diff --git a/style.scss b/style.scss index a57dd41..52ae926 100644 --- a/style.scss +++ b/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; From caa96f565fa8212a88af86ebcf6f0832cab411a7 Mon Sep 17 00:00:00 2001 From: kritzl Date: Thu, 6 Jun 2024 14:38:23 +0200 Subject: [PATCH 07/18] improve browser compatability in some browsers ariaPressed is only supported since 2023. We use a data attribute as a fallback --- elevators.js | 10 +++++----- index.html | 8 ++++---- style.css | 21 ++++++++++++++++----- style.css.map | 2 +- style.scss | 18 ++++++++++++++++-- 5 files changed, 42 insertions(+), 17 deletions(-) diff --git a/elevators.js b/elevators.js index 5f4fc3b..eb46701 100644 --- a/elevators.js +++ b/elevators.js @@ -640,10 +640,10 @@ function filterData() { const typeA = document.querySelector('button.typeChip[data-type="A"]'); const typeR = document.querySelector('button.typeChip[data-type="R"]'); const activeTypes = []; - if(typeU.ariaPressed === 'true') activeTypes.push('U'); - if(typeS.ariaPressed === 'true') activeTypes.push('S'); - if(typeA.ariaPressed === 'true') activeTypes.push('A'); - if(typeR.ariaPressed === 'true') activeTypes.push('R'); + if(typeU.dataset.pressed === 'true') activeTypes.push('U'); + if(typeS.dataset.pressed === 'true') activeTypes.push('S'); + if(typeA.dataset.pressed === 'true') activeTypes.push('A'); + if(typeR.dataset.pressed === 'true') activeTypes.push('R'); if (internalData) { for (const stationIndex in internalData.stations) { const matchesSearch = internalData.stations[stationIndex].name.toLowerCase().search(searchString.toLowerCase()) >= 0; @@ -662,7 +662,7 @@ document.querySelector('#searchStation').addEventListener('input', (e) => { document.querySelectorAll('button.typeChip').forEach(e => { e.addEventListener('click', (event) => { - e.ariaPressed = e.ariaPressed === 'true' ? 'false' : 'true'; + e.ariaPressed = e.dataset.pressed = e.dataset.pressed === 'true' ? 'false' : 'true'; filterData(); }) }) diff --git a/index.html b/index.html index 58e4796..a48e80a 100644 --- a/index.html +++ b/index.html @@ -43,10 +43,10 @@
    - - - - + + + +
    diff --git a/style.css b/style.css index 94a7483..1f3e9c5 100644 --- a/style.css +++ b/style.css @@ -614,26 +614,37 @@ div#typeFilter button.typeChip { aspect-ratio: 1/1; justify-content: center; align-items: center; + position: relative; + overflow: hidden; } 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] { +div#typeFilter button.typeChip[data-type=U][data-pressed=false], div#typeFilter button.typeChip[data-type=S][data-pressed=false], div#typeFilter button.typeChip[data-type=A][data-pressed=false], div#typeFilter button.typeChip[data-type=R][data-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] { +div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=R][data-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] { +div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=R][data-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] { +div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=R][data-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] { +div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=R] { background-color: var(--bg-type-r-disabled); } +div#typeFilter button.typeChip[data-type=U][data-pressed=false]::after, div#typeFilter button.typeChip[data-type=S][data-pressed=false]::after, div#typeFilter button.typeChip[data-type=A][data-pressed=false]::after, div#typeFilter button.typeChip[data-type=R][data-pressed=false]::after { + position: absolute; + content: ""; + width: 144%; + height: 0.4rem; + background-color: var(--color-gray-500); + opacity: 80%; + transform: rotate(-45deg); +} span.lineChip { padding: 0.3em 0.6em; diff --git a/style.css.map b/style.css.map index 0ae8de6..178d600 100644 --- a/style.css.map +++ b/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhCA;EAjDF;IAkDI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAgBF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAWA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;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;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;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;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAQV;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"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhCA;EAjDF;IAkDI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAgBF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAWA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;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;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;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;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;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"} \ No newline at end of file diff --git a/style.scss b/style.scss index 52ae926..0a8c910 100644 --- a/style.scss +++ b/style.scss @@ -713,7 +713,7 @@ span.lineChip, span.typeChip, button.typeChip { } -div#typeFilter{ +div#typeFilter { display: flex; flex-grow: 1; flex-wrap: nowrap; @@ -727,9 +727,13 @@ div#typeFilter{ aspect-ratio: 1/1; justify-content: center; align-items: center; + position: relative; + overflow: hidden; + &[data-type="U"], &[data-type="S"], &[data-type="A"], &[data-type="R"] { border: solid 2px var(--station-border); - &[aria-pressed="false"] { + + &[data-pressed="false"] { background-color: var(--color-gray-500); color: var(--color-type-disabled); @@ -748,6 +752,16 @@ div#typeFilter{ &[data-type="R"] { background-color: var(--bg-type-r-disabled); } + + &::after { + position: absolute; + content: ''; + width: 144%; + height: 0.4rem; + background-color: var(--color-gray-500); + opacity: 80%; + transform: rotate(-45deg); + } } } } From 9a6be1d0108629860e2467a585069eedeee259c9 Mon Sep 17 00:00:00 2001 From: kritzl Date: Thu, 6 Jun 2024 15:16:18 +0200 Subject: [PATCH 08/18] display additional information for station --- elevators.js | 6 ++++-- style.css | 17 +++++++++++++++++ style.css.map | 2 +- style.scss | 21 +++++++++++++++++++++ 4 files changed, 43 insertions(+), 3 deletions(-) diff --git a/elevators.js b/elevators.js index eb46701..6fdc056 100644 --- a/elevators.js +++ b/elevators.js @@ -88,6 +88,7 @@ async function loadElevators() { for (const station of stations) { const stationName = station['mainSubStation']['stationName']; + const stationComment = station['mainSubStation']['comment']; const lines = new Set(); const elevators = []; for (const elevatorKey of Object.keys(station.elevators)) { @@ -155,7 +156,7 @@ async function loadElevators() { internalData.stations[stationIndex++] = { name: stationName, - comment: station['comment'], + comment: stationComment, state: stationState, lines: stationLines, types: stationTypes, @@ -540,8 +541,9 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
    • - Aufzüge anzeigen + Details / Aufzüge anzeigen + ${station.comment ? `

    ${station.comment}

    ` : ''} diff --git a/style.css b/style.css index 1f3e9c5..a2ed1e8 100644 --- a/style.css +++ b/style.css @@ -360,6 +360,20 @@ ul#stationList > li.station > details summary::after { ul#stationList > li.station > details[open] summary { margin-bottom: 1rem; } +ul#stationList > li.station > details > div.comment { + position: relative; + z-index: 20; + display: inline-flex; + margin-left: calc(var(--space-m) + var(--type-icon-size)); + padding-bottom: var(--space-m); + border-bottom: solid 2px var(--station-border); +} +ul#stationList > li.station > details > div.comment > p { + display: block; + border: solid 2px var(--nav-bg); + border-radius: var(--btn-radius); + padding: var(--space-l); +} ul#stationList > li.station > details > ul { padding: 0; list-style: none; @@ -395,6 +409,9 @@ ul#stationList > li.station > details > ul > li.elevator > .stateIcon { display: inline; } } +ul#stationList > li.station > details > ul > li.elevator:first-child { + padding-top: var(--space-l); +} ul#stationList > li.station > details > ul > li.elevator:not(:first-child):before { content: ""; position: absolute; diff --git a/style.css.map b/style.css.map index 178d600..1acef63 100644 --- a/style.css.map +++ b/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhCA;EAjDF;IAkDI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAgBF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAWA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;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;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;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;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;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"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhCA;EAjDF;IAkDI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAgBF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAWA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;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;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;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;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;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;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;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"} \ No newline at end of file diff --git a/style.scss b/style.scss index 0a8c910..c4714aa 100644 --- a/style.scss +++ b/style.scss @@ -422,6 +422,22 @@ ul#stationList { margin-bottom: 1rem; } + > div.comment { + position: relative; + z-index: 20; + display: inline-flex; + margin-left: calc(var(--space-m) + var(--type-icon-size)); + padding-bottom: var(--space-m); + border-bottom: solid 2px var(--station-border); + + > p { + display: block; + border: solid 2px var(--nav-bg); + border-radius: var(--btn-radius); + padding: var(--space-l); + } + } + > ul { padding: 0; list-style: none; @@ -456,6 +472,11 @@ ul#stationList { } } + // space above first elevator + &:first-child { + padding-top: var(--space-l); + } + // divider between elevators &:not(:first-child):before { content: ""; From 6ebc758e25aada489e6215ceb5e60e5f5d1bd65b Mon Sep 17 00:00:00 2001 From: kritzl Date: Thu, 6 Jun 2024 15:21:50 +0200 Subject: [PATCH 09/18] minor layout fix --- elevators.js | 2 +- index.html | 2 +- style.css | 12 +++++++++--- style.css.map | 2 +- style.scss | 19 ++++++++++++++----- 5 files changed, 26 insertions(+), 11 deletions(-) diff --git a/elevators.js b/elevators.js index 6fdc056..53d452c 100644 --- a/elevators.js +++ b/elevators.js @@ -541,7 +541,7 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
    - Details / Aufzüge anzeigen + Details / Aufzüge anzeigen ${station.comment ? `

    ${station.comment}

    ` : ''}
    -
    -

    Worum geht's hier?

    -

    - Diese Seite ermöglicht einen barrierefreien Zugang zu den Aufzugs informationen im HVV. - Der HVV selbst zeigt diese Informationen nur auf einer (vor allem ohne Ortskenntnis) schwer zu navigierenden Karte an: - HVV Webseite zu Aufzügen -

    -

    - Dieses Projekt wurde unter AGPL-3 entwickelt und ist hier zu finden: - git.kritzl.dev -

    -
    +
    +

    Worum geht's hier?

    +

    + Diese Seite ermöglicht einen barrierefreien Zugang zu den Aufzugs-Informationen im HVV. + Der HVV selbst zeigt diese Informationen nur auf einer (vor allem ohne Ortskenntnis) schwer zu navigierenden + Karte an: + HVV Webseite zu Aufzügen +

    +

    + Dieses Projekt wurde unter der AGPL-3 Lizenz entwickelt und ist hier zu finden: + git.kritzl.dev +

    +
    \ No newline at end of file diff --git a/elevators.js b/elevators.js index 309ad56..af261c9 100644 --- a/elevators.js +++ b/elevators.js @@ -232,7 +232,7 @@ async function loadOsmData() { if (!internalData.stations[stationIndex].hasOwnProperty('coordinates')) { const substitute = substituteData.filter(subs => subs.name === internalData.stations[stationIndex].name) - if (substitute.length && substitute.hasOwnProperty('coordinates')) { + if (substitute.length && substitute[0].hasOwnProperty('coordinates')) { internalData.stations[stationIndex]['coordinates'] = substitute[0].coordinates; } } @@ -316,9 +316,23 @@ function sortStations(stationA, stationB) { return 0; } +function sortInt(valueA, valueB) { + const a = parseInt(valueA) + const b = parseInt(valueB) + if (a < b) { + return -1; + } + if (a > b) { + return 1; + } + + // names must be equal + return 0; +} + function sortStationsByDistance(stationA, stationB) { - const distanceA = stationA.distance; // ignore upper and lowercase - const distanceB = stationB.distance; // ignore upper and lowercase + const distanceA = stationA.distance ?? 0; // ignore upper and lowercase + const distanceB = stationB.distance ?? 0; // ignore upper and lowercase if (distanceA < distanceB) { return -1; } @@ -415,7 +429,9 @@ function renderData(location = null) { } } - stations = stations.sort(sortStationsByDistance); + if (sortByDistance) { + stations = stations.sort(sortStationsByDistance); + } for (const stationIndex in stations) { const station = stations[stationIndex]; @@ -478,7 +494,7 @@ function renderData(location = null) { osmTemplate += `
    Beschreibung
    ${node.tags['description']}
    `; } if (node.tags.hasOwnProperty('level')) { - osmTemplate += `
    Ebenen
    ${node.tags['level'].split(';').sort().join(', ')}
    `; + osmTemplate += `
    Ebenen
    ${node.tags['level'].split(';').sort(sortInt).join(', ')}
    `; } if (node.tags.hasOwnProperty('wheelchair')) { osmTemplate += `
    Rollstühle
    ${node.tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}
    `; @@ -551,7 +567,11 @@ function renderData(location = null) {
    ${station.types.sort().map(t => `${t}`).join('')}
    - ${typeof station.distance !== 'undefined' ? `
    ${Math.round(station.distance / 100) / 10}
    km
    ` : ''} + ${sortByDistance + ? typeof station.distance !== 'undefined' + ? `
    ${Math.round(station.distance / 100) / 10}
    km
    ` + : '
    ? km
    ' + : ''}

    ${station.name}

    @@ -646,12 +666,13 @@ document.querySelector('#stationsNearMe') if (geolocationPermission !== 'granted') { allowGeolocation(); } else { + sortByDistance = e.target.ariaPressed = true; + // If geolocation is already set. // If not the location watcher will re-render our data. if (geolocation !== null) { renderData(geolocation) } - sortByDistance = e.target.ariaPressed = true; } } } else { diff --git a/icons/favicon_source.svg b/icons/favicon_source.svg new file mode 100644 index 0000000..144b176 --- /dev/null +++ b/icons/favicon_source.svg @@ -0,0 +1,81 @@ + + + + diff --git a/index.html b/index.html index 863abc6..bd5bb32 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - Barrierefreie Aufzugs-Liste + hvvstuhl.de

    Barrierefreie Aufzugs-Liste

    @@ -37,9 +37,8 @@
    +
    -