From 5b0c3d3bf6ab35ca3ecb10914a350894e1e8cc7e Mon Sep 17 00:00:00 2001 From: Daniel Friesel Date: Sun, 27 Jun 2021 10:07:41 +0200 Subject: properly format stop list; show distance on geo lookup --- sass/app.scss | 50 ++++++++++++++++++++++++++++++++++++++++++++- static/v0/css/dark.min.css | 2 +- static/v0/css/light.min.css | 2 +- static/v0/js/geolocation.js | 24 ++++++++++++++++------ templates/stops.html | 4 +++- 5 files changed, 72 insertions(+), 10 deletions(-) diff --git a/sass/app.scss b/sass/app.scss index 39726d8..40e98dc 100644 --- a/sass/app.scss +++ b/sass/app.scss @@ -14,6 +14,53 @@ html { margin-right: auto; } +ul.stops { + position:relative; + width:100%; + + border-width:1px 2px; + margin-bottom: 5em; + + list-style-type:none; + margin:0; + padding:0; + + a { + text-decoration: none; + } + + > li { + display: block; + height: 3em; + width: 100%; + position: relative; + border-bottom: 1px solid grey; + background-color: white; + + .name { + position: absolute; + bottom: 0; + left: 0; + width: 70%; + overflow: hidden; + background-color: transparent; + font-size: 150%; + color: black; + } + + .note { + position: absolute; + top: 1px; + left: 0; + width: 70%; + height: 1.2em; + overflow: hidden; + opacity: 50%; + } + + } +} + ul.departures { position:relative; width:100%; @@ -119,7 +166,8 @@ ul.departures { } @media only screen and (max-width: 600px) { - ul.departures > li { + ul.departures > li, + ul.stops > li { font-size: 85%; } } diff --git a/static/v0/css/dark.min.css b/static/v0/css/dark.min.css index 68e086d..fc43d5e 100644 --- a/static/v0/css/dark.min.css +++ b/static/v0/css/dark.min.css @@ -1 +1 @@ -body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:140%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:5em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:7.6em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}@media only screen and (max-width: 600px){ul.departures>li{font-size:85%}} +body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}ul.stops{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.stops a{text-decoration:none}ul.stops>li{display:block;height:3em;width:100%;position:relative;border-bottom:1px solid grey;background-color:white}ul.stops>li .name{position:absolute;bottom:0;left:0;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.stops>li .note{position:absolute;top:1px;left:0;width:70%;height:1.2em;overflow:hidden;opacity:50%}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:140%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:5em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:7.6em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}@media only screen and (max-width: 600px){ul.departures>li,ul.stops>li{font-size:85%}} diff --git a/static/v0/css/light.min.css b/static/v0/css/light.min.css index 68e086d..fc43d5e 100644 --- a/static/v0/css/light.min.css +++ b/static/v0/css/light.min.css @@ -1 +1 @@ -body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:140%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:5em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:7.6em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}@media only screen and (max-width: 600px){ul.departures>li{font-size:85%}} +body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}ul.stops{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.stops a{text-decoration:none}ul.stops>li{display:block;height:3em;width:100%;position:relative;border-bottom:1px solid grey;background-color:white}ul.stops>li .name{position:absolute;bottom:0;left:0;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.stops>li .note{position:absolute;top:1px;left:0;width:70%;height:1.2em;overflow:hidden;opacity:50%}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:140%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:5em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:7.6em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}@media only screen and (max-width: 600px){ul.departures>li,ul.stops>li{font-size:85%}} diff --git a/static/v0/js/geolocation.js b/static/v0/js/geolocation.js index 1e93c88..2f93db7 100644 --- a/static/v0/js/geolocation.js +++ b/static/v0/js/geolocation.js @@ -3,15 +3,27 @@ document.addEventListener("DOMContentLoaded", function() { const processResult = function(results) { const list = document.createElement("ul"); - list.class = "stops"; + list.className = "stops"; for (var result in results) { result = results[result]; - var listentry = document.createElement("li"); - var link = document.createElement("a"); - link.text = result.name + const listentry = document.createElement("li"); + const link = document.createElement("a"); + const note = document.createElement("span"); + + link.className = "name"; + link.textContent = result.name; link.href = "/board/" + result.id; - listentry.appendChild(link) - list.appendChild(listentry) + + note.className = "note"; + if (result.distance >= 1000) { + note.textContent = result.distance.toFixed(1) + " km" + } else { + note.textContent = result.distance + " m" + } + + listentry.appendChild(link); + listentry.appendChild(note); + list.appendChild(listentry); } geoLocationButton.replaceWith(list); }; diff --git a/templates/stops.html b/templates/stops.html index b762958..3889b7e 100644 --- a/templates/stops.html +++ b/templates/stops.html @@ -9,7 +9,9 @@
-- cgit v1.2.3