From c1c0239984d78ab6045278a2036899c613d5f9c5 Mon Sep 17 00:00:00 2001
From: Daniel Friesel <derf@finalrewind.org>
Date: Mon, 7 Nov 2022 21:08:39 +0100
Subject: add top-margin for train details

---
 sass/app.scss                    |  4 ++++
 templates/_train_details.html.ep | 39 ++++++++++++++++++++-------------------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/sass/app.scss b/sass/app.scss
index a1f2d32..5ccf25c 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -560,6 +560,10 @@ div.app {
 			}
 		}
 
+		.details {
+			margin-top: 1em;
+		}
+
 		.mroute {
 			.important-stop {
 				color: $fg;
diff --git a/templates/_train_details.html.ep b/templates/_train_details.html.ep
index 2d61939..9ea3581 100644
--- a/templates/_train_details.html.ep
+++ b/templates/_train_details.html.ep
@@ -289,29 +289,30 @@
       </ul> <!-- mroute -->
 %   }
 %   if ($departure->{operator}) {
-     <div>Betrieb: <%= $departure->{operator} %></div>
+     <div class="details">Betrieb: <%= $departure->{operator} %></div>
 %   }
 %   if ($departure->{details} and @{$departure->{details}}) {
-      Details:
-      <ul class="messages">
-%     for my $pair (@{$departure->{details}}) {
-        <li>
-%       if ($pair->[1]{icon}) {
-          <i class="material-icons"><%= $pair->[1]{icon} %></i>
+      <div class="details">Details:
+        <ul>
+%       for my $pair (@{$departure->{details}}) {
+          <li>
+%         if ($pair->[1]{icon}) {
+            <i class="material-icons"><%= $pair->[1]{icon} %></i>
+%         }
+%=        $pair->[0]
+%         if (length($pair->[0]) > 25) {
+            <br/>
+%         }
+          <span class="reason">
+%=        $pair->[1]{text}
+          </span>
+          </li>
 %       }
-%=      $pair->[0]
-%       if (length($pair->[0]) > 25) {
-          <br/>
+%       if ($departure->{route_info}) {
+          <li><%= $departure->{route_info} %></li>
 %       }
-        <span class="reason">
-%=      $pair->[1]{text}
-        </span>
-        </li>
-%     }
-%     if ($departure->{route_info}) {
-        <li><%= $departure->{route_info} %></li>
-%     }
-      </ul>
+        </ul>
+      </div>
 %   }
 %   if ($departure->{has_cycle}) {
       <div class="db-attr"><a href="https://lib.finalrewind.org/dbdb/db_umlauf/<%= $departure->{train_no} %>.svg">Umlaufplan</a>
-- 
cgit v1.2.3