diff options
| -rw-r--r-- | sass/src/common/local.scss | 20 | ||||
| -rw-r--r-- | templates/_connections.html.ep | 74 | ||||
| -rw-r--r-- | templates/_connections_hafas.html.ep | 59 |
3 files changed, 76 insertions, 77 deletions
diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss index 3008c54..d5e4598 100644 --- a/sass/src/common/local.scss +++ b/sass/src/common/local.scss @@ -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; + } + } } diff --git a/templates/_connections.html.ep b/templates/_connections.html.ep index cd64150..2a89d9b 100644 --- a/templates/_connections.html.ep +++ b/templates/_connections.html.ep @@ -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') + % } + % if ($via_arr) { + → <%= $via_arr %> % } - </td> - <td class="<%= $td_class %>"> - % if ($checkin_from) { - <a><%= $via->{name} %></a> + % 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> diff --git a/templates/_connections_hafas.html.ep b/templates/_connections_hafas.html.ep index 48a5380..7a7b656 100644 --- a/templates/_connections_hafas.html.ep +++ b/templates/_connections_hafas.html.ep @@ -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> |