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

departure board: aria-label and contrast fix

Browse source
This commit is contained in:
Cassidy Dingenskirchen 2023-10-22 18:32:41 +02:00
parent 2cee1c0fea
commit 644ab3e660
No known key found for this signature in database
GPG key ID: 14FE9712CC42FE8B
4 changed files with 42 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -68,6 +68,7 @@ ul.suggestions {
} }
} }
.departures li { .departures li {
transition: background .3s; transition: background .3s;
display: grid; display: grid;
@ -89,35 +90,17 @@ ul.suggestions {
font-style: normal; font-style: normal;
} }
} }
} &#now {
.departures.connections {
li {
grid-template-columns: 15ch 10ch 1fr;
}
.connect-platform-wrapper {
text-align: center;
span {
display: block;
}
}
}
.followee-checkin {
font-size: 0.9rem;
display: block;
i.material-icons {
vertical-align: middle;
}
}
.departures #now {
background-color: $departures-highlight-color; background-color: $departures-highlight-color;
padding: 2rem 20px; padding: 2rem 20px;
grid-template-columns: 10ch 1fr; grid-template-columns: 10ch 1fr;
strong { strong {
font-weight: bold; font-weight: bold;
} }
}
} }
.departures .dep-time { .departures .dep-time {
color: $off-black; color: $off-black;
} }
@ -138,6 +121,14 @@ ul.suggestions {
min-width: 6ch; min-width: 6ch;
margin: 0 auto; margin: 0 auto;
.followee-checkin {
font-size: 0.9rem;
display: block;
i.material-icons {
vertical-align: middle;
}
}
&.Bus, &.RUF, &.AST { &.Bus, &.RUF, &.AST {
background-color: #a3167e; background-color: #a3167e;
border-radius: 5rem; border-radius: 5rem;
@ -158,10 +149,10 @@ ul.suggestions {
border-radius: 5rem; border-radius: 5rem;
padding: .2rem .5rem; padding: .2rem .5rem;
} }
&.RE, &.IRE { &.RE, &.IRE, &.REX {
background-color: #ff4f00; background-color: #ff4f00;
} }
&.RB, &.MEX, &.TER { &.RB, &.MEX, &.TER, &.R {
background-color: #1f4a87; background-color: #1f4a87;
} }
// DE // DE
@ -188,9 +179,23 @@ ul.suggestions {
} }
&.FLX { &.FLX {
background-color: #71d800; background-color: #71d800;
color: black;
} }
} }
.departures.connections {
li {
grid-template-columns: 15ch 10ch 1fr;
}
.connect-platform-wrapper {
text-align: center;
span {
display: block;
}
}
}
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.departures li { .departures li {
grid-template-columns: 10ch 1fr; grid-template-columns: 10ch 1fr;

2
templates/_departures_hafas.html.ep
View file

@ -42,7 +42,7 @@
%= $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> <i class="material-icons tiny" aria-label="Eine Person, der du folgst, ist hier eingecheckt">people</i>
<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %> <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
</span> </span>
% } % }

2
templates/_departures_iris.html.ep
View file

@ -47,7 +47,7 @@
%= $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> <i class="material-icons tiny" aria-label="Eine Person, der du folgst, ist hier eingecheckt">people</i>
<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %> <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
</span> </span>
% } % }

14
templates/departures.html.ep
View file

@ -1,7 +1,9 @@
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<h2><i class="material-icons "><%= param('hafas') ? 'directions' : 'train' %></i> <h2>
<%= $station %></h2> <i class="material-icons " aria-hidden="true"><%= param('hafas') ? 'directions' : 'train' %></i>
<%= $station %>
</h2>
% for my $related_station (sort { $a->{name} cmp $b->{name} } @{$related_stations}) { % for my $related_station (sort { $a->{name} cmp $b->{name} } @{$related_stations}) {
+ <%= $related_station->{name} %> <br/> + <%= $related_station->{name} %> <br/>
% } % }
@ -11,13 +13,13 @@
<div class="col s12"> <div class="col s12">
% if ($api_link) { % if ($api_link) {
% if (param('hafas')) { % if (param('hafas')) {
<a href="<%= $api_link %>" class="btn-small"><i class="material-icons left">train</i>zum Schienenverkehr</a> <a href="<%= $api_link %>" class="btn-small"><i class="material-icons left" aria-hidden="true">train</i>zum Schienenverkehr</a>
% } % }
% else { % else {
<a href="<%= $api_link %>" class="btn-small"><i class="material-icons left">directions</i>zum Nahverkehr</a> <a href="<%= $api_link %>" class="btn-small"><i class="material-icons left" aria-hidden="true">directions</i>zum Nahverkehr</a>
% } % }
% } % }
<a class="btn-small" href="#now"><i class="material-icons left">vertical_align_center</i>Jetzt</a> <a class="btn-small" href="#now"><i class="material-icons left" aria-hidden="true">vertical_align_center</i>Jetzt</a>
</div> </div>
</div> </div>
@ -51,7 +53,7 @@
<i class="material-icons left" aria-hidden="true">undo</i> Rückgängig <i class="material-icons left" aria-hidden="true">undo</i> Rückgängig
</a> </a>
<a class="action-checkout right" data-station="<%= $eva %>" data-force="1"> <a class="action-checkout right" data-station="<%= $eva %>" data-force="1">
<i class="material-icons left">gps_off</i> <i class="material-icons left" aria-hidden="true">gps_off</i>
Hier auschecken Hier auschecken
</a> </a>
% } % }