diff options
| -rw-r--r-- | sass/src/common/local.scss | 59 | ||||
| -rw-r--r-- | templates/_departures_hafas.html.ep | 2 | ||||
| -rw-r--r-- | templates/_departures_iris.html.ep | 2 | ||||
| -rw-r--r-- | templates/departures.html.ep | 14 |
4 files changed, 42 insertions, 35 deletions
diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss index d5e4598..81534dc 100644 --- a/sass/src/common/local.scss +++ b/sass/src/common/local.scss @@ -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; diff --git a/templates/_departures_hafas.html.ep b/templates/_departures_hafas.html.ep index a10594e..369f5f4 100644 --- a/templates/_departures_hafas.html.ep +++ b/templates/_departures_hafas.html.ep @@ -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> % } diff --git a/templates/_departures_iris.html.ep b/templates/_departures_iris.html.ep index 332ef1c..d075008 100644 --- a/templates/_departures_iris.html.ep +++ b/templates/_departures_iris.html.ep @@ -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> % } diff --git a/templates/departures.html.ep b/templates/departures.html.ep index 9235600..039ec28 100644 --- a/templates/departures.html.ep +++ b/templates/departures.html.ep @@ -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> % } |