Merge branch 'deingithub-dep-board-ui'

5 files changed, 146 insertions, 152 deletions

diff --git a/templates/_connections.html.ep b/templates/_connections.html.ep
index cd64150..97c53e0 100644
--- a/templates/_connections.html.ep
+++ b/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 %>">
-				% if ($train->platform) {
-					% if ($checkin_from) {
-						<a>Gleis <%= $train->platform %></a>
-					% }
-					% else {
-						Gleis <%= $train->platform %>
-					% }
-					<br/>
-				% }
-				% if ($checkin_from) {
-					<a><%= $train->line %></a>
+			<a class="dep-time" href="#">
+				% if ($train->departure_is_cancelled) {
+					%= $train->sched_departure->strftime('%H:%M')
 				% }
 				% else {
-					%= $train->line
+					%= $train->departure->strftime('%H:%M')
+				% }
+				% if ($via_arr) {
+					→ <%= $via_arr %>
 				% }
-			</td>
-			<td class="<%= $td_class %>">
-				% 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 <%= $train->type // q{} %>">
+					%= $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>
-			<td>
-				% 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>
+			</span>
+		</li>
 	% }
-</tbody></table></div>
+</ul>
diff --git a/templates/_connections_hafas.html.ep b/templates/_connections_hafas.html.ep
index 48a5380..d2b35ce 100644
--- a/templates/_connections_hafas.html.ep
+++ b/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 %>">
-				% 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>
+			<a class="dep-time" href="#">
 				% 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>
-		</tr>
+			</a>
+			<span class="connect-platform-wrapper">
+				% if ($train->platform) {
+					<span>Gleis <%= $train->platform %></span>
+				% }
+				<span class="dep-line <%= $train->type // q{} %>">
+					%= $train->line
+				</span>
+			</span>
+			<span class="dep-dest">
+				%= $via->{name}
+			</span>
+		</li>
 	% }
-</tbody></table></div>
+</ul>
diff --git a/templates/_departures_hafas.html.ep b/templates/_departures_hafas.html.ep
index 169b319..9e4d7a4 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 %>"
+	>
+		<a class="dep-time" href="#">
 			%= $result->datetime->strftime('%H:%M')
 			% if ($result->delay) {
 				(<%= sprintf('%+d', $result->delay) %>)
@@ -41,8 +30,24 @@
 			% 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>
+		</a>
+		<span class="dep-line <%= $result->type // q{} %>">
+			%= $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" aria-label="Eine Person, der du folgst, ist hier eingecheckt">people</i>
+						<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
+					</span>
+				% }
+			% }
+		</span>
+	</li>
 % }
-</tbody>
-</table>
+</ul>
diff --git a/templates/_departures_iris.html.ep b/templates/_departures_iris.html.ep
index c8dd834..d96fd37 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 %>"
+	>
+		<a class="dep-time" href="#">
 			% if ($result->departure_hidden) {
 				(<%= $result->departure->strftime('%H:%M') %>)
 			% }
@@ -49,8 +35,24 @@
 			% 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>
+			</a>
+			<span class="dep-line <%= $result->type // q{} %>">
+				%= $result->line
+			</span>
+			<span class="dep-dest">
+				% if ($result->departure_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" aria-label="Eine Person, der du folgst, ist hier eingecheckt">people</i>
+							<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
+						</span>
+					% }
+				% }
+			</span>
+	</li>
 % }
-</tbody>
-</table>
+</ul>
diff --git a/templates/departures.html.ep b/templates/departures.html.ep
index 021e9ca..039ec28 100644
--- a/templates/departures.html.ep
+++ b/templates/departures.html.ep
@@ -1,24 +1,28 @@
 <div class="row">
-	<div class="col s12 center-align">
-		<i class="tiny material-icons "><%= param('hafas') ? 'directions' : 'train' %></i>
-		<b><%= $station %></b>
+	<div class="col s12">
+		<h2>
+			<i class="material-icons "  aria-hidden="true"><%= param('hafas') ? 'directions' : 'train' %></i>
+			<%= $station %>
+		</h2>
 		% for my $related_station (sort { $a->{name} cmp $b->{name} } @{$related_stations}) {
-			<br/>+ <%= $related_station->{name} %>
+			+ <%= $related_station->{name} %> <br/>
 		% }
 	</div>
 </div>
-% if ($api_link) {
-	<div class="row">
-		<div class="col s12 center-align">
-			% if (param('hafas')) {
-				<a href="<%= $api_link %>">zum Schienenverkehr</a>
-			% }
-			% else {
-				<a href="<%= $api_link %>">zum Nahverkehr</a>
-			% }
-		</div>
+<div class="row">
+	<div class="col s12">
+	% if ($api_link) {
+	% if (param('hafas')) {
+		<a href="<%= $api_link %>" class="btn-small"><i class="material-icons left"  aria-hidden="true">train</i>zum Schienenverkehr</a>
+	% }
+	% else {
+		<a href="<%= $api_link %>" class="btn-small"><i class="material-icons left"  aria-hidden="true">directions</i>zum Nahverkehr</a>
+	% }
+	% }
+	<a class="btn-small" href="#now"><i class="material-icons left" aria-hidden="true">vertical_align_center</i>Jetzt</a>
 	</div>
-% }
+</div>
+
 % my $have_connections = 0;
 % if ($user_status->{checked_in}) {
 	<div class="row">
@@ -49,7 +53,7 @@
 							<i class="material-icons left" aria-hidden="true">undo</i> Rückgängig
 						</a>
 						<a class="action-checkout right" data-station="<%= $eva %>" data-force="1">
-							<i class="material-icons left">gps_off</i>
+							<i class="material-icons left" aria-hidden="true">gps_off</i>
 							Hier auschecken
 						</a>
 					% }