summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--sass/src/common/local.scss126
-rw-r--r--sass/src/dark/_variables.scss3
-rw-r--r--sass/src/light/_variables.scss2
-rw-r--r--templates/_departures_hafas.html.ep53
-rw-r--r--templates/_departures_iris.html.ep55
5 files changed, 171 insertions, 68 deletions
diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss
index 4c52486..71f9e81 100644
--- a/sass/src/common/local.scss
+++ b/sass/src/common/local.scss
@@ -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;
+ }
+ }
}
diff --git a/sass/src/dark/_variables.scss b/sass/src/dark/_variables.scss
index 04e3689..ba14a75 100644
--- a/sass/src/dark/_variables.scss
+++ b/sass/src/dark/_variables.scss
@@ -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');
diff --git a/sass/src/light/_variables.scss b/sass/src/light/_variables.scss
index 6c5095b..4a634e9 100644
--- a/sass/src/light/_variables.scss
+++ b/sass/src/light/_variables.scss
@@ -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');
diff --git a/templates/_departures_hafas.html.ep b/templates/_departures_hafas.html.ep
index 169b319..f611d8e 100644
--- a/templates/_departures_hafas.html.ep
+++ b/templates/_departures_hafas.html.ep
@@ -1,39 +1,28 @@
-<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>
diff --git a/templates/_departures_iris.html.ep b/templates/_departures_iris.html.ep
index c8dd834..237757c 100644
--- a/templates/_departures_iris.html.ep
+++ b/templates/_departures_iris.html.ep
@@ -1,42 +1,28 @@
-<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>
+ </strong>
+ <strong>— Anfragezeitpunkt —</strong>
+ </li>
% }
- <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 %>">
+ <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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-01 21:14:13 +0000