departures keine abfahren and monospace

commit 23bc665c9e9d08f018360807fff7f8ef770230ba
parent 61932b21de4e9e55e8f4f177285f03d50a6ac6b4
Author: Milan Pässler <me@pbb.lc>
Date: Tue, 18 Jun 2019 02:41:07 +0200

departures keine abfahren and monospace

2 files changed, 31 insertions(+), 0 deletions(-)

index.dev.html

++++++++++++++++++++

src/departures.js

+++++++++++

diff --git a/index.dev.html b/index.dev.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="de">
+	<head>
+		<title>Smart Home</title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+		<meta name="theme-color" content="#43a047">
+		<link rel="manifest" href="./manifest.json">
+		<style>
+body {
+	margin: 0;
+}
+		</style>
+	</head>
+	<body>
+		<smarthome-layout></smarthome-layout>
+		<noscript>JavaScript is required to use Smart Home</noscript>
+		<script type="module" src="main.min.js"></script>
+	</body>
+</html>

diff --git a/src/departures.js b/src/departures.js
@@ -57,6 +57,9 @@ class Departures extends LitElement {
 									<div class="table-column">${Number(departure.departure_in) ? departure.departure_in + " min" : "sofort"}</div>
 								`)}
 							</div>
+						  ${d.length ? "" : html`
+						  	<div class="table-empty table-column">--- Momentan keine Abfahrten ---</div>
+						  `}
 						</div>
 					</smarthome-card>
 				`)}

@@ -106,6 +109,7 @@ class Departures extends LitElement {
 				width: 20%;
 			}
 			.table {
+			  flex-wrap: wrap;
 				padding: 20px;
 				padding-top: 10px;
 				background: #444;

@@ -116,6 +120,8 @@ class Departures extends LitElement {
 			}
 
 			.table-column:not(.table-heading):not(.table-title) {
+				font-family: monospace;
+				font-size: 15px;
 				background: #222;
 				border-bottom: 1px solid grey;
 				color: #ffaa00;

@@ -130,6 +136,11 @@ class Departures extends LitElement {
 			.table-heading {
 				border-left: 2px solid white;
 			}
+
+			.table-empty {
+			  flex-basis: 100%;
+				text-align: center;
+			}
 		`;
 	}
 }