diff options
-rw-r--r-- | sass/app.scss | 128 | ||||
-rw-r--r-- | sass/dark.scss | 6 | ||||
-rw-r--r-- | sass/light.scss | 6 | ||||
-rwxr-xr-x | scripts/asset-rebuild | 9 | ||||
-rw-r--r-- | static/v0/css/dark.min.css | 1 | ||||
-rw-r--r-- | static/v0/css/light.min.css | 1 | ||||
-rw-r--r-- | static/v0/css/wip.css | 128 | ||||
-rw-r--r-- | static/v0/js/geolocation.js | 2 | ||||
-rw-r--r-- | templates/header.html | 2 | ||||
-rw-r--r-- | templates/stops.html | 2 |
10 files changed, 154 insertions, 131 deletions
diff --git a/sass/app.scss b/sass/app.scss new file mode 100644 index 0000000..39726d8 --- /dev/null +++ b/sass/app.scss @@ -0,0 +1,128 @@ +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; + + > li { + display: block; + height: 3em; + width: 100%; + position: relative; + cursor: pointer; + border-bottom: 1px solid grey; + background-color: white; + + &.cancelled { + background-color: #ffe7d0; + } + } + + .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; + } + + .tram { + background-color:#ffcccc; + } + + .suburban { + background-color:#aaffba; + border-radius: 30px; + } + + .subway { + background-color:#aac0ff; + } + + .bus { + background-color:#eeaaee; + border-radius: 10px; + } + + .dest { + position: absolute; + bottom: 0; + left: 5em; + width: 70%; + overflow: hidden; + background-color: transparent; + font-size: 150%; + color: black; + } + + .destsuffix { + position: absolute; + top: 1px; + left: 7.6em; + width: 70%; + height: 1.2em; + overflow: hidden; + } + + .time { + position: absolute; + right: 5px; + top: 1px; + background-color: transparent; + padding-left: 0.2em; + color: black; + + .delay { + padding-right: 1ex; + color: #ff0000; + } + } + + .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%; + } +} + +@media only screen and (min-width: 600px) { +} diff --git a/sass/dark.scss b/sass/dark.scss new file mode 100644 index 0000000..96db6ba --- /dev/null +++ b/sass/dark.scss @@ -0,0 +1,6 @@ +/* + * Copyright (C) 2021 Daniel Friesel + * + * SPDX-License-Identifier: BSD-2-Clause + */ +@import 'app.scss'; diff --git a/sass/light.scss b/sass/light.scss new file mode 100644 index 0000000..96db6ba --- /dev/null +++ b/sass/light.scss @@ -0,0 +1,6 @@ +/* + * Copyright (C) 2021 Daniel Friesel + * + * SPDX-License-Identifier: BSD-2-Clause + */ +@import 'app.scss'; diff --git a/scripts/asset-rebuild b/scripts/asset-rebuild new file mode 100755 index 0000000..c2c722b --- /dev/null +++ b/scripts/asset-rebuild @@ -0,0 +1,9 @@ +#!/bin/sh +# Copyright (C) 2021 Daniel Friesel +# +# SPDX-License-Identifier: CC0-1.0 + +set -ex + +sassc -t compressed sass/dark.scss static/v0/css/dark.min.css +sassc -t compressed sass/light.scss static/v0/css/light.min.css diff --git a/static/v0/css/dark.min.css b/static/v0/css/dark.min.css new file mode 100644 index 0000000..68e086d --- /dev/null +++ b/static/v0/css/dark.min.css @@ -0,0 +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%}} diff --git a/static/v0/css/light.min.css b/static/v0/css/light.min.css new file mode 100644 index 0000000..68e086d --- /dev/null +++ b/static/v0/css/light.min.css @@ -0,0 +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%}} diff --git a/static/v0/css/wip.css b/static/v0/css/wip.css deleted file mode 100644 index a5f9424..0000000 --- a/static/v0/css/wip.css +++ /dev/null @@ -1,128 +0,0 @@ -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 li .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 li .tram { - background-color:#ffcccc; -} - -ul.departures li .suburban { - background-color:#aaffba; - border-radius: 30px; -} - -ul.departures li .subway { - background-color:#aac0ff; -} - -ul.departures li .bus { - background-color:#eeaaee; - border-radius: 10px; -} - -ul.departures li .dest { - position: absolute; - bottom: 0; - left: 5em; - width: 70%; - overflow: hidden; - background-color: transparent; - font-size: 150%; - color: black; -} - -ul.departures li .destsuffix { - position: absolute; - top: 1px; - left: 7.6em; - width: 70%; - height: 1.2em; - overflow: hidden; -} - -ul.departures li .time .delay { - padding-right: 1ex; - color: #ff0000; -} - -ul.departures li .time { - position: absolute; - right: 5px; - top: 1px; - background-color: transparent; - padding-left: 0.2em; - color: black; -} - -ul.departures li .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%; - } -} - -@media only screen and (min-width: 600px) { -} diff --git a/static/v0/js/geolocation.js b/static/v0/js/geolocation.js index 7efffe0..1e93c88 100644 --- a/static/v0/js/geolocation.js +++ b/static/v0/js/geolocation.js @@ -2,8 +2,8 @@ document.addEventListener("DOMContentLoaded", function() { const geoLocationButton = document.getElementById('geolocationsearch'); const processResult = function(results) { - console.log(results); const list = document.createElement("ul"); + list.class = "stops"; for (var result in results) { result = results[result]; var listentry = document.createElement("li"); diff --git a/templates/header.html b/templates/header.html index 5d62fda..b7260a5 100644 --- a/templates/header.html +++ b/templates/header.html @@ -10,4 +10,4 @@ <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/icon-180x180.png"> <link rel="apple-touch-icon" sizes="152x152" href="/static/icons/icon-152x152.png"> <link rel="apple-touch-icon" sizes="167x167" href="/static/icons/icon-167x167.png"> -<link href="/static/v0/css/wip.css" id="theme" rel="stylesheet"> +<link href="/static/v0/css/light.min.css" id="theme" rel="stylesheet"> diff --git a/templates/stops.html b/templates/stops.html index 2cbac8e..b762958 100644 --- a/templates/stops.html +++ b/templates/stops.html @@ -7,7 +7,7 @@ <body> <div class="container"> <div class="content"> - <ul> + <ul class="stops"> {% for stop in stops %} <li><a href="/board/{{ stop['id'] }}">{{ stop['name'] }}</a></li> {% endfor %} |