wagon order: slightly less ugly. just slightly.

1 files changed, 38 insertions, 30 deletions

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