Unverified Commit 0504f1ad authored by Cassidy Dingenskirchen's avatar Cassidy Dingenskirchen
Browse files

departure board: some more styling consistency

parent 6686a16b

sass/src/common/local.scss

+15 −9
Original line number Diff line number Diff line
@@ -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;

templates/_departures_hafas.html.ep

+14 −8
Original line number Diff line number Diff line
@@ -22,7 +22,7 @@ 
		data-train="<%= $result->id %>"

		data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>"

	>

		<span class="dep-time">

		<a class="dep-time" href="#">

			%= $result->datetime->strftime('%H:%M')

			% if ($result->delay) {

				(<%= sprintf('%+d', $result->delay) %>)
@@ -30,17 +30,23 @@ 
			% elsif (not defined $result->delay and not $result->is_cancelled) {

				<i class="material-icons" aria-label="Keine Echtzeitdaten vorhanden" style="font-size: 16px;">gps_off</i>

			% }

			</span>

			<a class="dep-line <%= (split(/ /, $result->line))[0] %>">

				%= $result->line

		</a>

		<span class="dep-line <%= (split(/ /, $result->line))[0] %>">

			%= $result->line

		</span>

		<span class="dep-dest">

			% if ($result->is_cancelled) {

				Fahrt nach <%= $result->destination %> entfällt

			% }

			% else {

				%= $result->destination

				% for my $checkin (@{$checkin_by_train->{$result->id} // []}) {

					<span class="followee-checkin">

						<i class="material-icons tiny">people</i> <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>

						<i class="material-icons tiny">people</i>

						<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>

					</span>

				% }

			% }

		</span>

	</li>

% }

templates/_departures_iris.html.ep

+15 −9
Original line number Diff line number Diff line
@@ -22,7 +22,7 @@ 
		data-train="<%= $result->train_id %>"

		data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>"

	>

		<span class="dep-time">

		<a class="dep-time" href="#">

			% if ($result->departure_hidden) {

				(<%= $result->departure->strftime('%H:%M') %>)

			% }
@@ -35,17 +35,23 @@ 
			% elsif (not $result->has_realtime and $result->start->epoch < $now_epoch) {

				<i class="material-icons" aria-label="Keine Echtzeitdaten vorhanden" style="font-size: 16px;">gps_off</i>

			% }

			</span>

			<a class="dep-line <%= (split(/ /, $result->line))[0] %>">

				%= $result->line

			</a>

			<span class="dep-line <%= (split(/ /, $result->line))[0] %>">

				%= $result->line

			</span>

			<span class="dep-dest">

				% if ($result->is_cancelled) {

					Fahrt nach <%= $result->destination %> entfällt

				% }

				% else {

					%= $result->destination

					% for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) {

						<span class="followee-checkin">

						<i class="material-icons tiny">people</i> <%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>

							<i class="material-icons tiny">people</i>

							<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>

						</span>

					% }

				% }

			</span>

	</li>

% }