From fc499a7b98a57a452b33b1d1310482840bef8551 Mon Sep 17 00:00:00 2001 From: Daniel Friesel Date: Sun, 27 Jun 2021 09:50:23 +0200 Subject: switch to scss --- sass/app.scss | 128 ++++++++++++++++++++++++++++++++++++++++++++ sass/dark.scss | 6 +++ sass/light.scss | 6 +++ scripts/asset-rebuild | 9 ++++ static/v0/css/dark.min.css | 1 + static/v0/css/light.min.css | 1 + static/v0/css/wip.css | 128 -------------------------------------------- static/v0/js/geolocation.js | 2 +- templates/header.html | 2 +- templates/stops.html | 2 +- 10 files changed, 154 insertions(+), 131 deletions(-) create mode 100644 sass/app.scss create mode 100644 sass/dark.scss create mode 100644 sass/light.scss create mode 100755 scripts/asset-rebuild create mode 100644 static/v0/css/dark.min.css create mode 100644 static/v0/css/light.min.css delete mode 100644 static/v0/css/wip.css 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 @@ - + 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 @@
-