From f1d3d3ed934a87357e26d84f44daa4719b587749 Mon Sep 17 00:00:00 2001 From: Cassidy Dingenskirchen Date: Sun, 22 Oct 2023 14:43:05 +0200 Subject: departure board: new look and train type highlighting --- sass/src/common/local.scss | 126 ++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 119 insertions(+), 7 deletions(-) (limited to 'sass/src/common') diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss index 4c52486..71f9e81 100644 --- a/sass/src/common/local.scss +++ b/sass/src/common/local.scss @@ -21,10 +21,6 @@ color: #f5c4ce !important; } -td.cancelled { - text-decoration: line-through; -} - .wagons span { margin-right: 0.5ex; color: #808080; @@ -72,7 +68,123 @@ ul.suggestions { } } -table.departures tr.now td { - padding-top: 2em; - padding-bottom: 2em; +.departures li { + transition: background .3s; + display: grid; + grid-template-columns: 10ch 11ch 1fr; + align-items: center; + &:hover { + background-color: $departures-highlight-color; + } + &.cancelled { + background-color: $departures-cancelled-color; + font-style: italic; + .dep-line { + background-color: transparent; + border: 1px solid; + color: $off-black; + } + .dep-dest::before { + content: "Fahrt nach"; + } + .dep-dest::after { + content: "entfällt"; + } + } +} +.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-line { + text-align: center; + padding: .2rem; + color: white; + background: color('grey', 'darken-3'); + border-radius: .2rem; + display: inline-block; + font-weight: 600; + line-height: 1; + margin-right: 0.8rem; + height: fit-content; + + &.Bus, &.RUF, &.AST { + background-color: #a3167e; + border-radius: 5rem; + padding: .2rem .5rem; + } + &.STR { + background-color: #c5161c; + border-radius: 5rem; + padding: .2rem .5rem; + } + &.S, &.RS, &.RER, &.SKW { + background-color: #008d4f; + border-radius: 5rem; + padding: .2rem .5rem; + } + &.U, &.STB, &.M { + background-color: #014e8d; + border-radius: 5rem; + padding: .2rem .5rem; + } + &.RE, &.IRE { + background-color: #ff4f00; + } + &.RB, &.MEX, &.TER { + background-color: #1f4a87; + } + // DE + &.IC, &.ICE, &.EC, &.ECE, &.D, + // CH + &.IR, + // FR + &.TGV, &.OGV, &.EST, + // PL + &.TLK, &.EIC { + background-color: #ff0404; + font-weight: 900; + font-style: italic; + padding: .2rem; + } + &.RJ, &.RJX { + background-color: #c63131; + } + &.NJ, &.EN { + background-color: #29255b; + } + &.WB { + background-color: #2e85ce; + } + &.FLX { + background-color: #71d800; + } +} + +@media screen and (max-width: 600px) { + .departures li { + grid-template-columns: 11ch 1fr; + .dep-line, .dep-time { + grid-column: 1; + margin-right: 0.8rem; + text-align: center; + } + .dep-dest { + grid-column: 2; + grid-row: 1 / span 2; + } + } } -- cgit v1.2.3 From 0504f1adcd12c573ab805894b96a7658e2cd74fa Mon Sep 17 00:00:00 2001 From: Cassidy Dingenskirchen Date: Sun, 22 Oct 2023 16:16:41 +0200 Subject: departure board: some more styling consistency --- sass/src/common/local.scss | 24 +++++++++++++++--------- templates/_departures_hafas.html.ep | 22 ++++++++++++++-------- templates/_departures_iris.html.ep | 24 +++++++++++++++--------- 3 files changed, 44 insertions(+), 26 deletions(-) (limited to 'sass/src/common') diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss index 71f9e81..3008c54 100644 --- a/sass/src/common/local.scss +++ b/sass/src/common/local.scss @@ -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; diff --git a/templates/_departures_hafas.html.ep b/templates/_departures_hafas.html.ep index 58bdb02..a10594e 100644 --- a/templates/_departures_hafas.html.ep +++ b/templates/_departures_hafas.html.ep @@ -22,7 +22,7 @@ data-train="<%= $result->id %>" data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>" > - + %= $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) { gps_off % } - - - %= $result->line - - + + + %= $result->line + + + % if ($result->is_cancelled) { + Fahrt nach <%= $result->destination %> entfällt + % } + % else { %= $result->destination % for my $checkin (@{$checkin_by_train->{$result->id} // []}) { - people <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %> + people + <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %> % } - + % } + % } diff --git a/templates/_departures_iris.html.ep b/templates/_departures_iris.html.ep index 2c47016..332ef1c 100644 --- a/templates/_departures_iris.html.ep +++ b/templates/_departures_iris.html.ep @@ -22,7 +22,7 @@ data-train="<%= $result->train_id %>" data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>" > - + % if ($result->departure_hidden) { (<%= $result->departure->strftime('%H:%M') %>) % } @@ -35,16 +35,22 @@ % elsif (not $result->has_realtime and $result->start->epoch < $now_epoch) { gps_off % } - - - %= $result->line + + %= $result->line + - %= $result->destination - % for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) { - - people <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %> - + % if ($result->is_cancelled) { + Fahrt nach <%= $result->destination %> entfällt + % } + % else { + %= $result->destination + % for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) { + + people + <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %> + + % } % } -- cgit v1.2.3 From c22df914908f3f9c7f54e9319dfa41e1ab792b93 Mon Sep 17 00:00:00 2001 From: Cassidy Dingenskirchen Date: Sun, 22 Oct 2023 16:24:29 +0200 Subject: connections: new look consistent with departure board --- sass/src/common/local.scss | 20 +++++++++- templates/_connections.html.ep | 74 +++++++++++++++++------------------- templates/_connections_hafas.html.ep | 59 ++++++++++++---------------- 3 files changed, 76 insertions(+), 77 deletions(-) (limited to 'sass/src/common') diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss index 3008c54..d5e4598 100644 --- a/sass/src/common/local.scss +++ b/sass/src/common/local.scss @@ -86,12 +86,23 @@ ul.suggestions { } .dep-time::after { content: " ⊖"; + font-style: normal; } } } + +.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; @@ -182,10 +193,9 @@ ul.suggestions { @media screen and (max-width: 600px) { .departures li { - .dep-line, .dep-time { grid-template-columns: 10ch 1fr; + .dep-line, .dep-time, .connect-platform-wrapper { grid-column: 1; - margin-right: 0.8rem; text-align: center; } .dep-dest { @@ -193,4 +203,10 @@ ul.suggestions { grid-row: 1 / span 2; } } + .departures.connections li { + grid-template-columns: 15ch 1fr; + .connect-platform-wrapper span { + display: inline; + } + } } diff --git a/templates/_connections.html.ep b/templates/_connections.html.ep index cd64150..2a89d9b 100644 --- a/templates/_connections.html.ep +++ b/templates/_connections.html.ep @@ -1,39 +1,48 @@ -
+
    % for my $res (@{$connections}) { % my ($train, $via, $via_arr, $load) = @{$res}; % $via_arr = $via_arr ? $via_arr->strftime('%H:%M') : q{}; - % my $td_class = ''; + % my $row_class = ''; % my $link_class = 'action-checkin'; % if ($train->is_cancelled) { - % $td_class = 'cancelled'; + % $row_class = 'cancelled'; % $link_class = 'action-cancelled-from'; % } % if ($checkin_from) { -
+
  • % } % else { -
    • +
  • % } -
    • - - - + + % } -
    - % if ($train->platform) { - % if ($checkin_from) { - Gleis <%= $train->platform %> - % } - % else { - Gleis <%= $train->platform %> - % } -
    - % } - % if ($checkin_from) { - <%= $train->line %> + + % if ($train->departure_is_cancelled) { + %= $train->sched_departure->strftime('%H:%M') % } % else { - %= $train->line + %= $train->departure->strftime('%H:%M') + % } + % if ($via_arr) { + → <%= $via_arr %> % } -     		- % if ($checkin_from) { - <%= $via->{name} %> + % if ($train->departure_delay) { + %= sprintf('(%+d)', $train->departure_delay) + % } + + + % if ($train->platform) { + Gleis <%= $train->platform %> + % } + + %= $train->line + + + + % if ($train->is_cancelled) { + Fahrt nach <%= $via->{name} %> entfällt % } % else { %= $via->{name} @@ -61,22 +70,7 @@ % if ($train->{message_id}{70} or $train->{message_id}{71}) { portable_wifi_off % } - - % if ($train->departure_is_cancelled) { - %= $train->sched_departure->strftime('%H:%M') - ⊖ - % } - % else { - %= $train->departure->strftime('%H:%M') - % } - % if ($via_arr) { - → <%= $via_arr %> - % } - % if ($train->departure_delay) { - %= sprintf('(%+d)', $train->departure_delay) - % } -
    + diff --git a/templates/_connections_hafas.html.ep b/templates/_connections_hafas.html.ep index 48a5380..7a7b656 100644 --- a/templates/_connections_hafas.html.ep +++ b/templates/_connections_hafas.html.ep @@ -1,48 +1,26 @@ -
    +
      % for my $res (@{$connections}) { % my ($train, $via, $via_arr) = @{$res}; % $via_arr = $via_arr ? $via_arr->strftime('%H:%M') : q{}; - % my $td_class = ''; + % my $row_class = ''; % my $link_class = 'action-checkin'; % if ($train->is_cancelled) { - % $td_class = 'cancelled'; + % $row_class = 'cancelled'; % $link_class = 'action-cancelled-from'; % } % if ($checkin_from) { -
    +
  • % } % else { -
    • +
  • % } -
    • - - - + + + % if ($train->platform) { + Gleis <%= $train->platform %> + % } + + %= $train->line + + + + %= $via->{name} + + % } -
    - % if ($train->platform) { - % if ($checkin_from) { - Gleis <%= $train->platform %> - % } - % else { - Gleis <%= $train->platform %> - % } -
    - % } - % if ($checkin_from) { - <%= $train->line %> - % } - % else { - %= $train->line - % } -     		- % if ($checkin_from) { - <%= $via->{name} %> - % } - % else { - %= $via->{name} - % } - + % if ($train->is_cancelled) { %= $train->sched_datetime->strftime('%H:%M') - ⊖ % } % else { %= $train->datetime->strftime('%H:%M') @@ -53,7 +31,18 @@ % if ($train->delay) { %= sprintf('(%+d)', $train->delay) % } -
    + -- cgit v1.2.3 From 644ab3e660aa1cf0fce21ef8300997b3c85ef049 Mon Sep 17 00:00:00 2001 From: Cassidy Dingenskirchen Date: Sun, 22 Oct 2023 18:32:41 +0200 Subject: departure board: aria-label and contrast fix --- sass/src/common/local.scss | 59 ++++++++++++++++++++----------------- templates/_departures_hafas.html.ep | 2 +- templates/_departures_iris.html.ep | 2 +- templates/departures.html.ep | 14 +++++---- 4 files changed, 42 insertions(+), 35 deletions(-) (limited to 'sass/src/common') 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} // []}) { - people + people <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %> % } 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} // []}) { - people + people <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %> % } 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 @@
    -

    <%= param('hafas') ? 'directions' : 'train' %> - <%= $station %>

    +

    + + <%= $station %> +

    % for my $related_station (sort { $a->{name} cmp $b->{name} } @{$related_stations}) { + <%= $related_station->{name} %>
    % } @@ -11,13 +13,13 @@
    % if ($api_link) { % if (param('hafas')) { - trainzum Schienenverkehr + zum Schienenverkehr % } % else { - directionszum Nahverkehr + zum Nahverkehr % } % } - vertical_align_centerJetzt + Jetzt
    @@ -51,7 +53,7 @@ Rückgängig - gps_off + Hier auschecken % } -- cgit v1.2.3 From f1bb21cc7a0bcb799e9902a4a268ddf78d1d3f55 Mon Sep 17 00:00:00 2001 From: Cassidy Dingenskirchen Date: Sun, 22 Oct 2023 19:05:28 +0200 Subject: departure board: better keyboard accessibility --- public/static/js/travelynx-actions.js | 12 +++++++++++- sass/src/common/local.scss | 6 +++++- 2 files changed, 16 insertions(+), 2 deletions(-) (limited to 'sass/src/common') diff --git a/public/static/js/travelynx-actions.js b/public/static/js/travelynx-actions.js index 1b6dd8a..52ca482 100644 --- a/public/static/js/travelynx-actions.js +++ b/public/static/js/travelynx-actions.js @@ -298,9 +298,19 @@ $(document).ready(function() { $('a[href]').click(function() { $('nav .preloader-wrapper').addClass('active'); }); + $('a[href="#now"]').keydown(function(event) { + // also trigger click handler on keyboard enter + if (event.keyCode == 13) { + event.preventDefault(); + event.target.click(); + } + }); $('a[href="#now"]').click(function(event) { event.preventDefault(); - $('#now')[0].scrollIntoView({behavior: "smooth", block: "center"}); + $('nav .preloader-wrapper').removeClass('active'); + now_el = $('#now')[0]; + now_el.previousElementSibling.querySelector(".dep-time").focus(); + now_el.scrollIntoView({behavior: "smooth", block: "center"}); }); const elems = document.querySelectorAll('.carousel'); const instances = M.Carousel.init(elems, { diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss index 81534dc..ea70552 100644 --- a/sass/src/common/local.scss +++ b/sass/src/common/local.scss @@ -74,8 +74,9 @@ ul.suggestions { display: grid; grid-template-columns: 10ch 10ch 1fr; align-items: center; - &:hover { + &:not(#now):hover, &:focus-within { background-color: $departures-highlight-color; + outline: 2px solid $link-color; } &.cancelled { background-color: $departures-cancelled-color; @@ -103,6 +104,9 @@ ul.suggestions { .departures .dep-time { color: $off-black; + &:focus { + outline: none; + } } .departures .dep-dest { margin-left: 0.8rem; -- cgit v1.2.3 From e4f4114efce2331f0a35285b7ea12f23e74b712c Mon Sep 17 00:00:00 2001 From: Cassidy Dingenskirchen Date: Mon, 23 Oct 2023 17:33:44 +0200 Subject: oops, css fix --- sass/src/common/local.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) (limited to 'sass/src/common') diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss index ea70552..2ca8f55 100644 --- a/sass/src/common/local.scss +++ b/sass/src/common/local.scss @@ -110,6 +110,13 @@ ul.suggestions { } .departures .dep-dest { margin-left: 0.8rem; + .followee-checkin { + font-size: 0.9rem; + display: block; + i.material-icons { + vertical-align: middle; + } + } } .departures .dep-line { text-align: center; @@ -125,14 +132,6 @@ 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; -- cgit v1.2.3