departure board: some more styling consistency

sass/src/common/local.scss

@@ -71,7 +71,7 @@ ul.suggestions {
 .departures li {
 	transition: background .3s;
 	display: grid;
-	grid-template-columns: 10ch 11ch 1fr;
+	grid-template-columns: 10ch 10ch 1fr;
 	align-items: center;
 	&:hover {
 		background-color: $departures-highlight-color;
@@ -84,11 +84,11 @@ ul.suggestions {
 			border: 1px solid;
 			color: $off-black;
 		}
-		.dep-dest::before {
+		.dep-time::after {
-		  content: "Fahrt nach";
+		  content: " ⊖";
+		}
+	}
 }
-		.dep-dest::after {
-		  content: "entfällt";
 		}
 	}
 }
@@ -107,8 +107,12 @@ ul.suggestions {
 		font-weight: bold;
 	}
 }
-
+.departures .dep-time {
-
+	color: $off-black;
+}
+.departures .dep-dest {
+	margin-left: 0.8rem;
+}
 .departures .dep-line {
 	text-align: center;
 	padding: .2rem;
@@ -118,8 +122,10 @@ ul.suggestions {
 	display: inline-block;
 	font-weight: 600;
 	line-height: 1;
-	margin-right: 0.8rem;
 	height: fit-content;
+	width: fit-content;
+	min-width: 6ch;
+	margin: 0 auto;
 	
 	&.Bus, &.RUF, &.AST {
 		background-color: #a3167e;
@@ -176,8 +182,8 @@ ul.suggestions {
 
 @media screen and (max-width: 600px) {
 	.departures li {
-		grid-template-columns: 11ch 1fr;
 		.dep-line, .dep-time {
+		grid-template-columns: 10ch 1fr;
 			grid-column: 1;
 			margin-right: 0.8rem;
 			text-align: center;

templates/_departures_hafas.html.ep

@@ -22,7 +22,7 @@
 		data-train="<%= $result->id %>"
 		data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>"
 	>
-		<span class="dep-time">
+		<a class="dep-time" href="#">
 			%= $result->datetime->strftime('%H:%M')
 			% if ($result->delay) {
 				(<%= sprintf('%+d', $result->delay) %>)
@@ -30,17 +30,23 @@
 			% elsif (not defined $result->delay and not $result->is_cancelled) {
 				<i class="material-icons" aria-label="Keine Echtzeitdaten vorhanden" style="font-size: 16px;">gps_off</i>
 			% }
-			</span>
-			<a class="dep-line <%= (split(/ /, $result->line))[0] %>">
-				%= $result->line
 		</a>
+		<span class="dep-line <%= (split(/ /, $result->line))[0] %>">
+			%= $result->line
+		</span>
 		<span class="dep-dest">
+			% if ($result->is_cancelled) {
+				Fahrt nach <%= $result->destination %> entfällt
+			% }
+			% else {
 				%= $result->destination
 				% for my $checkin (@{$checkin_by_train->{$result->id} // []}) {
 					<span class="followee-checkin">
-						<i class="material-icons tiny">people</i> <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
+						<i class="material-icons tiny">people</i>
+						<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
 					</span>
 				% }
+			% }
 		</span>
 	</li>
 % }

templates/_departures_iris.html.ep

@@ -22,7 +22,7 @@
 		data-train="<%= $result->train_id %>"
 		data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>"
 	>
-		<span class="dep-time">
+		<a class="dep-time" href="#">
 			% if ($result->departure_hidden) {
 				(<%= $result->departure->strftime('%H:%M') %>)
 			% }
@@ -35,17 +35,23 @@
 			% elsif (not $result->has_realtime and $result->start->epoch < $now_epoch) {
 				<i class="material-icons" aria-label="Keine Echtzeitdaten vorhanden" style="font-size: 16px;">gps_off</i>
 			% }
-			</span>
-			<a class="dep-line <%= (split(/ /, $result->line))[0] %>">
-				%= $result->line
 			</a>
+			<span class="dep-line <%= (split(/ /, $result->line))[0] %>">
+				%= $result->line
+			</span>
 			<span class="dep-dest">
+				% if ($result->is_cancelled) {
+					Fahrt nach <%= $result->destination %> entfällt
+				% }
+				% else {
 					%= $result->destination
 					% for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) {
 						<span class="followee-checkin">
-						<i class="material-icons tiny">people</i> <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
+							<i class="material-icons tiny">people</i>
+							<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
 						</span>
 					% }
+				% }
 			</span>
 	</li>
 % }