properly format stop list; show distance on geo lookup

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 @@
 	<div class="content">
 		<ul class="stops">
 			{% for stop in stops %}
-				<li><a href="/board/{{ stop['id'] }}">{{ stop['name'] }}</a></li>
+				<li>
+					<a class="name" href="/board/{{ stop['id'] }}">{{ stop['name'] }}</a>
+				</li>
 			{% endfor %}
 		</ul>
 	</div>