From 414542dfa431f0f93dde9d9d544edc7678747ef5 Mon Sep 17 00:00:00 2001
From: Cassidy Dingenskirchen <admin@15318.de>
Date: Thu, 1 Feb 2024 21:00:31 +0100
Subject: history: fix visual bugs with long station names
---
sass/src/common/local.scss | 117 +++++++++++++++++++++++++-------------
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>
--
cgit v1.2.3