summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2018-12-31 14:43:38 +0100
committerDaniel Friesel <derf@finalrewind.org>2018-12-31 14:43:38 +0100
commit41e25a0b9cd322959137a8cf07f822cfe043b4bb (patch)
tree0290aa2a620da48211cb8cbee7b0a66d73298a0c
parent4188a017bae379bba8a4f3a14bbecc4576916126 (diff)
wagon order: slightly less ugly. just slightly.
-rw-r--r--templates/wagenreihung.html.ep68
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>