ctucx.git: smartie-pwa

departures foo

diff --git a/src/departures.js b/src/departures.js
@@ -40,21 +40,21 @@ class Departures extends LitElement {
 						<div class="table-column table-title">${name}</div>
 						<div class="table">
 							<div class="table-row line-column">
-								<div class="table-column">Line</div>
+								<div class="table-column table-heading">Linie</div>
 								${d.map((departure) => html`
 									<div class="table-column">${departure.line}</div>
 								`)}
 							</div>
 							<div class="table-row direction-column">
-								<div class="table-column">Direction</div>
+								<div class="table-column table-heading">Richtung</div>
 								${d.map((departure) => html`
 									<div class="table-column">${departure.direction}</div>
 								`)}
 							</div>
 							<div class="table-row dep-column">
-								<div class="table-column"></div>
+								<div class="table-column table-heading">Abfahrt</div>
 								${d.map((departure) => html`
-									<div class="table-column">${departure.departure_in ? departure.departure_in + " min" : "now"}</div>
+									<div class="table-column">${Number(departure.departure_in) ? departure.departure_in + " min" : "sofort"}</div>
 								`)}
 							</div>
 						</div>

@@ -104,7 +104,7 @@ class Departures extends LitElement {
 				width: 100%;
 			}
 			.table-column {
-				padding: 1em;
+				padding: .5em;
 				height: 1em;
 				display: flex;
 				flex-direction: column;

@@ -114,9 +114,6 @@ class Departures extends LitElement {
 			.table-column {
 				background-color: #ddd;
 			}
-			.table-column:nth-child(2n) {
-				background-color: #fff;
-			}
 			@media (min-width: 600px) {
 				#connection-status {
 					margin-top: 20px;

@@ -131,10 +128,30 @@ class Departures extends LitElement {
 			.dep-column {
 				width: 20%;
 			}
-			.table-title {
+			.table {
+				padding: 20px;
+				padding-top: 10px;
+				background: #444;
+			}
+			.table-column {
 				background: #444;
 				color: white;
 			}
+
+			.table-column:not(.table-heading):not(.table-title) {
+				border-bottom: 1px solid grey;
+				color: #ffaa00;
+			}
+
+			.table-title {
+				padding: .85em;
+				padding-bottom: 0;
+				font-size: 1.4em;
+			}
+
+			.table-heading {
+				border-left: 2px solid white;
+			}
 		`;
 	}
 }