connections: new look consistent with departure board

sass/src/common/local.scss

@@ -86,12 +86,23 @@ ul.suggestions {
 		}
 		.dep-time::after {
 		  content: " ⊖";
+		  font-style: normal;
 		}
 	}
 }
+
+.departures.connections {
+	li {
+		grid-template-columns: 15ch 10ch 1fr;
+	}
+	.connect-platform-wrapper {
+		text-align: center;
+		span {
+			display: block;
 		}
 	}
 }
+
 .followee-checkin {
 	font-size: 0.9rem;
 	display: block;
@@ -182,10 +193,9 @@ ul.suggestions {
 
 @media screen and (max-width: 600px) {
 	.departures li {
-		.dep-line, .dep-time {
 		grid-template-columns: 10ch 1fr;
+		.dep-line, .dep-time, .connect-platform-wrapper {
 			grid-column: 1;
-			margin-right: 0.8rem;
 			text-align: center;
 		} 
 		.dep-dest {
@@ -193,4 +203,10 @@ ul.suggestions {
 			grid-row: 1 / span 2;
 		}
 	}
+	.departures.connections li {
+		grid-template-columns: 15ch 1fr;
+		.connect-platform-wrapper span {
+			display: inline;
+		}
+	}
 }

templates/_connections.html.ep

@@ -1,39 +1,48 @@
-<div><table class="striped"><tbody>
+<ul class="collection departures connections">
 	% for my $res (@{$connections}) {
 		% my ($train, $via, $via_arr, $load) = @{$res};
 		% $via_arr = $via_arr ? $via_arr->strftime('%H:%M') : q{};
-		% my $td_class = '';
+		% my $row_class = '';
 		% my $link_class = 'action-checkin';
 		% if ($train->is_cancelled) {
-			% $td_class = 'cancelled';
+			% $row_class = 'cancelled';
 			% $link_class = 'action-cancelled-from';
 		% }
 		% if ($checkin_from) {
-			<tr class="<%= $link_class %>" data-station="<%= $train->station_uic %>" data-train="<%= $train->train_id %>" data-ts="<%= ($train->sched_departure // $train->departure)->epoch %>" data-dest="<%= $via->{name} %>">
+			<li class="collection-item <%= $row_class %> <%= $link_class %>"
+			data-station="<%= $train->station_uic %>"
+			data-train="<%= $train->train_id %>"
+			data-ts="<%= ($train->sched_departure // $train->departure)->epoch %>"
+			data-dest="<%= $via->{name} %>">
 		% }
 		% else {
-			<tr>
+			<li class="collection-item">
 		% }
-			<td class="<%= $td_class %>">
+			<a class="dep-time" href="#">
-				% if ($train->platform) {
+				% if ($train->departure_is_cancelled) {
-					% if ($checkin_from) {
+					%= $train->sched_departure->strftime('%H:%M')
-						<a>Gleis <%= $train->platform %></a>
-					% }
-					% else {
-						Gleis <%= $train->platform %>
-					% }
-					<br/>
-				% }
-				% if ($checkin_from) {
-					<a><%= $train->line %></a>
 				% }
 				% else {
-					%= $train->line
+					%= $train->departure->strftime('%H:%M')
 				% }
-			</td>
+				% if ($via_arr) {
-			<td class="<%= $td_class %>">
+					→ <%= $via_arr %>
-				% if ($checkin_from) {
+				% }
-					<a><%= $via->{name} %></a>
+				% if ($train->departure_delay) {
+					%= sprintf('(%+d)', $train->departure_delay)
+				% }
+			</a>
+			<span class="connect-platform-wrapper">
+				% if ($train->platform) {
+					<span>Gleis <%= $train->platform %></span>
+				% }
+				<span class="dep-line <%= (split(/ /, $train->line))[0] %>">
+					%= $train->line
+				</span>
+			</span>
+			<span class="dep-dest">
+				% if ($train->is_cancelled) {
+					Fahrt nach <%= $via->{name} %> entfällt
 				% }
 				% else {
 					%= $via->{name}
@@ -61,22 +70,7 @@
 				% if ($train->{message_id}{70} or $train->{message_id}{71}) {
 					<i class="material-icons tiny" aria-label="Ohne WLAN">portable_wifi_off</i>
 				% }
-			</td>
+			</span>
-			<td>
+		</li>
-				% if ($train->departure_is_cancelled) {
-					%= $train->sched_departure->strftime('%H:%M')
-					⊖
-				% }
-				% else {
-					%= $train->departure->strftime('%H:%M')
-				% }
-				% if ($via_arr) {
-					→ <%= $via_arr %>
-				% }
-				% if ($train->departure_delay) {
-					%= sprintf('(%+d)', $train->departure_delay)
-				% }
-			</td>
-		</tr>
 	% }
-</tbody></table></div>
+</ul>

templates/_connections_hafas.html.ep

@@ -1,48 +1,26 @@
-<div><table class="striped"><tbody>
+<ul class="collection departures connections">
 	% for my $res (@{$connections}) {
 		% my ($train, $via, $via_arr) = @{$res};
 		% $via_arr = $via_arr ? $via_arr->strftime('%H:%M') : q{};
-		% my $td_class = '';
+		% my $row_class = '';
 		% my $link_class = 'action-checkin';
 		% if ($train->is_cancelled) {
-			% $td_class = 'cancelled';
+			% $row_class = 'cancelled';
 			% $link_class = 'action-cancelled-from';
 		% }
 		% if ($checkin_from) {
-			<tr class="<%= $link_class %>" data-station="<%= $train->station_eva %>" data-train="<%= $train->id %>" data-ts="<%= ($train->sched_datetime // $train->datetime)->epoch %>" data-dest="<%= $via->{name} %>">
+			<li class="collection-item <%= $row_class %> <%= $link_class %>"
+			data-station="<%= $train->station_eva %>"
+			data-train="<%= $train->id %>"
+			data-ts="<%= ($train->sched_datetime // $train->datetime)->epoch %>"
+			data-dest="<%= $via->{name} %>">
 		% }
 		% else {
-			<tr>
+			<li class="collection-item">
 		% }
-			<td class="<%= $td_class %>">
+			<a class="dep-time" href="#">
-				% if ($train->platform) {
-					% if ($checkin_from) {
-						<a>Gleis <%= $train->platform %></a>
-					% }
-					% else {
-						Gleis <%= $train->platform %>
-					% }
-					<br/>
-				% }
-				% if ($checkin_from) {
-					<a><%= $train->line %></a>
-				% }
-				% else {
-					%= $train->line
-				% }
-			</td>
-			<td class="<%= $td_class %>">
-				% if ($checkin_from) {
-					<a><%= $via->{name} %></a>
-				% }
-				% else {
-					%= $via->{name}
-				% }
-			</td>
-			<td>
 				% if ($train->is_cancelled) {
 					%= $train->sched_datetime->strftime('%H:%M')
-					⊖
 				% }
 				% else {
 					%= $train->datetime->strftime('%H:%M')
@@ -53,7 +31,18 @@
 				% if ($train->delay) {
 					%= sprintf('(%+d)', $train->delay)
 				% }
-			</td>
+			</a>
-		</tr>
+			<span class="connect-platform-wrapper">
+				% if ($train->platform) {
+					<span>Gleis <%= $train->platform %></span>
+				% }
+				<span class="dep-line <%= (split(/ /, $train->line))[0] %>">
+					%= $train->line
+				</span>
+			</span>
+			<span class="dep-dest">
+				%= $via->{name}
+			</span>
+		</li>
 	% }
-</tbody></table></div>
+</ul>