From 202b7e81982ce73ede96852ca69b0813bcd0de9d Mon Sep 17 00:00:00 2001
From: Daniel Friesel <derf@finalrewind.org>
Date: Fri, 1 Jan 2021 13:45:38 +0100
Subject: wagon view: improve diretion and exit direction display

---
 templates/layouts/app.html.ep    |  2 +-
 templates/layouts/legacy.html.ep |  2 +-
 templates/wagen.html.ep          | 78 ++++++++++++++++++++++++++--------------
 3 files changed, 54 insertions(+), 28 deletions(-)

(limited to 'templates')

diff --git a/templates/layouts/app.html.ep b/templates/layouts/app.html.ep
index b776d21..ebaf1cb 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 = 'v43'; # asset version
+	% my $av = 'v44'; # asset version
 	% if (session('theme') and session('theme') eq 'dark' or param('dark')) {
 		%= stylesheet "/static/${av}/css/dark.min.css", id => 'theme'
 	% }
diff --git a/templates/layouts/legacy.html.ep b/templates/layouts/legacy.html.ep
index a861488..b45ae6c 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 = 'v43'; # asset version
+	% my $av = 'v44'; # 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/wagen.html.ep b/templates/wagen.html.ep
index 145b3fd..efc2e32 100644
--- a/templates/wagen.html.ep
+++ b/templates/wagen.html.ep
@@ -1,48 +1,74 @@
-<div class="container">
-	% if ($wref->{s} and $wref->{p} and $wref->{ws}) {
+<div class="container singlewagon">
+	% if (not $wref->{e} and $wref->{s} and $wref->{p} and $wref->{ws}) {
 		<p>
-			<%= $wref->{s} %>: Gleis <%= $wref->{p} %> <%= $wref->{ws} %>
+			<%= $wref->{s} %> Gleis <%= $wref->{p} %> <%= $wref->{ws} %>
 		</p>
 	% }
 	% if ($wref->{e} eq 'u') {
-		<div style="float: left;"><i class="material-icons">arrow_upward</i></div>
-		<div style="float: right;"><i class="material-icons">arrow_upward</i></div>
-	% }
-	% for my $wagon_file (@{$wagon_files // [] }) {
-		% if (defined $wref->{d}) {
-			<div style="text-align: center;">
-				% if ($wref->{d} == 0) {
-					<i class="material-icons">arrow_back</i>
-				% }
-				% else {
-					<i class="material-icons">arrow_forward</i>
-				% }
+		% if ($wref->{s} and $wref->{p} and $wref->{ws}) {
+			<div class="platform">
+				<%= $wref->{s} %><br/>Gleis <%= $wref->{p} %> <%= $wref->{ws} %>
+				<div class="sign-left"><i class="material-icons">arrow_upward</i></div>
+				<div class="sign-right"><i class="material-icons">arrow_upward</i></div>
 			</div>
 		% }
-		<div style="clear: both;">
-			<a href="<%= $wagon_file %>"><img src="<%= $wagon_file %>" style="width: 100%;"></a>
-		</div>
 	% }
-	% if ($wref->{e} eq 'd') {
-		<div style="float: left;"><i class="material-icons">arrow_downward</i></div>
-		<div style="float: right;"><i class="material-icons">arrow_downward</i></div>
+	% elsif (defined $wref->{d} and $wref->{e} ne 'u') {
+		% if ($wref->{d} == 0) {
+			<div class="sign-left"><i class="material-icons">arrow_back</i></div>
+			<div class="sign-right"><i class="material-icons">arrow_back</i></div>
+			<div class="sign-center"><i class="material-icons">arrow_back</i></div>
+		% }
+		% else {
+			<div class="sign-left"><i class="material-icons">arrow_forward</i></div>
+			<div class="sign-right"><i class="material-icons">arrow_forward</i></div>
+			<div class="sign-center"><i class="material-icons">arrow_forward</i></div>
+		% }
 	% }
-	% if (defined $wref->{d}) {
-		<div style="text-align: center;">
+	% for my $wagon_file (@{$wagon_files // [] }) {
+		% if ($wagon_file ne $wagon_files->[0] and defined $wref->{d}) {
 			% if ($wref->{d} == 0) {
-				<i class="material-icons">arrow_back</i>
+				<div class="sign-left"><i class="material-icons">arrow_back</i></div>
+				<div class="sign-right"><i class="material-icons">arrow_back</i></div>
+				<div class="sign-center"><i class="material-icons">arrow_back</i></div>
 			% }
 			% else {
-				<i class="material-icons">arrow_forward</i>
+				<div class="sign-left"><i class="material-icons">arrow_forward</i></div>
+				<div class="sign-right"><i class="material-icons">arrow_forward</i></div>
+				<div class="sign-center"><i class="material-icons">arrow_forward</i></div>
 			% }
+		% }
+		<div style="clear: both;">
+			<a href="<%= $wagon_file %>"><img class="wagonfile" src="<%= $wagon_file %>"></a>
 		</div>
 	% }
+	% if ($wref->{e} eq 'd') {
+		<div class="sign-left"><i class="material-icons">arrow_downward</i></div>
+		<div class="sign-right"><i class="material-icons">arrow_downward</i></div>
+		% if ($wref->{s} and $wref->{p} and $wref->{ws}) {
+			<div class="platform">
+				<%= $wref->{s} %><br/>Gleis <%= $wref->{p} %> <%= $wref->{ws} %>
+			</div>
+		% }
+	% }
+	% elsif (defined $wref->{d} and $wref->{e} ne 'd') {
+		% if ($wref->{d} == 0) {
+			<div class="sign-left"><i class="material-icons">arrow_back</i></div>
+			<div class="sign-right"><i class="material-icons">arrow_back</i></div>
+			<div class="sign-center"><i class="material-icons">arrow_back</i></div>
+		% }
+		% else {
+			<div class="sign-left"><i class="material-icons">arrow_forward</i></div>
+			<div class="sign-right"><i class="material-icons">arrow_forward</i></div>
+			<div class="sign-center"><i class="material-icons">arrow_forward</i></div>
+		% }
+	% }
 	% if ($wagon_data->{name}) {
 		<p>
 			<%= $wagon_data->{name} %>
 		</p>
 	% }
-	<p class="copyright" style="clear: both;">
+	<p class="copyright">
 		Abbildung © Seemanngrafik d.i.p. im Auftrag der Deutschen Bahn AG,
 		lizensiert unter CC-BY-4.0
 	</p>
-- 
cgit v1.2.3