summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--sass/src/common/local.scss20
-rw-r--r--templates/_connections.html.ep74
-rw-r--r--templates/_connections_hafas.html.ep59
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>