departure board: new look and train type highlighting

2 files changed, 47 insertions, 61 deletions

diff --git a/templates/_departures_hafas.html.ep b/templates/_departures_hafas.html.ep
index 169b319..f611d8e 100644
--- a/templates/_departures_hafas.html.ep
+++ b/templates/_departures_hafas.html.ep
@@ -1,39 +1,28 @@
-<table class="striped departures">
-<tbody>
+<ul class="collection departures">
 % my $orientation_bar_shown = param('train');
 % my $now_epoch = now->epoch;
 % for my $result (@{$results}) {
-	% my $td_class = '';
+	% my $row_class = '';
 	% my $link_class = 'action-checkin';
 	% if ($result->is_cancelled) {
-		% $td_class = "cancelled";
+		% $row_class = "cancelled";
 		% $link_class = 'action-cancelled-from';
 	% }
 	% if (not $orientation_bar_shown and $result->datetime->epoch < $now_epoch) {
 		% $orientation_bar_shown = 1;
-		<tr class="now">
-			<td>
-			</td>
-			<td>
-				<strong>— Anfragezeitpunkt —</strong>
-			</td>
-			<td><strong>
+		<li class="collection-item" id="now">
+			<strong class="dep-time">
 				%= now->strftime('%H:%M')
-			</strong></td>
-		</tr>
+			</strong>
+			<strong>— Anfragezeitpunkt —</strong>
+		</li>
 	% }
-	<tr class="<%= $link_class %>" data-station="<%= $result->station_eva %>" data-train="<%= $result->id %>" data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>" data-tr="3">
-		<td>
-			<a>
-				<%= $result->line %>
-			</a>
-		</td>
-		<td class="<%= $td_class %>">
-			<a>
-				<%= $result->destination %>
-			</a>
-		</td>
-		<td class="<%= $td_class %>">
+	<li class="collection-item <%= $link_class %> <%= $row_class %>"
+		data-station="<%= $result->station_eva %>"
+		data-train="<%= $result->id %>"
+		data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>"
+	>
+		<span class="dep-time">
 			%= $result->datetime->strftime('%H:%M')
 			% if ($result->delay) {
 				(<%= sprintf('%+d', $result->delay) %>)
@@ -41,8 +30,14 @@
 			% 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>
 			% }
-		</td>
-	</tr>
+			</span>
+			<a class="dep-line <%= (split(/ /, $result->line))[0] %>">
+				%= $result->line
+			</a>
+			<span class="dep-dest">
+				%= $result->destination
+				% }
+			</span>
+	</li>
 % }
-</tbody>
-</table>
+</ul>
diff --git a/templates/_departures_iris.html.ep b/templates/_departures_iris.html.ep
index c8dd834..237757c 100644
--- a/templates/_departures_iris.html.ep
+++ b/templates/_departures_iris.html.ep
@@ -1,42 +1,28 @@
-<table class="striped departures">
-<tbody>
+<ul class="collection departures">
 % my $orientation_bar_shown = param('train');
 % my $now_epoch = now->epoch;
 % for my $result (@{$results}) {
-	% my $td_class = '';
+	% my $row_class = '';
 	% my $link_class = 'action-checkin';
 	% if ($result->departure_is_cancelled) {
-		% $td_class = "cancelled";
+		% $row_class = "cancelled";
 		% $link_class = 'action-cancelled-from';
 	% }
 	% if (not $orientation_bar_shown and $result->departure->epoch < $now_epoch) {
 		% $orientation_bar_shown = 1;
-		<tr class="now">
-			<td>
-			</td>
-			<td>
-				<strong>— Anfragezeitpunkt —</strong>
-			</td>
-			<td><strong>
+		<li class="collection-item" id="now">
+			<strong class="dep-time">
 				%= now->strftime('%H:%M')
-			</strong></td>
-		</tr>
+			</strong>
+			<strong>— Anfragezeitpunkt —</strong>
+		</li>
 	% }
-	<tr class="<%= $link_class %>" data-station="<%= $result->station_uic %>" data-train="<%= $result->train_id %>" data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>" data-tr="3">
-		<td>
-			<a>
-				<%= $result->line %>
-			</a>
-		</td>
-		<td class="<%= $td_class %>">
-			<a>
-				<%= $result->destination %>
-			</a>
-			% for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) {
-				<br/>(<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>)
-			% }
-		</td>
-		<td class="<%= $td_class %>">
+	<li class="collection-item <%= $link_class %> <%= $row_class %>"
+		data-station="<%= $result->station_uic %>"
+		data-train="<%= $result->train_id %>"
+		data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>"
+	>
+		<span class="dep-time">
 			% if ($result->departure_hidden) {
 				(<%= $result->departure->strftime('%H:%M') %>)
 			% }
@@ -49,8 +35,13 @@
 			% 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>
 			% }
-		</td>
-	</tr>
+			</span>
+			<a class="dep-line <%= (split(/ /, $result->line))[0] %>">
+				%= $result->line
+			</a>
+			<span class="dep-dest">
+				%= $result->destination
+			</span>
+	</li>
 % }
-</tbody>
-</table>
+</ul>