new history design

(cherry picked from commit 8b3ff460b5845c4ec86466715fc054705b635c20)
Signed-off-by: Birte Kristina Friesel <derf@finalrewind.org>

3 files changed, 93 insertions, 65 deletions

diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss
index 0cdc6bd..3dd422d 100644
--- a/sass/src/common/local.scss
+++ b/sass/src/common/local.scss
@@ -72,17 +72,14 @@ ul.suggestions {
 	}
 }
 
-
-.departures li {
+.collection.departures li, .collection.history li {
 	transition: background .3s;
 	display: grid;
-	grid-template-columns: 10ch 10ch 1fr;
-	align-items: center;
-	&:not(#now):hover, &:focus-within {
+	&:not(#now,.history-date-change ):hover, &:focus-within {
 		background-color: $departures-highlight-color;
 		outline: 2px solid $link-color;
 	}
- 	&.cancelled {
+	&.cancelled {
 		background-color: $departures-cancelled-color;
 		font-style: italic;
 		.dep-line {
@@ -95,6 +92,11 @@ ul.suggestions {
 		  font-style: normal;
 		}
 	}
+}
+
+.collection.departures li {
+	grid-template-columns: 10ch 10ch 1fr;
+	align-items: center;
 	&#now {
 		background-color: $departures-highlight-color;
 		padding: 2rem 20px;
@@ -104,6 +106,36 @@ ul.suggestions {
 		}
 	}
 }
+.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;
+		}
+	}
+	.destination::before {
+		content: ' ';
+		display: block;
+		border-left: 2px dotted $off-black;
+		height: 1rem;
+		position: absolute;
+		margin-left: calc( 0.5rem - 1px );
+		margin-top: -0.5rem;
+	}
+	&.history-date-change {
+		display: block;
+		font-weight: bold;
+	}
+}
 
 
 .departures .dep-time {
@@ -204,12 +236,12 @@ ul.suggestions {
 
 
 @media screen and (max-width: 600px) {
-	.departures li {
+	.collection.departures li {
 		grid-template-columns: 10ch 1fr;
 		.dep-line, .dep-time, .connect-platform-wrapper {
 			grid-column: 1;
 			text-align: center;
-		} 
+		}
 		.dep-dest {
 			grid-column: 2;
 			grid-row: 1 / span 2;
diff --git a/templates/_history_trains.html.ep b/templates/_history_trains.html.ep
index 51f776c..be35a72 100644
--- a/templates/_history_trains.html.ep
+++ b/templates/_history_trains.html.ep
@@ -1,63 +1,59 @@
 <div class="row">
 	<div class="col s12">
-		<table class="striped">
-			<thead>
-				<tr>
-					<th>Datum</th>
-					<th>Fahrt</th>
-					<th>Von</th>
-					<th>Nach</th>
-				</tr>
-			</thead>
-			<tbody>
-				% for my $travel (@{$journeys}) {
-					% my $detail_link = '/journey/' . $travel->{id};
-					% if (my $prefix = stash('link_prefix')) {
-						% $detail_link = $prefix . $travel->{id};
+		<ul class="collection history">
+		% my $olddate = '';
+		% for my $travel (@{$journeys}) {
+			% my $detail_link = '/journey/' . $travel->{id};
+			% if (my $prefix = stash('link_prefix')) {
+				% $detail_link = $prefix . $travel->{id};
+			% }
+			% my $date = $travel->{sched_departure}->strftime($date_format);
+			% if ($olddate ne $date) {
+				<li class="collection-item history-date-change">
+					<b><%= $date %></b>
+				</li>
+				% $olddate = $date
+			% }
+			<li class="collection-item">
+				<a href="<%= $detail_link %>">
+					<span class="dep-line <%= $travel->{type} // q{} %>">
+						<%= $travel->{type} %> <%= $travel->{line}  // $travel->{no}%>
+					</span>
+				</a>
+
+				<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) %>)
 					% }
-					<tr>
-						<td><%= $travel->{sched_departure}->strftime($date_format) %></td>
-						<td><a href="<%= $detail_link %>">
-						<span class="dep-line <%= $travel->{type} // q{} %>">
-							<%= $travel->{type} %> <%= $travel->{line}  // $travel->{no}%>
-						</span>
-						</a></td>
-						<td>
-						<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) %>)
-							% }
-						% }
-						<br/>
-						<%= $travel->{from_name} %>
-						</a>
-						</td>
-						<td>
-						<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->{from_name} %></strong>
+				</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) %>)
 						% }
-						<br/>
-						<%= $travel->{to_name} %>
-						</a></td>
-					</tr>
+					% }
 				% }
-			</tbody>
-		</table>
+				<strong><%= $travel->{to_name} %></strong>
+			</a>
+			</li>
+		% }
+		</ul>
 	</div>
 </div>
diff --git a/templates/landingpage.html.ep b/templates/landingpage.html.ep
index b42777d..45bfb21 100644
--- a/templates/landingpage.html.ep
+++ b/templates/landingpage.html.ep
@@ -76,7 +76,7 @@
 		</div>
 	</div>
 	<h2 style="margin-left: 0.75rem;">Letzte Fahrten</h2>
-	%= include '_history_trains', date_format => '%d.%m', journeys => [journeys->get(uid => current_user->{id}, limit => 5, with_datetime => 1)];
+	%= include '_history_trains', date_format => '%d.%m.%Y', journeys => [journeys->get(uid => current_user->{id}, limit => 5, with_datetime => 1)];
 % }
 % else {
 	<div class="row">