From 0aeb6403a35a4790a786681470ae2d2acc6a585c Mon Sep 17 00:00:00 2001
From: Daniel Friesel <derf@finalrewind.org>
Date: Thu, 27 Dec 2018 15:24:53 +0100
Subject: Optimize wagon order view for smartphones (vertical display)

---
 templates/wagenreihung.html.ep | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/templates/wagenreihung.html.ep b/templates/wagenreihung.html.ep
index 9055f00..642c460 100644
--- a/templates/wagenreihung.html.ep
+++ b/templates/wagenreihung.html.ep
@@ -3,26 +3,29 @@
 (experimentell, die URL wird sich noch ändern und die Anzeige wird noch schöner)
 </div>
 
-<div style="position: relative; width: 100%; height: 2em;">
+<div style="position: relative; width: 100%; height: 60ex;">
 % for my $section ($wr->sections) {
-<div style="position: absolute; left: <%= $section->{start_percent} %>%; right: <%= 100 - $section->{end_percent} %>%; top: 0em; bottom: 0em; text-align: center;">
+<div style="position: absolute; left: 1em; width: 2em;
+top: <%= $section->{start_percent} %>%; bottom: <%= 100 - $section->{end_percent} %>%; text-align: center;">
 %= $section->{name}
 </div>
 % }
-</div>
-<div style="position: relative; width: 100%; height: 2em;">
 % for my $wagon ($wr->wagons) {
 % my $bg = '';
 % if ($wagon->is_first_class) {
 % $bg = 'background-color: #ffff99;';
 % }
-<div style="position: absolute; left: <%= $wagon->{position}{start_percent} %>%; right: <%= 100 - $wagon->{position}{end_percent} %>%; top: 0em; bottom: 0em; border: 1px solid black; text-align: center; <%= $bg %>">
+<div style="position: absolute; left: 3em; right: 0em;
+top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%;
+border: 1px solid black; <%= $bg %>">
 % if ($wagon->is_locomotive or $wagon->is_powercar) {
 LOK
 % }
 % else {
-%= $wagon->{number} // '?'
+%= $wagon->number // '?'
 % }
+&nbsp;&nbsp;&nbsp;
+%= $wagon->type
 </div>
 % }
 </div>
-- 
cgit v1.2.3