history: fix visual bugs with long station names (414542df) · Commits · derf / travelynx

sass/src/common/local.scss

+77 −40

Original line number	Diff line number	Diff line
		@@ -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;
		}
		strong {
		font-weight: 600;
		}

		// route icon bubble
		i.material-icons {
		&[aria-label=nach] {
		padding-top: 0.4rem;
		}
		.departures .dep-dest {
		margin-left: 0.8rem;
		.followee-checkin {
		font-size: 0.9rem;
		&[aria-label=von] {
		display: block;
		i.material-icons {
		vertical-align: middle;
		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;

templates/_history_trains.html.ep

+37 −29

Original line number	Diff line number	Diff line
		@@ -21,8 +21,11 @@
		</span>
		</a>

		<a href="<%= $detail_link %>" class="unmarked destination">
		<i class="material-icons tiny" aria-label="nach">place</i>
		<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')
		% }
		@@ -37,9 +40,13 @@
		% }
		% }
		<strong><%= $travel->{to_name} %></strong>
		</a>
		</li>

		<li>
		<i class="material-icons tiny" aria-label="von">play_circle_filled</i>

		<a href="<%= $detail_link %>" class="unmarked origin">
		<i class="material-icons tiny" aria-label="von">radio_button_unchecked</i>
		<a href="<%= $detail_link %>" class="unmarked">
		% if (param('cancelled')) {
		%= $travel->{sched_departure}->strftime('%H:%M')
		% }
		@@ -51,7 +58,8 @@
		% }
		<strong><%= $travel->{from_name} %></strong>
		</a>
		</a>
		</li>
		</ul>
		</li>
		% }
		</ul>

Admin message