connections: new look consistent with departure board

This commit is contained in:
Cassidy Dingenskirchen 2023-10-22 16:24:29 +02:00
parent 0504f1adcd
commit c22df91490
No known key found for this signature in database
GPG key ID: 14FE9712CC42FE8B
3 changed files with 76 additions and 77 deletions

View file

@ -86,12 +86,23 @@ ul.suggestions {
}
.dep-time::after {
content: "";
font-style: normal;
}
}
}
.departures.connections {
li {
grid-template-columns: 15ch 10ch 1fr;
}
.connect-platform-wrapper {
text-align: center;
span {
display: block;
}
}
}
.followee-checkin {
font-size: 0.9rem;
display: block;
@ -182,10 +193,9 @@ ul.suggestions {
@media screen and (max-width: 600px) {
.departures li {
.dep-line, .dep-time {
grid-template-columns: 10ch 1fr;
.dep-line, .dep-time, .connect-platform-wrapper {
grid-column: 1;
margin-right: 0.8rem;
text-align: center;
}
.dep-dest {
@ -193,4 +203,10 @@ ul.suggestions {
grid-row: 1 / span 2;
}
}
.departures.connections li {
grid-template-columns: 15ch 1fr;
.connect-platform-wrapper span {
display: inline;
}
}
}

View file

@ -1,39 +1,48 @@
<div><table class="striped"><tbody>
<ul class="collection departures connections">
% for my $res (@{$connections}) {
% my ($train, $via, $via_arr, $load) = @{$res};
% $via_arr = $via_arr ? $via_arr->strftime('%H:%M') : q{};
% my $td_class = '';
% my $row_class = '';
% my $link_class = 'action-checkin';
% if ($train->is_cancelled) {
% $td_class = 'cancelled';
% $row_class = 'cancelled';
% $link_class = 'action-cancelled-from';
% }
% if ($checkin_from) {
<tr class="<%= $link_class %>" data-station="<%= $train->station_uic %>" data-train="<%= $train->train_id %>" data-ts="<%= ($train->sched_departure // $train->departure)->epoch %>" data-dest="<%= $via->{name} %>">
<li class="collection-item <%= $row_class %> <%= $link_class %>"
data-station="<%= $train->station_uic %>"
data-train="<%= $train->train_id %>"
data-ts="<%= ($train->sched_departure // $train->departure)->epoch %>"
data-dest="<%= $via->{name} %>">
% }
% else {
<tr>
<li class="collection-item">
% }
<td class="<%= $td_class %>">
% if ($train->platform) {
% if ($checkin_from) {
<a>Gleis <%= $train->platform %></a>
% }
% else {
Gleis <%= $train->platform %>
% }
<br/>
% }
% if ($checkin_from) {
<a><%= $train->line %></a>
<a class="dep-time" href="#">
% if ($train->departure_is_cancelled) {
%= $train->sched_departure->strftime('%H:%M')
% }
% else {
%= $train->line
%= $train->departure->strftime('%H:%M')
% }
</td>
<td class="<%= $td_class %>">
% if ($checkin_from) {
<a><%= $via->{name} %></a>
% if ($via_arr) {
→ <%= $via_arr %>
% }
% if ($train->departure_delay) {
%= sprintf('(%+d)', $train->departure_delay)
% }
</a>
<span class="connect-platform-wrapper">
% if ($train->platform) {
<span>Gleis <%= $train->platform %></span>
% }
<span class="dep-line <%= (split(/ /, $train->line))[0] %>">
%= $train->line
</span>
</span>
<span class="dep-dest">
% if ($train->is_cancelled) {
Fahrt nach <%= $via->{name} %> entfällt
% }
% else {
%= $via->{name}
@ -61,22 +70,7 @@
% if ($train->{message_id}{70} or $train->{message_id}{71}) {
<i class="material-icons tiny" aria-label="Ohne WLAN">portable_wifi_off</i>
% }
</td>
<td>
% if ($train->departure_is_cancelled) {
%= $train->sched_departure->strftime('%H:%M')
% }
% else {
%= $train->departure->strftime('%H:%M')
% }
% if ($via_arr) {
→ <%= $via_arr %>
% }
% if ($train->departure_delay) {
%= sprintf('(%+d)', $train->departure_delay)
% }
</td>
</tr>
</span>
</li>
% }
</tbody></table></div>
</ul>

View file

@ -1,48 +1,26 @@
<div><table class="striped"><tbody>
<ul class="collection departures connections">
% for my $res (@{$connections}) {
% my ($train, $via, $via_arr) = @{$res};
% $via_arr = $via_arr ? $via_arr->strftime('%H:%M') : q{};
% my $td_class = '';
% my $row_class = '';
% my $link_class = 'action-checkin';
% if ($train->is_cancelled) {
% $td_class = 'cancelled';
% $row_class = 'cancelled';
% $link_class = 'action-cancelled-from';
% }
% if ($checkin_from) {
<tr class="<%= $link_class %>" data-station="<%= $train->station_eva %>" data-train="<%= $train->id %>" data-ts="<%= ($train->sched_datetime // $train->datetime)->epoch %>" data-dest="<%= $via->{name} %>">
<li class="collection-item <%= $row_class %> <%= $link_class %>"
data-station="<%= $train->station_eva %>"
data-train="<%= $train->id %>"
data-ts="<%= ($train->sched_datetime // $train->datetime)->epoch %>"
data-dest="<%= $via->{name} %>">
% }
% else {
<tr>
<li class="collection-item">
% }
<td class="<%= $td_class %>">
% if ($train->platform) {
% if ($checkin_from) {
<a>Gleis <%= $train->platform %></a>
% }
% else {
Gleis <%= $train->platform %>
% }
<br/>
% }
% if ($checkin_from) {
<a><%= $train->line %></a>
% }
% else {
%= $train->line
% }
</td>
<td class="<%= $td_class %>">
% if ($checkin_from) {
<a><%= $via->{name} %></a>
% }
% else {
%= $via->{name}
% }
</td>
<td>
<a class="dep-time" href="#">
% if ($train->is_cancelled) {
%= $train->sched_datetime->strftime('%H:%M')
% }
% else {
%= $train->datetime->strftime('%H:%M')
@ -53,7 +31,18 @@
% if ($train->delay) {
%= sprintf('(%+d)', $train->delay)
% }
</td>
</tr>
</a>
<span class="connect-platform-wrapper">
% if ($train->platform) {
<span>Gleis <%= $train->platform %></span>
% }
<span class="dep-line <%= (split(/ /, $train->line))[0] %>">
%= $train->line
</span>
</span>
<span class="dep-dest">
%= $via->{name}
</span>
</li>
% }
</tbody></table></div>
</ul>