history: fix visual bugs with long station names

2 files changed, 114 insertions, 69 deletions

diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss
index ca06708..244da6a 100644
--- a/sass/src/common/local.scss
+++ b/sass/src/common/local.scss
@@ -72,13 +72,30 @@ ul.suggestions {
 	}
 }
 
-.collection.departures li, .collection.history li {
+// departure board and history - focus highlight
+.collection.departures > li,
+.collection.history > li {
 	transition: background .3s;
 	display: grid;
 	&:not(#now,.history-date-change ):hover, &:focus-within {
 		background-color: $departures-highlight-color;
 		outline: 2px solid $link-color;
 	}
+}
+
+// departure board - layout
+
+.collection.departures li {
+	grid-template-columns: 10ch 10ch 1fr;
+	align-items: center;
+	&#now {
+		background-color: $departures-highlight-color;
+		padding: 2rem 20px;
+		grid-template-columns: 10ch 1fr;
+		strong {
+			font-weight: bold;
+		}
+	}
 	&.cancelled {
 		background-color: $departures-cancelled-color;
 		font-style: italic;
@@ -93,67 +110,87 @@ ul.suggestions {
 		}
 	}
 }
-
-.collection.departures li {
-	grid-template-columns: 10ch 10ch 1fr;
-	align-items: center;
-	&#now {
-		background-color: $departures-highlight-color;
-		padding: 2rem 20px;
-		grid-template-columns: 10ch 1fr;
-		strong {
-			font-weight: bold;
+.departures .dep-time {
+	color: $off-black;
+	&:focus {
+		outline: none;
+	}
+}
+.departures .dep-dest {
+	margin-left: 0.8rem;
+	.followee-checkin {
+		font-size: 0.9rem;
+		display: block;
+		i.material-icons {
+			vertical-align: middle;
 		}
 	}
 }
-.collection.history li {
+
+// history - layout
+
+.collection.history > li {
 	display: grid;
 	grid-template-columns: 10ch 1fr;
 	grid-template-rows: 1fr;
 	a:first-child {
-		grid-row: 1 / span 3;
 		align-self: center;
 		text-align: center;
 		display: flex;
 	}
-	.origin, .destination {
-		grid-column: 2;
-		strong {
-			font-weight: 600;
-		}
-	}
-	.origin::before {
-		content: ' ';
-		display: block;
-		border-left: 2px dotted $off-black;
-		height: 1rem;
-		position: absolute;
-		margin-left: calc( 0.5rem - 1px );
-		margin-top: -0.75rem;
-	}
 	&.history-date-change {
 		display: block;
 		font-weight: bold;
 	}
 }
 
+ul.route-history > li {
+	list-style: none;
 
-.departures .dep-time {
-	color: $off-black;
-	&:focus {
-		outline: none;
+	position: relative;
+	display: grid;
+	grid-template-columns: 1rem 1fr;
+	gap: 0.5rem;
+	a {
+		font-family: $font-stack;
 	}
-}
-.departures .dep-dest {
-	margin-left: 0.8rem;
-	.followee-checkin {
-		font-size: 0.9rem;
-		display: block;
-		i.material-icons {
-			vertical-align: middle;
+	strong {
+		font-weight: 600;
+	}
+
+	// route icon bubble
+	i.material-icons {
+		&[aria-label=nach] {
+			padding-top: 0.4rem;
 		}
+		&[aria-label=von] {
+			display: block;
+			transform: rotate(-90deg);
+			height: 1rem;
+			margin-top: 0.4rem;
+		}
+	}
+
+	// route line / "perlenschnur"
+	&::before {
+		content: '';
+		background: $off-black;
+		position: absolute;
+		width: 2px;
+		left: calc( (1rem - 2px) / 2  );
+		bottom: 0;
+		top: 0;
+	}
+	&:first-of-type::before {
+		top: 1.3rem;
+	}
+	&:last-of-type::before {
+		bottom: unset;
+		height: 0.5rem;
 	}
 }
+
+// train color bubbles
 .dep-line {
 	text-align: center;
 	padding: .2rem;
diff --git a/templates/_history_trains.html.ep b/templates/_history_trains.html.ep
index 9af5490..cf998ab 100644
--- a/templates/_history_trains.html.ep
+++ b/templates/_history_trains.html.ep
@@ -21,37 +21,45 @@
 					</span>
 				</a>
 
-				<a href="<%= $detail_link %>" class="unmarked destination">
-				<i class="material-icons tiny" aria-label="nach">place</i>
-				% if (param('cancelled') and $travel->{sched_arrival}->epoch != 0) {
-					%= $travel->{sched_arrival}->strftime('%H:%M')
-				% }
-				% else {
-					% if ($travel->{rt_arrival}->epoch == 0 and $travel->{sched_arrival}->epoch == 0) {
-						<i class="material-icons">timer_off</i>
-					% } else {
-						%= $travel->{rt_arrival}->strftime('%H:%M');
-						% if ($travel->{sched_arrival} != $travel->{rt_arrival}) {
-							(<%= sprintf('%+d', ($travel->{rt_arrival}->epoch - $travel->{sched_arrival}->epoch) / 60) %>)
+				<ul class="route-history">
+					<li>
+						<i class="material-icons tiny" aria-label="nach">radio_button_unchecked</i>
+
+						<a href="<%= $detail_link %>" class="unmarked">
+						% if (param('cancelled') and $travel->{sched_arrival}->epoch != 0) {
+							%= $travel->{sched_arrival}->strftime('%H:%M')
+						% }
+						% else {
+							% if ($travel->{rt_arrival}->epoch == 0 and $travel->{sched_arrival}->epoch == 0) {
+								<i class="material-icons">timer_off</i>
+							% } else {
+								%= $travel->{rt_arrival}->strftime('%H:%M');
+								% if ($travel->{sched_arrival} != $travel->{rt_arrival}) {
+									(<%= sprintf('%+d', ($travel->{rt_arrival}->epoch - $travel->{sched_arrival}->epoch) / 60) %>)
+								% }
+							% }
 						% }
-					% }
-				% }
-				<strong><%= $travel->{to_name} %></strong>
+						<strong><%= $travel->{to_name} %></strong>
+						</a>
+					</li>
 
-				<a href="<%= $detail_link %>" class="unmarked origin">
-				<i class="material-icons tiny" aria-label="von">radio_button_unchecked</i>
-				% if (param('cancelled')) {
-					%= $travel->{sched_departure}->strftime('%H:%M')
-				% }
-				% else {
-					<%= $travel->{rt_departure}->strftime('%H:%M') %>
-					% if ($travel->{sched_departure} != $travel->{rt_departure}) {
-						(<%= sprintf('%+d', ($travel->{rt_departure}->epoch - $travel->{sched_departure}->epoch) / 60) %>)
-					% }
-				% }
-				<strong><%= $travel->{from_name} %></strong>
-				</a>
-			</a>
+					<li>
+						<i class="material-icons tiny" aria-label="von">play_circle_filled</i>
+
+						<a href="<%= $detail_link %>" class="unmarked">
+						% if (param('cancelled')) {
+							%= $travel->{sched_departure}->strftime('%H:%M')
+						% }
+						% else {
+							<%= $travel->{rt_departure}->strftime('%H:%M') %>
+							% if ($travel->{sched_departure} != $travel->{rt_departure}) {
+								(<%= sprintf('%+d', ($travel->{rt_departure}->epoch - $travel->{sched_departure}->epoch) / 60) %>)
+							% }
+						% }
+						<strong><%= $travel->{from_name} %></strong>
+						</a>
+					</li>
+				</ul>
 			</li>
 		% }
 		</ul>