departure board: aria-label and contrast fix
This commit is contained in:
parent
2cee1c0fea
commit
644ab3e660
4 changed files with 42 additions and 35 deletions
|
@ -68,6 +68,7 @@ ul.suggestions {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.departures li {
|
||||
transition: background .3s;
|
||||
display: grid;
|
||||
|
@ -89,35 +90,17 @@ ul.suggestions {
|
|||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.departures.connections {
|
||||
li {
|
||||
grid-template-columns: 15ch 10ch 1fr;
|
||||
}
|
||||
.connect-platform-wrapper {
|
||||
text-align: center;
|
||||
span {
|
||||
display: block;
|
||||
&#now {
|
||||
background-color: $departures-highlight-color;
|
||||
padding: 2rem 20px;
|
||||
grid-template-columns: 10ch 1fr;
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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-time {
|
||||
color: $off-black;
|
||||
}
|
||||
|
@ -138,6 +121,14 @@ ul.suggestions {
|
|||
min-width: 6ch;
|
||||
margin: 0 auto;
|
||||
|
||||
.followee-checkin {
|
||||
font-size: 0.9rem;
|
||||
display: block;
|
||||
i.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.Bus, &.RUF, &.AST {
|
||||
background-color: #a3167e;
|
||||
border-radius: 5rem;
|
||||
|
@ -158,10 +149,10 @@ ul.suggestions {
|
|||
border-radius: 5rem;
|
||||
padding: .2rem .5rem;
|
||||
}
|
||||
&.RE, &.IRE {
|
||||
&.RE, &.IRE, &.REX {
|
||||
background-color: #ff4f00;
|
||||
}
|
||||
&.RB, &.MEX, &.TER {
|
||||
&.RB, &.MEX, &.TER, &.R {
|
||||
background-color: #1f4a87;
|
||||
}
|
||||
// DE
|
||||
|
@ -188,9 +179,23 @@ ul.suggestions {
|
|||
}
|
||||
&.FLX {
|
||||
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) {
|
||||
.departures li {
|
||||
grid-template-columns: 10ch 1fr;
|
||||
|
|
|
@ -42,7 +42,7 @@
|
|||
%= $result->destination
|
||||
% for my $checkin (@{$checkin_by_train->{$result->id} // []}) {
|
||||
<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} // '???' %>
|
||||
</span>
|
||||
% }
|
||||
|
|
|
@ -47,7 +47,7 @@
|
|||
%= $result->destination
|
||||
% for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) {
|
||||
<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} // '???' %>
|
||||
</span>
|
||||
% }
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<div class="row">
|
||||
<div class="col s12">
|
||||
<h2><i class="material-icons "><%= param('hafas') ? 'directions' : 'train' %></i>
|
||||
<%= $station %></h2>
|
||||
<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}) {
|
||||
+ <%= $related_station->{name} %> <br/>
|
||||
% }
|
||||
|
@ -11,13 +13,13 @@
|
|||
<div class="col s12">
|
||||
% if ($api_link) {
|
||||
% 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 {
|
||||
<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>
|
||||
|
||||
|
@ -51,7 +53,7 @@
|
|||
<i class="material-icons left" aria-hidden="true">undo</i> Rückgängig
|
||||
</a>
|
||||
<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
|
||||
</a>
|
||||
% }
|
||||
|
|
Loading…
Reference in a new issue