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

departure board: new look and train type highlighting

Browse source
This commit is contained in:
Cassidy Dingenskirchen 2023-10-22 14:43:05 +02:00
parent 6a0f20e29f
commit f1d3d3ed93
No known key found for this signature in database
GPG key ID: 14FE9712CC42FE8B
5 changed files with 171 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,10 +21,6 @@
color: #f5c4ce !important; color: #f5c4ce !important;
} }
td.cancelled {
text-decoration: line-through;
}
.wagons span { .wagons span {
margin-right: 0.5ex; margin-right: 0.5ex;
color: #808080; color: #808080;
@ -72,7 +68,123 @@ ul.suggestions {
} }
} }
table.departures tr.now td { .departures li {
padding-top: 2em; transition: background .3s;
padding-bottom: 2em; display: grid;
grid-template-columns: 10ch 11ch 1fr;
align-items: center;
&:hover {
background-color: $departures-highlight-color;
}
&.cancelled {
background-color: $departures-cancelled-color;
font-style: italic;
.dep-line {
background-color: transparent;
border: 1px solid;
color: $off-black;
}
.dep-dest::before {
content: "Fahrt nach";
}
.dep-dest::after {
content: "entfällt";
}
}
}
.followee-checkin {
font-size: 0.9rem;
display: block;
i.material-icons {
vertical-align: middle;
}
}
.departures #now {
background-color: $departures-highlight-color;
padding: 2rem 20px;
grid-template-columns: 10ch 1fr;
strong {
font-weight: bold;
}
}
.departures .dep-line {
text-align: center;
padding: .2rem;
color: white;
background: color('grey', 'darken-3');
border-radius: .2rem;
display: inline-block;
font-weight: 600;
line-height: 1;
margin-right: 0.8rem;
height: fit-content;
&.Bus, &.RUF, &.AST {
background-color: #a3167e;
border-radius: 5rem;
padding: .2rem .5rem;
}
&.STR {
background-color: #c5161c;
border-radius: 5rem;
padding: .2rem .5rem;
}
&.S, &.RS, &.RER, &.SKW {
background-color: #008d4f;
border-radius: 5rem;
padding: .2rem .5rem;
}
&.U, &.STB, &.M {
background-color: #014e8d;
border-radius: 5rem;
padding: .2rem .5rem;
}
&.RE, &.IRE {
background-color: #ff4f00;
}
&.RB, &.MEX, &.TER {
background-color: #1f4a87;
}
// DE
&.IC, &.ICE, &.EC, &.ECE, &.D,
// CH
&.IR,
// FR
&.TGV, &.OGV, &.EST,
// PL
&.TLK, &.EIC {
background-color: #ff0404;
font-weight: 900;
font-style: italic;
padding: .2rem;
}
&.RJ, &.RJX {
background-color: #c63131;
}
&.NJ, &.EN {
background-color: #29255b;
}
&.WB {
background-color: #2e85ce;
}
&.FLX {
background-color: #71d800;
}
}
@media screen and (max-width: 600px) {
.departures li {
grid-template-columns: 11ch 1fr;
.dep-line, .dep-time {
grid-column: 1;
margin-right: 0.8rem;
text-align: center;
}
.dep-dest {
grid-column: 2;
grid-row: 1 / span 2;
}
}
} }

3
sass/src/dark/_variables.scss
View file

@ -21,3 +21,6 @@ $table-striped-color: color('grey', 'darken-4');
$button-flat-color: $off-black; $button-flat-color: $off-black;
$card-bg-color: color('grey', 'darken-4'); $card-bg-color: color('grey', 'darken-4');
$card-link-color: $link-color; $card-link-color: $link-color;
$departures-highlight-color: $table-striped-color;
$departures-cancelled-color: color('red', 'darken-3');

2
sass/src/light/_variables.scss
View file

@ -6,3 +6,5 @@ $collection-link-color: color('shades', 'black');
$card-bg-color: color('blue-grey', 'lighten-5'); $card-bg-color: color('blue-grey', 'lighten-5');
$inactive-color: color('grey', 'darken-2'); $inactive-color: color('grey', 'darken-2');
$input-label-color: color('shades', 'black'); $input-label-color: color('shades', 'black');
$departures-highlight-color: color('grey', 'lighten-3');
$departures-cancelled-color: color('red', 'lighten-4');

53
templates/_departures_hafas.html.ep
View file

@ -1,39 +1,28 @@
<table class="striped departures"> <ul class="collection departures">
<tbody>
% my $orientation_bar_shown = param('train'); % my $orientation_bar_shown = param('train');
% my $now_epoch = now->epoch; % my $now_epoch = now->epoch;
% for my $result (@{$results}) { % for my $result (@{$results}) {
% my $td_class = ''; % my $row_class = '';
% my $link_class = 'action-checkin'; % my $link_class = 'action-checkin';
% if ($result->is_cancelled) { % if ($result->is_cancelled) {
% $td_class = "cancelled"; % $row_class = "cancelled";
% $link_class = 'action-cancelled-from'; % $link_class = 'action-cancelled-from';
% } % }
% if (not $orientation_bar_shown and $result->datetime->epoch < $now_epoch) { % if (not $orientation_bar_shown and $result->datetime->epoch < $now_epoch) {
% $orientation_bar_shown = 1; % $orientation_bar_shown = 1;
<tr class="now"> <li class="collection-item" id="now">
<td> <strong class="dep-time">
</td>
<td>
<strong>— Anfragezeitpunkt —</strong>
</td>
<td><strong>
%= now->strftime('%H:%M') %= now->strftime('%H:%M')
</strong></td> </strong>
</tr> <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"> <li class="collection-item <%= $link_class %> <%= $row_class %>"
<td> data-station="<%= $result->station_eva %>"
<a> data-train="<%= $result->id %>"
<%= $result->line %> data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>"
</a> >
</td> <span class="dep-time">
<td class="<%= $td_class %>">
<a>
<%= $result->destination %>
</a>
</td>
<td class="<%= $td_class %>">
%= $result->datetime->strftime('%H:%M') %= $result->datetime->strftime('%H:%M')
% if ($result->delay) { % if ($result->delay) {
(<%= sprintf('%+d', $result->delay) %>) (<%= sprintf('%+d', $result->delay) %>)
@ -41,8 +30,14 @@
% elsif (not defined $result->delay and not $result->is_cancelled) { % 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> <i class="material-icons" aria-label="Keine Echtzeitdaten vorhanden" style="font-size: 16px;">gps_off</i>
% } % }
</td> </span>
</tr> <a class="dep-line <%= (split(/ /, $result->line))[0] %>">
%= $result->line
</a>
<span class="dep-dest">
%= $result->destination
% }
</span>
</li>
% } % }
</tbody> </ul>
</table>

55
templates/_departures_iris.html.ep
View file

@ -1,42 +1,28 @@
<table class="striped departures"> <ul class="collection departures">
<tbody>
% my $orientation_bar_shown = param('train'); % my $orientation_bar_shown = param('train');
% my $now_epoch = now->epoch; % my $now_epoch = now->epoch;
% for my $result (@{$results}) { % for my $result (@{$results}) {
% my $td_class = ''; % my $row_class = '';
% my $link_class = 'action-checkin'; % my $link_class = 'action-checkin';
% if ($result->departure_is_cancelled) { % if ($result->departure_is_cancelled) {
% $td_class = "cancelled"; % $row_class = "cancelled";
% $link_class = 'action-cancelled-from'; % $link_class = 'action-cancelled-from';
% } % }
% if (not $orientation_bar_shown and $result->departure->epoch < $now_epoch) { % if (not $orientation_bar_shown and $result->departure->epoch < $now_epoch) {
% $orientation_bar_shown = 1; % $orientation_bar_shown = 1;
<tr class="now"> <li class="collection-item" id="now">
<td> <strong class="dep-time">
</td>
<td>
<strong>— Anfragezeitpunkt —</strong>
</td>
<td><strong>
%= now->strftime('%H:%M') %= now->strftime('%H:%M')
</strong></td> </strong>
</tr> <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"> <li class="collection-item <%= $link_class %> <%= $row_class %>"
<td> data-station="<%= $result->station_uic %>"
<a> data-train="<%= $result->train_id %>"
<%= $result->line %> data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>"
</a> >
</td> <span class="dep-time">
<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 %>">
% if ($result->departure_hidden) { % if ($result->departure_hidden) {
(<%= $result->departure->strftime('%H:%M') %>) (<%= $result->departure->strftime('%H:%M') %>)
% } % }
@ -49,8 +35,13 @@
% elsif (not $result->has_realtime and $result->start->epoch < $now_epoch) { % 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> <i class="material-icons" aria-label="Keine Echtzeitdaten vorhanden" style="font-size: 16px;">gps_off</i>
% } % }
</td> </span>
</tr> <a class="dep-line <%= (split(/ /, $result->line))[0] %>">
%= $result->line
</a>
<span class="dep-dest">
%= $result->destination
</span>
</li>
% } % }
</tbody> </ul>
</table>