diff options
| -rwxr-xr-x | bin/nvm | 4 | ||||
| -rw-r--r-- | sass/app.scss | 60 | ||||
| -rw-r--r-- | static/v0/css/dark.min.css | 2 | ||||
| -rw-r--r-- | static/v0/css/light.min.css | 2 | ||||
| -rw-r--r-- | static/v0/js/geolocation.js | 39 | ||||
| -rw-r--r-- | templates/stops.html | 34 |
6 files changed, 133 insertions, 8 deletions
@@ -86,7 +86,9 @@ class Line: self.__dict__.update(obj) self.css_class = str() - if self.product == "tram": + if self.product.startswith("national"): + self.css_class = "longdistance" + elif self.product == "tram": self.name = self.name.removeprefix("STR ") self.css_class = "tram" elif self.product == "suburban": diff --git a/sass/app.scss b/sass/app.scss index 40e98dc..4b01bf5 100644 --- a/sass/app.scss +++ b/sass/app.scss @@ -14,6 +14,7 @@ html { margin-right: auto; } + ul.stops { position:relative; width:100%; @@ -31,11 +32,12 @@ ul.stops { > li { display: block; - height: 3em; + height: 4em; width: 100%; position: relative; border-bottom: 1px solid grey; background-color: white; + cursor: pointer; .name { position: absolute; @@ -58,6 +60,52 @@ ul.stops { opacity: 50%; } + .lines { + position: absolute; + bottom: 0.1em; + right: 5px; + background-color: transparent; + font-weight: bold; + font-size: 120%; + + span { + padding-left: 0.1em; + padding-right: 0.1em; + margin-left: 0.2em; + } + + .longdistance { + border: 0.1em solid #ffcccc; + } + + .regional { + background-color: #eeeeee; + } + + .tram { + background-color:#ffcccc; + } + + .taxi { + background-color:#eeaaee; + font-weight: normal; + } + + .suburban { + background-color:#aaffba; + border-radius: 30px; + } + + .subway { + background-color:#aac0ff; + } + + .bus { + background-color:#eeaaee; + border-radius: 10px; + } + } + } } @@ -94,13 +142,17 @@ ul.departures { max-height: 3ex; max-width: 5em; overflow: hidden; - font-size: 140%; + font-size: 120%; background-color: #eeeeee; font-weight: bold; padding-left: 0.1em; padding-right: 0.1em; } + .longdistance { + border: 0.1em solid #ffcccc; + } + .tram { background-color:#ffcccc; } @@ -122,7 +174,7 @@ ul.departures { .dest { position: absolute; bottom: 0; - left: 5em; + left: 4em; width: 70%; overflow: hidden; background-color: transparent; @@ -133,7 +185,7 @@ ul.departures { .destsuffix { position: absolute; top: 1px; - left: 7.6em; + left: 6.1em; width: 70%; height: 1.2em; overflow: hidden; diff --git a/static/v0/css/dark.min.css b/static/v0/css/dark.min.css index fc43d5e..abc810b 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.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%}} +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:4em;width:100%;position:relative;border-bottom:1px solid grey;background-color:white;cursor:pointer}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.stops>li .lines{position:absolute;bottom:0.1em;right:5px;background-color:transparent;font-weight:bold;font-size:120%}ul.stops>li .lines span{padding-left:0.1em;padding-right:0.1em;margin-left:0.2em}ul.stops>li .lines .longdistance{border:0.1em solid #ffcccc}ul.stops>li .lines .regional{background-color:#eeeeee}ul.stops>li .lines .tram{background-color:#ffcccc}ul.stops>li .lines .taxi{background-color:#eeaaee;font-weight:normal}ul.stops>li .lines .suburban{background-color:#aaffba;border-radius:30px}ul.stops>li .lines .subway{background-color:#aac0ff}ul.stops>li .lines .bus{background-color:#eeaaee;border-radius:10px}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:120%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .longdistance{border:0.1em solid #ffcccc}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:4em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:6.1em;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 fc43d5e..abc810b 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.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%}} +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:4em;width:100%;position:relative;border-bottom:1px solid grey;background-color:white;cursor:pointer}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.stops>li .lines{position:absolute;bottom:0.1em;right:5px;background-color:transparent;font-weight:bold;font-size:120%}ul.stops>li .lines span{padding-left:0.1em;padding-right:0.1em;margin-left:0.2em}ul.stops>li .lines .longdistance{border:0.1em solid #ffcccc}ul.stops>li .lines .regional{background-color:#eeeeee}ul.stops>li .lines .tram{background-color:#ffcccc}ul.stops>li .lines .taxi{background-color:#eeaaee;font-weight:normal}ul.stops>li .lines .suburban{background-color:#aaffba;border-radius:30px}ul.stops>li .lines .subway{background-color:#aac0ff}ul.stops>li .lines .bus{background-color:#eeaaee;border-radius:10px}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:120%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .longdistance{border:0.1em solid #ffcccc}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:4em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:6.1em;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 2f93db7..4e868b0 100644 --- a/static/v0/js/geolocation.js +++ b/static/v0/js/geolocation.js @@ -1,6 +1,13 @@ document.addEventListener("DOMContentLoaded", function() { const geoLocationButton = document.getElementById('geolocationsearch'); + const mkTextNode = function(className, textContent) { + const node = document.createElement("span"); + node.className = className; + node.textContent = textContent; + return node + } + const processResult = function(results) { const list = document.createElement("ul"); list.className = "stops"; @@ -9,6 +16,7 @@ document.addEventListener("DOMContentLoaded", function() { const listentry = document.createElement("li"); const link = document.createElement("a"); const note = document.createElement("span"); + const lines = document.createElement("span"); link.className = "name"; link.textContent = result.name; @@ -21,8 +29,39 @@ document.addEventListener("DOMContentLoaded", function() { note.textContent = result.distance + " m" } + lines.className = "lines"; + + if (result.products.nationalExpress) { + lines.appendChild(mkTextNode("longdistance", "ICE")); + } + if (result.products.national) { + lines.appendChild(mkTextNode("longdistance", "IC")); + } + if (result.products.regionalExp) { + lines.appendChild(mkTextNode("longdistance", "RE")); + } + if (result.products.regional) { + lines.appendChild(mkTextNode("longdistance", "R")); + } + if (result.products.suburban) { + lines.appendChild(mkTextNode("suburban", "S")); + } + if (result.products.tram) { + lines.appendChild(mkTextNode("tram", "T")); + } + if (result.products.bus) { + lines.appendChild(mkTextNode("bus", "Bus")); + } + if (result.products.ferry) { + lines.appendChild(mkTextNode("bus", "Fähre")); + } + if (result.products.taxi) { + lines.appendChild(mkTextNode("taxi", "AST")); + } + listentry.appendChild(link); listentry.appendChild(note); + listentry.appendChild(lines); list.appendChild(listentry); } geoLocationButton.replaceWith(list); diff --git a/templates/stops.html b/templates/stops.html index 3889b7e..affac69 100644 --- a/templates/stops.html +++ b/templates/stops.html @@ -9,8 +9,40 @@ <div class="content"> <ul class="stops"> {% for stop in stops %} - <li> + <li onclick="location.href='/board/{{ stop['id'] }} ';"> <a class="name" href="/board/{{ stop['id'] }}">{{ stop['name'] }}</a> + <span class="lines"> + {% if stop["products"]["nationalExpress"] %} + <span class="longdistance">ICE</span> + {% endif %} + {% if stop["products"]["national"] %} + <span class="longdistance">IC</span> + {% endif %} + {% if stop["products"]["regionalExp"] %} + <span class="regional">RE</span> + {% endif %} + {% if stop["products"]["regional"] %} + <span class="regional">R</span> + {% endif %} + {% if stop["products"]["suburban"] %} + <span class="suburban">S</span> + {% endif %} + {% if stop["products"]["subway"] %} + <span class="subway">U</span> + {% endif %} + {% if stop["products"]["tram"] %} + <span class="tram">T</span> + {% endif %} + {% if stop["products"]["bus"] %} + <span class="bus">Bus</span> + {% endif %} + {% if stop["products"]["ferry"] %} + <span class="bus">Fähre</span> + {% endif %} + {% if stop["products"]["taxi"] %} + <span class="taxi">AST</span> + {% endif %} + </span> </li> {% endfor %} </ul> |