PrivateCoffee/travelynx
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new history design

Browse source 
(cherry picked from commit 8b3ff460b5845c4ec86466715fc054705b635c20)
Signed-off-by: Birte Kristina Friesel <derf@finalrewind.org>
This commit is contained in:
Cassidy Dingenskirchen 2024-01-22 19:56:46 +01:00 committed by Birte Kristina Friesel
parent 899c7de695
commit 79d216976d
No known key found for this signature in database
GPG key ID: 19E6E524EBB177BA
3 changed files with 95 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
sass/src/common/local.scss
View file

@ -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;

112
templates/_history_trains.html.ep
View file

@ -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};
% }
<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) %>)
% }
% }
% }
<br/>
<%= $travel->{to_name} %>
</a></td>
</tr>
<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')
% }
</tbody>
</table>
% 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) %>)
% }
% }
<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) %>)
% }
% }
% }
<strong><%= $travel->{to_name} %></strong>
</a>
</li>
% }
</ul>
</div>
</div>

2
templates/landingpage.html.ep
View file

@ -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">