Unverified Commit f1d3d3ed authored by Cassidy Dingenskirchen's avatar Cassidy Dingenskirchen
Browse files

departure board: new look and train type highlighting

parent 6a0f20e2

sass/src/common/local.scss

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

		}

	}

}

sass/src/dark/_variables.scss

+3 −0
Original line number Diff line number Diff line
@@ -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');

sass/src/light/_variables.scss

+2 −0
Original line number Diff line number Diff line
@@ -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');

templates/_departures_hafas.html.ep

+24 −29
Original line number Diff line number Diff line 
<table class="striped departures">

<tbody>

<ul class="collection departures">

% my $orientation_bar_shown = param('train');

% my $now_epoch = now->epoch;

% for my $result (@{$results}) {

	% my $td_class = '';

	% my $row_class = '';

	% my $link_class = 'action-checkin';

	% if ($result->is_cancelled) {

		% $td_class = "cancelled";

		% $row_class = "cancelled";

		% $link_class = 'action-cancelled-from';

	% }

	% if (not $orientation_bar_shown and $result->datetime->epoch < $now_epoch) {

		% $orientation_bar_shown = 1;

		<tr class="now">

			<td>

			</td>

			<td>

				<strong>— Anfragezeitpunkt —</strong>

			</td>

			<td><strong>

		<li class="collection-item" id="now">

			<strong class="dep-time">

				%= now->strftime('%H:%M')

			</strong></td>

		</tr>

			</strong>

			<strong>— Anfragezeitpunkt —</strong>

		</li>

	% }

	<tr class="<%= $link_class %>" data-station="<%= $result->station_eva %>" data-train="<%= $result->id %>" data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>" data-tr="3">

		<td>

			<a>

				<%= $result->line %>

			</a>

		</td>

		<td class="<%= $td_class %>">

			<a>

				<%= $result->destination %>

			</a>

		</td>

		<td class="<%= $td_class %>">

	<li class="collection-item <%= $link_class %> <%= $row_class %>"

		data-station="<%= $result->station_eva %>"

		data-train="<%= $result->id %>"

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

	>

		<span class="dep-time">

			%= $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) {

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

			% }

		</td>

	</tr>

			</span>

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

				%= $result->line

			</a>

			<span class="dep-dest">

				%= $result->destination

				% }

			</span>

	</li>

% }

</tbody>

</table>
 
</ul>

templates/_departures_iris.html.ep

+23 −32
Original line number Diff line number Diff line 
<table class="striped departures">

<tbody>

<ul class="collection departures">

% my $orientation_bar_shown = param('train');

% my $now_epoch = now->epoch;

% for my $result (@{$results}) {

	% my $td_class = '';

	% my $row_class = '';

	% my $link_class = 'action-checkin';

	% if ($result->departure_is_cancelled) {

		% $td_class = "cancelled";

		% $row_class = "cancelled";

		% $link_class = 'action-cancelled-from';

	% }

	% if (not $orientation_bar_shown and $result->departure->epoch < $now_epoch) {

		% $orientation_bar_shown = 1;

		<tr class="now">

			<td>

			</td>

			<td>

				<strong>— Anfragezeitpunkt —</strong>

			</td>

			<td><strong>

		<li class="collection-item" id="now">

			<strong class="dep-time">

				%= now->strftime('%H:%M')

			</strong></td>

		</tr>

	% }

	<tr class="<%= $link_class %>" data-station="<%= $result->station_uic %>" data-train="<%= $result->train_id %>" data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>" data-tr="3">

		<td>

			<a>

				<%= $result->line %>

			</a>

		</td>

		<td class="<%= $td_class %>">

			<a>

				<%= $result->destination %>

			</a>

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

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

			% }

		</td>

		<td class="<%= $td_class %>">

			</strong>

			<strong>— Anfragezeitpunkt —</strong>

		</li>

	% }

	<li class="collection-item <%= $link_class %> <%= $row_class %>"

		data-station="<%= $result->station_uic %>"

		data-train="<%= $result->train_id %>"

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

	>

		<span class="dep-time">

			% if ($result->departure_hidden) {

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

			% }
@@ -49,8 +35,13 @@ 
			% 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>

			% }

		</td>

	</tr>

			</span>

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

				%= $result->line

			</a>

			<span class="dep-dest">

				%= $result->destination

			</span>

	</li>

% }

</tbody>

</table>
 
</ul>