diff options
| -rw-r--r-- | sass/src/common/local.scss | 117 | ||||
| -rw-r--r-- | templates/_history_trains.html.ep | 66 |
2 files changed, 114 insertions, 69 deletions
diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss index ca06708..244da6a 100644 --- a/sass/src/common/local.scss +++ b/sass/src/common/local.scss @@ -72,13 +72,30 @@ ul.suggestions { } } -.collection.departures li, .collection.history li { +// departure board and history - focus highlight +.collection.departures > li, +.collection.history > li { transition: background .3s; display: grid; &:not(#now,.history-date-change ):hover, &:focus-within { background-color: $departures-highlight-color; outline: 2px solid $link-color; } +} + +// departure board - layout + +.collection.departures li { + grid-template-columns: 10ch 10ch 1fr; + align-items: center; + &#now { + background-color: $departures-highlight-color; + padding: 2rem 20px; + grid-template-columns: 10ch 1fr; + strong { + font-weight: bold; + } + } &.cancelled { background-color: $departures-cancelled-color; font-style: italic; @@ -93,67 +110,87 @@ ul.suggestions { } } } - -.collection.departures li { - grid-template-columns: 10ch 10ch 1fr; - align-items: center; - &#now { - background-color: $departures-highlight-color; - padding: 2rem 20px; - grid-template-columns: 10ch 1fr; - strong { - font-weight: bold; +.departures .dep-time { + color: $off-black; + &:focus { + outline: none; + } +} +.departures .dep-dest { + margin-left: 0.8rem; + .followee-checkin { + font-size: 0.9rem; + display: block; + i.material-icons { + vertical-align: middle; } } } -.collection.history li { + +// history - layout + +.collection.history > li { display: grid; grid-template-columns: 10ch 1fr; grid-template-rows: 1fr; a:first-child { - grid-row: 1 / span 3; align-self: center; text-align: center; display: flex; } - .origin, .destination { - grid-column: 2; - strong { - font-weight: 600; - } - } - .origin::before { - content: ' '; - display: block; - border-left: 2px dotted $off-black; - height: 1rem; - position: absolute; - margin-left: calc( 0.5rem - 1px ); - margin-top: -0.75rem; - } &.history-date-change { display: block; font-weight: bold; } } +ul.route-history > li { + list-style: none; -.departures .dep-time { - color: $off-black; - &:focus { - outline: none; + position: relative; + display: grid; + grid-template-columns: 1rem 1fr; + gap: 0.5rem; + a { + font-family: $font-stack; } -} -.departures .dep-dest { - margin-left: 0.8rem; - .followee-checkin { - font-size: 0.9rem; - display: block; - i.material-icons { - vertical-align: middle; + strong { + font-weight: 600; + } + + // route icon bubble + i.material-icons { + &[aria-label=nach] { + padding-top: 0.4rem; } + &[aria-label=von] { + display: block; + transform: rotate(-90deg); + height: 1rem; + margin-top: 0.4rem; + } + } + + // route line / "perlenschnur" + &::before { + content: ''; + background: $off-black; + position: absolute; + width: 2px; + left: calc( (1rem - 2px) / 2 ); + bottom: 0; + top: 0; + } + &:first-of-type::before { + top: 1.3rem; + } + &:last-of-type::before { + bottom: unset; + height: 0.5rem; } } + +// train color bubbles .dep-line { text-align: center; padding: .2rem; diff --git a/templates/_history_trains.html.ep b/templates/_history_trains.html.ep index 9af5490..cf998ab 100644 --- a/templates/_history_trains.html.ep +++ b/templates/_history_trains.html.ep @@ -21,37 +21,45 @@ </span> </a> - <a href="<%= $detail_link %>" class="unmarked destination"> - <i class="material-icons tiny" aria-label="nach">place</i> - % if (param('cancelled') and $travel->{sched_arrival}->epoch != 0) { - %= $travel->{sched_arrival}->strftime('%H:%M') - % } - % else { - % if ($travel->{rt_arrival}->epoch == 0 and $travel->{sched_arrival}->epoch == 0) { - <i class="material-icons">timer_off</i> - % } else { - %= $travel->{rt_arrival}->strftime('%H:%M'); - % if ($travel->{sched_arrival} != $travel->{rt_arrival}) { - (<%= sprintf('%+d', ($travel->{rt_arrival}->epoch - $travel->{sched_arrival}->epoch) / 60) %>) + <ul class="route-history"> + <li> + <i class="material-icons tiny" aria-label="nach">radio_button_unchecked</i> + + <a href="<%= $detail_link %>" class="unmarked"> + % if (param('cancelled') and $travel->{sched_arrival}->epoch != 0) { + %= $travel->{sched_arrival}->strftime('%H:%M') + % } + % else { + % if ($travel->{rt_arrival}->epoch == 0 and $travel->{sched_arrival}->epoch == 0) { + <i class="material-icons">timer_off</i> + % } else { + %= $travel->{rt_arrival}->strftime('%H:%M'); + % if ($travel->{sched_arrival} != $travel->{rt_arrival}) { + (<%= sprintf('%+d', ($travel->{rt_arrival}->epoch - $travel->{sched_arrival}->epoch) / 60) %>) + % } + % } % } - % } - % } - <strong><%= $travel->{to_name} %></strong> + <strong><%= $travel->{to_name} %></strong> + </a> + </li> - <a href="<%= $detail_link %>" class="unmarked origin"> - <i class="material-icons tiny" aria-label="von">radio_button_unchecked</i> - % if (param('cancelled')) { - %= $travel->{sched_departure}->strftime('%H:%M') - % } - % else { - <%= $travel->{rt_departure}->strftime('%H:%M') %> - % if ($travel->{sched_departure} != $travel->{rt_departure}) { - (<%= sprintf('%+d', ($travel->{rt_departure}->epoch - $travel->{sched_departure}->epoch) / 60) %>) - % } - % } - <strong><%= $travel->{from_name} %></strong> - </a> - </a> + <li> + <i class="material-icons tiny" aria-label="von">play_circle_filled</i> + + <a href="<%= $detail_link %>" class="unmarked"> + % if (param('cancelled')) { + %= $travel->{sched_departure}->strftime('%H:%M') + % } + % else { + <%= $travel->{rt_departure}->strftime('%H:%M') %> + % if ($travel->{sched_departure} != $travel->{rt_departure}) { + (<%= sprintf('%+d', ($travel->{rt_departure}->epoch - $travel->{sched_departure}->epoch) / 60) %>) + % } + % } + <strong><%= $travel->{from_name} %></strong> + </a> + </li> + </ul> </li> % } </ul> |