From 79d216976dea59e4d283ac81d65f167b3bb05329 Mon Sep 17 00:00:00 2001 From: Cassidy Dingenskirchen 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 --- sass/src/common/local.scss | 48 ++++++++++--- templates/_history_trains.html.ep | 112 ++++++++++++++---------------- templates/landingpage.html.ep | 2 +- 3 files changed, 95 insertions(+), 67 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 @@
- - - - - - - - - - - % for my $travel (@{$journeys}) { - % my $detail_link = '/journey/' . $travel->{id}; - % if (my $prefix = stash('link_prefix')) { - % $detail_link = $prefix . $travel->{id}; - % } - - - - - - + -
DatumFahrtVonNach
<%= $travel->{sched_departure}->strftime($date_format) %> - - <%= $travel->{type} %> <%= $travel->{line} // $travel->{no}%> - - - - % 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) %>) - % } - % } -
- <%= $travel->{from_name} %> - - 		- - % 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) { - timer_off - % } 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) %>) - % } - % } - % } -
- <%= $travel->{to_name} %> -
+ % 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) %>) + % } + % } + <%= $travel->{from_name} %> + + + + place + % 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) { + timer_off + % } 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) %>) + % } + % } + % } + <%= $travel->{to_name} %> + + + % } +
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 @@

Letzte Fahrten

- %= 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 {