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

departure board: some more styling consistency

Browse source
This commit is contained in:
Cassidy Dingenskirchen 2023-10-22 16:16:41 +02:00
parent 6686a16bbf
commit 0504f1adcd
No known key found for this signature in database
GPG key ID: 14FE9712CC42FE8B
3 changed files with 44 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -71,7 +71,7 @@ ul.suggestions {
.departures li { .departures li {
transition: background .3s; transition: background .3s;
display: grid; display: grid;
grid-template-columns: 10ch 11ch 1fr; grid-template-columns: 10ch 10ch 1fr;
align-items: center; align-items: center;
&:hover { &:hover {
background-color: $departures-highlight-color; background-color: $departures-highlight-color;
@ -84,11 +84,11 @@ ul.suggestions {
border: 1px solid; border: 1px solid;
color: $off-black; color: $off-black;
} }
.dep-dest::before { .dep-time::after {
content: "Fahrt nach"; content: " ⊖";
} }
.dep-dest::after { }
content: "entfällt"; }
} }
} }
} }
@ -107,8 +107,12 @@ ul.suggestions {
font-weight: bold; font-weight: bold;
} }
} }
.departures .dep-time {
color: $off-black;
}
.departures .dep-dest {
margin-left: 0.8rem;
}
.departures .dep-line { .departures .dep-line {
text-align: center; text-align: center;
padding: .2rem; padding: .2rem;
@ -118,8 +122,10 @@ ul.suggestions {
display: inline-block; display: inline-block;
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
margin-right: 0.8rem;
height: fit-content; height: fit-content;
width: fit-content;
min-width: 6ch;
margin: 0 auto;
&.Bus, &.RUF, &.AST { &.Bus, &.RUF, &.AST {
background-color: #a3167e; background-color: #a3167e;
@ -176,8 +182,8 @@ ul.suggestions {
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.departures li { .departures li {
grid-template-columns: 11ch 1fr;
.dep-line, .dep-time { .dep-line, .dep-time {
grid-template-columns: 10ch 1fr;
grid-column: 1; grid-column: 1;
margin-right: 0.8rem; margin-right: 0.8rem;
text-align: center; text-align: center;

16
templates/_departures_hafas.html.ep
View file

@ -22,7 +22,7 @@
data-train="<%= $result->id %>" data-train="<%= $result->id %>"
data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>" data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>"
> >
<span class="dep-time"> <a class="dep-time" href="#">
%= $result->datetime->strftime('%H:%M') %= $result->datetime->strftime('%H:%M')
% if ($result->delay) { % if ($result->delay) {
(<%= sprintf('%+d', $result->delay) %>) (<%= sprintf('%+d', $result->delay) %>)
@ -30,17 +30,23 @@
% 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>
% } % }
</span>
<a class="dep-line <%= (split(/ /, $result->line))[0] %>">
%= $result->line
</a> </a>
<span class="dep-line <%= (split(/ /, $result->line))[0] %>">
%= $result->line
</span>
<span class="dep-dest"> <span class="dep-dest">
% if ($result->is_cancelled) {
Fahrt nach <%= $result->destination %> entfällt
% }
% else {
%= $result->destination %= $result->destination
% for my $checkin (@{$checkin_by_train->{$result->id} // []}) { % for my $checkin (@{$checkin_by_train->{$result->id} // []}) {
<span class="followee-checkin"> <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> </span>
</li> </li>
% } % }

16
templates/_departures_iris.html.ep
View file

@ -22,7 +22,7 @@
data-train="<%= $result->train_id %>" data-train="<%= $result->train_id %>"
data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>" data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>"
> >
<span class="dep-time"> <a class="dep-time" href="#">
% if ($result->departure_hidden) { % if ($result->departure_hidden) {
(<%= $result->departure->strftime('%H:%M') %>) (<%= $result->departure->strftime('%H:%M') %>)
% } % }
@ -35,17 +35,23 @@
% 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>
% } % }
</span>
<a class="dep-line <%= (split(/ /, $result->line))[0] %>">
%= $result->line
</a> </a>
<span class="dep-line <%= (split(/ /, $result->line))[0] %>">
%= $result->line
</span>
<span class="dep-dest"> <span class="dep-dest">
% if ($result->is_cancelled) {
Fahrt nach <%= $result->destination %> entfällt
% }
% else {
%= $result->destination %= $result->destination
% for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) { % for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) {
<span class="followee-checkin"> <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> </span>
</li> </li>
% } % }