departure board: new look and train type highlighting
This commit is contained in:
Cassidy Dingenskirchen
parent
6a0f20e29f
commit
f1d3d3ed93
5 changed files with 171 additions and 68 deletions
|
|
@ -21,10 +21,6 @@
|
|||
color: #f5c4ce !important;
|
||||
}
|
||||
|
||||
td.cancelled {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.wagons span {
|
||||
margin-right: 0.5ex;
|
||||
color: #808080;
|
||||
|
|
@ -72,7 +68,123 @@ ul.suggestions {
|
|||
}
|
||||
}
|
||||
|
||||
table.departures tr.now td {
|
||||
padding-top: 2em;
|
||||
padding-bottom: 2em;
|
||||
.departures li {
|
||||
transition: background .3s;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,3 +21,6 @@ $table-striped-color: color('grey', 'darken-4');
|
|||
$button-flat-color: $off-black;
|
||||
$card-bg-color: color('grey', 'darken-4');
|
||||
$card-link-color: $link-color;
|
||||
|
||||
$departures-highlight-color: $table-striped-color;
|
||||
$departures-cancelled-color: color('red', 'darken-3');
|
||||
|
|
|
|||
|
|
@ -6,3 +6,5 @@ $collection-link-color: color('shades', 'black');
|
|||
$card-bg-color: color('blue-grey', 'lighten-5');
|
||||
$inactive-color: color('grey', 'darken-2');
|
||||
$input-label-color: color('shades', 'black');
|
||||
$departures-highlight-color: color('grey', 'lighten-3');
|
||||
$departures-cancelled-color: color('red', 'lighten-4');
|
||||
|
|
|
|||
|
|
@ -1,39 +1,28 @@
|
|||
<table class="striped departures">
|
||||
<tbody>
|
||||
<ul class="collection departures">
|
||||
% my $orientation_bar_shown = param('train');
|
||||
% my $now_epoch = now->epoch;
|
||||
% for my $result (@{$results}) {
|
||||
% my $td_class = '';
|
||||
% my $row_class = '';
|
||||
% my $link_class = 'action-checkin';
|
||||
% if ($result->is_cancelled) {
|
||||
% $td_class = "cancelled";
|
||||
% $row_class = "cancelled";
|
||||
% $link_class = 'action-cancelled-from';
|
||||
% }
|
||||
% if (not $orientation_bar_shown and $result->datetime->epoch < $now_epoch) {
|
||||
% $orientation_bar_shown = 1;
|
||||
<tr class="now">
|
||||
<td>
|
||||
</td>
|
||||
<td>
|
||||
<strong>— Anfragezeitpunkt —</strong>
|
||||
</td>
|
||||
<td><strong>
|
||||
<li class="collection-item" id="now">
|
||||
<strong class="dep-time">
|
||||
%= now->strftime('%H:%M')
|
||||
</strong></td>
|
||||
</tr>
|
||||
</strong>
|
||||
<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">
|
||||
<td>
|
||||
<a>
|
||||
<%= $result->line %>
|
||||
</a>
|
||||
</td>
|
||||
<td class="<%= $td_class %>">
|
||||
<a>
|
||||
<%= $result->destination %>
|
||||
</a>
|
||||
</td>
|
||||
<td class="<%= $td_class %>">
|
||||
<li class="collection-item <%= $link_class %> <%= $row_class %>"
|
||||
data-station="<%= $result->station_eva %>"
|
||||
data-train="<%= $result->id %>"
|
||||
data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>"
|
||||
>
|
||||
<span class="dep-time">
|
||||
%= $result->datetime->strftime('%H:%M')
|
||||
% if ($result->delay) {
|
||||
(<%= sprintf('%+d', $result->delay) %>)
|
||||
|
|
@ -41,8 +30,14 @@
|
|||
% 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>
|
||||
% }
|
||||
</td>
|
||||
</tr>
|
||||
</span>
|
||||
<a class="dep-line <%= (split(/ /, $result->line))[0] %>">
|
||||
%= $result->line
|
||||
</a>
|
||||
<span class="dep-dest">
|
||||
%= $result->destination
|
||||
% }
|
||||
</span>
|
||||
</li>
|
||||
% }
|
||||
</tbody>
|
||||
</table>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,28 @@
|
|||
<table class="striped departures">
|
||||
<tbody>
|
||||
<ul class="collection departures">
|
||||
% my $orientation_bar_shown = param('train');
|
||||
% my $now_epoch = now->epoch;
|
||||
% for my $result (@{$results}) {
|
||||
% my $td_class = '';
|
||||
% my $row_class = '';
|
||||
% my $link_class = 'action-checkin';
|
||||
% if ($result->departure_is_cancelled) {
|
||||
% $td_class = "cancelled";
|
||||
% $row_class = "cancelled";
|
||||
% $link_class = 'action-cancelled-from';
|
||||
% }
|
||||
% if (not $orientation_bar_shown and $result->departure->epoch < $now_epoch) {
|
||||
% $orientation_bar_shown = 1;
|
||||
<tr class="now">
|
||||
<td>
|
||||
</td>
|
||||
<td>
|
||||
<strong>— Anfragezeitpunkt —</strong>
|
||||
</td>
|
||||
<td><strong>
|
||||
<li class="collection-item" id="now">
|
||||
<strong class="dep-time">
|
||||
%= now->strftime('%H:%M')
|
||||
</strong></td>
|
||||
</tr>
|
||||
</strong>
|
||||
<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">
|
||||
<td>
|
||||
<a>
|
||||
<%= $result->line %>
|
||||
</a>
|
||||
</td>
|
||||
<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 %>">
|
||||
<li class="collection-item <%= $link_class %> <%= $row_class %>"
|
||||
data-station="<%= $result->station_uic %>"
|
||||
data-train="<%= $result->train_id %>"
|
||||
data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>"
|
||||
>
|
||||
<span class="dep-time">
|
||||
% if ($result->departure_hidden) {
|
||||
(<%= $result->departure->strftime('%H:%M') %>)
|
||||
% }
|
||||
|
|
@ -49,8 +35,13 @@
|
|||
% 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>
|
||||
% }
|
||||
</td>
|
||||
</tr>
|
||||
</span>
|
||||
<a class="dep-line <%= (split(/ /, $result->line))[0] %>">
|
||||
%= $result->line
|
||||
</a>
|
||||
<span class="dep-dest">
|
||||
%= $result->destination
|
||||
</span>
|
||||
</li>
|
||||
% }
|
||||
</tbody>
|
||||
</table>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in a new issue