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 ++++++++++++++++++++++++++++++++++-- sass/src/dark/_variables.scss | 3 + sass/src/light/_variables.scss | 2 + templates/_departures_hafas.html.ep | 53 +++++++-------- templates/_departures_iris.html.ep | 55 +++++++--------- 5 files changed, 171 insertions(+), 68 deletions(-) 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; + } + } } diff --git a/sass/src/dark/_variables.scss b/sass/src/dark/_variables.scss index 04e3689..ba14a75 100644 --- a/sass/src/dark/_variables.scss +++ b/sass/src/dark/_variables.scss @@ -21,3 +21,6 @@ $table-striped-color: color('grey', 'darken-4'); $button-flat-color: $off-black; $card-bg-color: color('grey', 'darken-4'); $card-link-color: $link-color; + +$departures-highlight-color: $table-striped-color; +$departures-cancelled-color: color('red', 'darken-3'); diff --git a/sass/src/light/_variables.scss b/sass/src/light/_variables.scss index 6c5095b..4a634e9 100644 --- a/sass/src/light/_variables.scss +++ b/sass/src/light/_variables.scss @@ -6,3 +6,5 @@ $collection-link-color: color('shades', 'black'); $card-bg-color: color('blue-grey', 'lighten-5'); $inactive-color: color('grey', 'darken-2'); $input-label-color: color('shades', 'black'); +$departures-highlight-color: color('grey', 'lighten-3'); +$departures-cancelled-color: color('red', 'lighten-4'); diff --git a/templates/_departures_hafas.html.ep b/templates/_departures_hafas.html.ep index 169b319..f611d8e 100644 --- a/templates/_departures_hafas.html.ep +++ b/templates/_departures_hafas.html.ep @@ -1,39 +1,28 @@ - - + - - - - + + — Anfragezeitpunkt — + % } - - - - - + + + %= $result->line + + + %= $result->destination + % } + + % } - -
- - — Anfragezeitpunkt — - +
  • + %= now->strftime('%H:%M') -
    • - - <%= $result->line %> - - - - <%= $result->destination %> - - +
  • + %= $result->datetime->strftime('%H:%M') % if ($result->delay) { (<%= sprintf('%+d', $result->delay) %>) @@ -41,8 +30,14 @@ % elsif (not defined $result->delay and not $result->is_cancelled) { gps_off % } -
    • + diff --git a/templates/_departures_iris.html.ep b/templates/_departures_iris.html.ep index c8dd834..237757c 100644 --- a/templates/_departures_iris.html.ep +++ b/templates/_departures_iris.html.ep @@ -1,42 +1,28 @@ - - + - - - - + + — Anfragezeitpunkt — + % } - - - - - + + + %= $result->line + + + %= $result->destination + + % } - -
    - - — Anfragezeitpunkt — - +
  • + %= now->strftime('%H:%M') -
    • - - <%= $result->line %> - - - - <%= $result->destination %> - - % for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) { -
    (<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>) - % } -     		+
  • + % if ($result->departure_hidden) { (<%= $result->departure->strftime('%H:%M') %>) % } @@ -49,8 +35,13 @@ % elsif (not $result->has_realtime and $result->start->epoch < $now_epoch) { gps_off % } -
    • + -- cgit v1.2.3