departure list: show delay next to time

2 files changed, 44 insertions, 48 deletions

diff --git a/sass/app.scss b/sass/app.scss
index 2beda4e..d9e83ce 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -507,9 +507,10 @@ div.app li.cancelled {
 	background-color: $cancelled-bg-color;
 }
 
-div.app li .countdown {
+div.app li .platform {
 	background-color: transparent;
 	font-size: 3em;
+	font-weight: bold;
 	position: absolute;
 	right: 5px;
 	bottom: 2px;
@@ -517,6 +518,10 @@ div.app li .countdown {
 	color: $fg;
 }
 
+div.app li .changed-platform {
+	color: $info-color;
+}
+
 div.app li .header {
 	color:$fg;
 	font-size:2em;
@@ -531,38 +536,31 @@ div.app li .head {
 	border-bottom-width:0;
 }
 
-div.app li .countdown .delay {
+div.app li .time .delay {
 	font-size:1em;
 	color: $delay-color;
 	background-color: transparent;
-	padding-right:7px;
+	padding-right: 1ex;
 }
 
-div.app li .countdown .undelay {
+div.app li .time .undelay {
 	font-size:1em;
 	color: $undelay-color;
-	padding-right:7px;
+	padding-right: 1ex;
 }
 
-div.app li .countdown .delaynorm {
+div.app li .time .delaynorm {
 	font-size:0.9em;
 	color: $delaynorm-color;
-	padding-right:7px;
+	padding-right: 1ex;
 }
 
-div.app li .countdown .undelaynorm {
+div.app li .time .undelaynorm {
 	font-size:0.9em;
 	color: $undelaynorm-color;
-	padding-right:7px;
+	padding-right: 1ex;
 }
 
-div.app li .countdown .platform {
-	font-weight: bold;
-}
-
-div.app li .countdown .changed-platform {
-	color: $info-color;
-}
 
 div.app li .time {
 	background-color: transparent;
diff --git a/templates/app.html.ep b/templates/app.html.ep
index 9ac7304..4a45c99 100644
--- a/templates/app.html.ep
+++ b/templates/app.html.ep
@@ -94,45 +94,44 @@
 %   }
     <span class="time <%= ($show_realtime and $departure->{delay} and not
       $departure->{is_cancelled}) ? 'delayed' : q{} %>">
-%   if (param('detailed')) {
-%     my $arrow = '→';
-%     if (not $departure->{sched_arrival}) {
-%       $arrow = '↦';
-%     }
-%     elsif (not $departure->{sched_departure}) {
-%       $arrow = '⇥';
-%     }
-%     if ($show_realtime) {
-%=      ($departure->{arrival} // q{}) . $arrow . ($departure->{departure} // q{})
-%     }
-%     else {
-%=      ($departure->{sched_arrival} // q{}) . $arrow . ($departure->{sched_departure} // q{})
-%     }
-%   }
-%   else {
-%=    $departure->{time}
-%   }
-    </span>
-    <span class="countdown">
-%   if ($departure->{delay} and not $departure->{is_cancelled}) {
-%     my $aria_delay = sprintf("Verspätung %d Minuten", $departure->{delay});
-%     if ($show_realtime) {
-%       if ($departure->{delay} > 0) {
-          <span class="delaynorm" aria-label="<%= $aria_delay %>">(+<%= $departure->{delay} %>)</span>
+%     if ($departure->{delay} and not $departure->{is_cancelled}) {
+%       my $aria_delay = sprintf("Verspätung %d Minuten", $departure->{delay});
+%       if ($show_realtime) {
+%         if ($departure->{delay} > 0) {
+            <span class="delaynorm" aria-label="<%= $aria_delay %>">(+<%= $departure->{delay} %>)</span>
+%         }
+%         else {
+            <span class="undelaynorm" aria-label="<%= $aria_delay %>">(<%= $departure->{delay} %>)</span>
+%         }
 %       }
 %       else {
-          <span class="undelaynorm" aria-label="<%= $aria_delay %>">(<%= $departure->{delay} %>)</span>
+%         if ($departure->{delay} > 0) {
+            <span class="delay" aria-label="<%= $aria_delay %>">(+<%= $departure->{delay} %>)</span>
+%         }
+%         else {
+            <span class="undelay" aria-label="<%= $aria_delay %>">(<%= $departure->{delay} %>)</span>
+%         }
 %       }
 %     }
-%     else {
-%       if ($departure->{delay} > 0) {
-          <span class="delay" aria-label="<%= $aria_delay %>">(+<%= $departure->{delay} %>)</span>
+%     if (param('detailed')) {
+%       my $arrow = '→';
+%       if (not $departure->{sched_arrival}) {
+%         $arrow = '↦';
+%       }
+%       elsif (not $departure->{sched_departure}) {
+%         $arrow = '⇥';
+%       }
+%       if ($show_realtime) {
+%=        ($departure->{arrival} // q{}) . $arrow . ($departure->{departure} // q{})
 %       }
 %       else {
-          <span class="undelay" aria-label="<%= $aria_delay %>">(<%= $departure->{delay} %>)</span>
+%=        ($departure->{sched_arrival} // q{}) . $arrow . ($departure->{sched_departure} // q{})
 %       }
 %     }
-%   }
+%     else {
+%=      $departure->{time}
+%     }
+    </span>
 %   if (($departure->{scheduled_platform} and $departure->{platform} and
 %       $departure->{scheduled_platform} ne $departure->{platform})
 %       or $departure->{changed_platform}) {
@@ -143,7 +142,6 @@
 %   }
 %=  $departure->{platform}
     </span>
-    </span>
 %   if ($departure->{info} and length $departure->{info}) {
       <span class="info">
 %=    $departure->{info}