mirror of
https://github.com/derf/travelynx
synced 2024-11-10 06:54:17 +00:00
departure board: some more styling consistency
This commit is contained in:
parent
6686a16bbf
commit
0504f1adcd
3 changed files with 44 additions and 26 deletions
|
@ -71,7 +71,7 @@ ul.suggestions {
|
|||
.departures li {
|
||||
transition: background .3s;
|
||||
display: grid;
|
||||
grid-template-columns: 10ch 11ch 1fr;
|
||||
grid-template-columns: 10ch 10ch 1fr;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background-color: $departures-highlight-color;
|
||||
|
@ -84,11 +84,11 @@ ul.suggestions {
|
|||
border: 1px solid;
|
||||
color: $off-black;
|
||||
}
|
||||
.dep-dest::before {
|
||||
content: "Fahrt nach";
|
||||
.dep-time::after {
|
||||
content: " ⊖";
|
||||
}
|
||||
.dep-dest::after {
|
||||
content: "entfällt";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -107,8 +107,12 @@ ul.suggestions {
|
|||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.departures .dep-time {
|
||||
color: $off-black;
|
||||
}
|
||||
.departures .dep-dest {
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
.departures .dep-line {
|
||||
text-align: center;
|
||||
padding: .2rem;
|
||||
|
@ -118,8 +122,10 @@ ul.suggestions {
|
|||
display: inline-block;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
margin-right: 0.8rem;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
min-width: 6ch;
|
||||
margin: 0 auto;
|
||||
|
||||
&.Bus, &.RUF, &.AST {
|
||||
background-color: #a3167e;
|
||||
|
@ -176,8 +182,8 @@ ul.suggestions {
|
|||
|
||||
@media screen and (max-width: 600px) {
|
||||
.departures li {
|
||||
grid-template-columns: 11ch 1fr;
|
||||
.dep-line, .dep-time {
|
||||
grid-template-columns: 10ch 1fr;
|
||||
grid-column: 1;
|
||||
margin-right: 0.8rem;
|
||||
text-align: center;
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
data-train="<%= $result->id %>"
|
||||
data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>"
|
||||
>
|
||||
<span class="dep-time">
|
||||
<a class="dep-time" href="#">
|
||||
%= $result->datetime->strftime('%H:%M')
|
||||
% if ($result->delay) {
|
||||
(<%= sprintf('%+d', $result->delay) %>)
|
||||
|
@ -30,18 +30,24 @@
|
|||
% 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>
|
||||
% }
|
||||
</span>
|
||||
<a class="dep-line <%= (split(/ /, $result->line))[0] %>">
|
||||
%= $result->line
|
||||
</a>
|
||||
<span class="dep-dest">
|
||||
</a>
|
||||
<span class="dep-line <%= (split(/ /, $result->line))[0] %>">
|
||||
%= $result->line
|
||||
</span>
|
||||
<span class="dep-dest">
|
||||
% if ($result->is_cancelled) {
|
||||
Fahrt nach <%= $result->destination %> entfällt
|
||||
% }
|
||||
% else {
|
||||
%= $result->destination
|
||||
% for my $checkin (@{$checkin_by_train->{$result->id} // []}) {
|
||||
<span class="followee-checkin">
|
||||
<i class="material-icons tiny">people</i> <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
|
||||
<i class="material-icons tiny">people</i>
|
||||
<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
|
||||
</span>
|
||||
% }
|
||||
</span>
|
||||
% }
|
||||
</span>
|
||||
</li>
|
||||
% }
|
||||
</ul>
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
data-train="<%= $result->train_id %>"
|
||||
data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>"
|
||||
>
|
||||
<span class="dep-time">
|
||||
<a class="dep-time" href="#">
|
||||
% if ($result->departure_hidden) {
|
||||
(<%= $result->departure->strftime('%H:%M') %>)
|
||||
% }
|
||||
|
@ -35,16 +35,22 @@
|
|||
% 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>
|
||||
% }
|
||||
</span>
|
||||
<a class="dep-line <%= (split(/ /, $result->line))[0] %>">
|
||||
%= $result->line
|
||||
</a>
|
||||
<span class="dep-line <%= (split(/ /, $result->line))[0] %>">
|
||||
%= $result->line
|
||||
</span>
|
||||
<span class="dep-dest">
|
||||
%= $result->destination
|
||||
% for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) {
|
||||
<span class="followee-checkin">
|
||||
<i class="material-icons tiny">people</i> <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
|
||||
</span>
|
||||
% if ($result->is_cancelled) {
|
||||
Fahrt nach <%= $result->destination %> entfällt
|
||||
% }
|
||||
% else {
|
||||
%= $result->destination
|
||||
% for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) {
|
||||
<span class="followee-checkin">
|
||||
<i class="material-icons tiny">people</i>
|
||||
<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
|
||||
</span>
|
||||
% }
|
||||
% }
|
||||
</span>
|
||||
</li>
|
||||
|
|
Loading…
Reference in a new issue