From 79d216976dea59e4d283ac81d65f167b3bb05329 Mon Sep 17 00:00:00 2001
From: Cassidy Dingenskirchen <admin@15318.de>
Date: Mon, 22 Jan 2024 19:56:46 +0100
Subject: [PATCH] new history design
(cherry picked from commit 8b3ff460b5845c4ec86466715fc054705b635c20)
Signed-off-by: Birte Kristina Friesel <derf@finalrewind.org>
---
sass/src/common/local.scss | 48 ++++++++++---
templates/_history_trains.html.ep | 108 ++++++++++++++----------------
templates/landingpage.html.ep | 2 +-
3 files changed, 93 insertions(+), 65 deletions(-)
diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss
index 0cdc6bd3..3dd422d8 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 51f776cf..be35a72d 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 b42777d0..45bfb210 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">
--
GitLab