From 87a40ca57f724194d5f2f4a35731f08c3eb821d0 Mon Sep 17 00:00:00 2001
From: Daniel Friesel <derf@finalrewind.org>
Date: Sat, 21 Dec 2019 23:53:49 +0100
Subject: more compact and less ugly wagon order display

---
 public/static/css/app.css            | 81 ++++++++++++++++++++++++++----------
 public/static/css/material-icons.css |  8 ++--
 public/static/v19                    |  1 -
 public/static/v21                    |  1 +
 templates/layouts/app.html.ep        |  2 +-
 templates/layouts/legacy.html.ep     |  2 +-
 templates/wagenreihung.html.ep       | 34 ++++++---------
 7 files changed, 77 insertions(+), 52 deletions(-)
 delete mode 120000 public/static/v19
 create mode 120000 public/static/v21

diff --git a/public/static/css/app.css b/public/static/css/app.css
index 3e4b3bd..ef2b2e9 100644
--- a/public/static/css/app.css
+++ b/public/static/css/app.css
@@ -42,11 +42,6 @@ div.content {
 	text-align: center;
 }
 
-.wagonorder .direction {
-	position: absolute;
-	left: 10em;
-}
-
 .wagonorder .wagon {
 	position: absolute;
 	left: 3em;
@@ -60,40 +55,80 @@ div.content {
 	border-top: none;
 }
 
+.wagonorder .wagon .direction {
+	position: absolute;
+	left: 0.2em;
+	bottom: 0;
+	right: 0;
+	text-align: center;
+	color: #666666;
+}
+
 .wagonorder .details {
 	position: absolute;
-	left: 11em;
+	padding-top: 0.5ex;
+	left: 10em;
 	right: 0em;
 }
 
-.wagonorder .details .firstclass {
+.wagonorder .details .type {
 	display: inline-block;
-	width: 0.8em;
-	text-align: center;
-	color: #ffffff;
-	background-color: #666666;
-	border: 1px solid #666666;
+	width: 5em;
+	color: #666666;
 }
 
-.wagonorder .details .secondclass {
-	display: inline-block;
-	width: 0.8em;
-	text-align: center;
+.wagonorder .details .uicunknown {
+	color: #999999;
+}
+
+.wagonorder .details .uicexchange {
+	margin-right: 0.2em;
+	color: #999999;
+}
+
+.wagonorder .details .uiccountry {
+	margin-right: 0.2em;
+	color: #999999;
+}
+
+.wagonorder .details .uic5 {
+	margin-right: 0.2em;
+	color: #999999;
+}
+
+.wagonorder .details .uic56 {
 	color: #666666;
-	border: 1px solid #666666;
+	font-weight: bold;
 }
 
-.wagonorder .details .noclass {
-	display: inline-block;
-	width: 0.8em;
+.wagonorder .details .uic78 {
+	margin-right: 0.2em;
+	color: #666666;
+	font-weight: bold;
 }
 
-.wagonorder .details .type {
-	display: inline-block;
-	width: 5em;
+.wagonorder .details .uic78::before {
+	content: "-";
+}
+
+.wagonorder .details .uictype {
+	margin-right: 0.2em;
+	color: #666666;
+	font-weight: bold;
+}
+
+.wagonorder .details .uicno {
 	color: #666666;
 }
 
+.wagonorder .details .uiccheck {
+	color: #999999;
+}
+
+.wagonorder .details .uiccheck::before {
+	content: "-";
+}
+
 div.app {
 	border-width:1px 2px;
 	width:100%;
diff --git a/public/static/css/material-icons.css b/public/static/css/material-icons.css
index a85e909..be41671 100644
--- a/public/static/css/material-icons.css
+++ b/public/static/css/material-icons.css
@@ -2,12 +2,12 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url(/static/v20/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: url(/static/v21/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
-       url(/static/v20/fonts/MaterialIcons-Regular.woff2) format('woff2'),
-       url(/static/v20/fonts/MaterialIcons-Regular.woff) format('woff'),
-       url(/static/v20/fonts/MaterialIcons-Regular.ttf) format('truetype');
+       url(/static/v21/fonts/MaterialIcons-Regular.woff2) format('woff2'),
+       url(/static/v21/fonts/MaterialIcons-Regular.woff) format('woff'),
+       url(/static/v21/fonts/MaterialIcons-Regular.ttf) format('truetype');
 }
 
 .material-icons {
diff --git a/public/static/v19 b/public/static/v19
deleted file mode 120000
index 945c9b4..0000000
--- a/public/static/v19
+++ /dev/null
@@ -1 +0,0 @@
-.
\ No newline at end of file
diff --git a/public/static/v21 b/public/static/v21
new file mode 120000
index 0000000..945c9b4
--- /dev/null
+++ b/public/static/v21
@@ -0,0 +1 @@
+.
\ No newline at end of file
diff --git a/templates/layouts/app.html.ep b/templates/layouts/app.html.ep
index 5a36685..2b2bf79 100644
--- a/templates/layouts/app.html.ep
+++ b/templates/layouts/app.html.ep
@@ -18,7 +18,7 @@
 	<meta http-equiv="refresh" content="<%= $self->stash('refresh_interval') %>"/>
 % }
 
-	% my $av = 'v20'; # asset version
+	% my $av = 'v21'; # asset version
 	%= stylesheet "/static/${av}/css/app.css"
 	%= stylesheet "/static/${av}/css/material-icons.css"
 	%= stylesheet "/static/${av}/css/jquery-ui.min.css"
diff --git a/templates/layouts/legacy.html.ep b/templates/layouts/legacy.html.ep
index 8b96c8f..e74d2e5 100644
--- a/templates/layouts/legacy.html.ep
+++ b/templates/layouts/legacy.html.ep
@@ -17,7 +17,7 @@
 	<meta http-equiv="refresh" content="<%= $self->stash('refresh_interval') %>"/>
 % }
 
-	% my $av = 'v20'; # asset version
+	% my $av = 'v21'; # asset version
 	%= stylesheet "/static/${av}/css/default.css"
 	%= stylesheet "/static/${av}/css/material-icons.css"
 	%= stylesheet "/static/${av}/css/jquery-ui.min.css"
diff --git a/templates/wagenreihung.html.ep b/templates/wagenreihung.html.ep
index b14c2dc..25a2153 100644
--- a/templates/wagenreihung.html.ep
+++ b/templates/wagenreihung.html.ep
@@ -37,17 +37,6 @@
 %       if ($wagon->is_locomotive or $wagon->is_powercar) {
 %         $bg = 'background-color: #cccccc;';
 %       }
-        <div class="direction" style="
-        top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%;">
-%         if ($wr->has_bad_wagons) {
-%         }
-%         elsif ($wr->direction == 100) {
-            ↓
-%         }
-%         else {
-            ↑
-%         }
-        </div>
         <div class="wagon" style="
         top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%; <%= $bg %>">
 %         if ($wagon->is_locomotive or $wagon->is_powercar) {
@@ -76,30 +65,31 @@
               <i class="material-icons">star</i>
 %           }
 %         }
-        </div>
-        <div class="details" style="
-        top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%;">
-%         if ($wagon->is_first_class) {
-            <span class="firstclass">1</span>
+        <div class="direction">
+%         if ($wr->has_bad_wagons) {
 %         }
-%         elsif ($wagon->is_second_class) {
-            <span class="secondclass">2</span>
+%         elsif ($wr->direction == 100) {
+            <i class="material-icons">arrow_downward</i>
 %         }
 %         else {
-            <span class="noclass"></span>
+            <i class="material-icons">arrow_upward</i>
 %         }
+        </div>
+        </div>
+        <div class="details" style="
+        top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%;">
           <span class="type">
 %=          $wagon->type
           </span>
 %         my $uic_id = $wagon->uic_id;
 %         if (length($uic_id) != 12) {
-            <span style="color: #666666;"><%= $uic_id %></span>
+            <span class="uicunknown"><%= $uic_id %></span>
 %         }
 %         elsif ($wr->train_type eq 'ICE') {
-            <span style="margin-right: 0.2em; color: #999999;"><%= substr($uic_id, 0, 2) %></span><span style="margin-right: 0.2em; color: #999999;"><%= substr($uic_id, 2, 2) %></span><span style="margin-right: 0.2em; color: #999999;"><%= substr($uic_id, 4, 1) %></span><span style="margin-right: 0.2em; font-weight: bold;"><%= substr($uic_id, 5, 3) %></span><span><%= substr($uic_id, 8, 3) %></span><span style="color: #999999;">-<%= substr($uic_id, 11) %></span>
+            <span class="uicexchange"><%= substr($uic_id, 0, 2) %></span><span class="uiccountry"><%= substr($uic_id, 2, 2) %></span><span class="uic5"><%= substr($uic_id, 4, 1) %></span><span class="uictype"><%= substr($uic_id, 5, 3) %></span><span class="uicno"><%= substr($uic_id, 8, 3) %></span><span class="uiccheck"><%= substr($uic_id, 11) %></span>
 %         }
 %         else {
-            <span style="margin-right: 0.2em; color: #999999;"><%= substr($uic_id, 0, 2) %></span><span style="margin-right: 0.2em; color: #999999;"><%= substr($uic_id, 2, 2) %></span><span style="font-weight: bold;"><%= substr($uic_id, 4, 2) %></span>-<span style="margin-right: 0.2em; font-weight: bold;"><%= substr($uic_id, 6, 2) %></span><span><%= substr($uic_id, 8, 3) %></span><span style="color: #999999;">-<%= substr($uic_id, 11) %></span>
+            <span class="uicexchange"><%= substr($uic_id, 0, 2) %></span><span class="uiccountry"><%= substr($uic_id, 2, 2) %></span><span class="uic56"><%= substr($uic_id, 4, 2) %></span><span class="uic78"><%= substr($uic_id, 6, 2) %></span><span class="uicno"><%= substr($uic_id, 8, 3) %></span><span class="uiccheck"><%= substr($uic_id, 11) %></span>
 %         }
         </div>
 %     }
-- 
cgit v1.2.3