diff options
| -rw-r--r-- | public/static/css/app.css | 65 | ||||
| -rw-r--r-- | templates/wagenreihung.html.ep | 25 |
2 files changed, 76 insertions, 14 deletions
diff --git a/public/static/css/app.css b/public/static/css/app.css index 1565202..3e4b3bd 100644 --- a/public/static/css/app.css +++ b/public/static/css/app.css @@ -29,6 +29,71 @@ div.content { margin: 0; } +.wagonorder { + position: relative; + width: 100%; + height: 100ex; +} + +.wagonorder .section { + position: absolute; + left: 1em; + width: 2em; + text-align: center; +} + +.wagonorder .direction { + position: absolute; + left: 10em; +} + +.wagonorder .wagon { + position: absolute; + left: 3em; + min-width: 6em; + border: 1px solid #999999; + padding-left: 0.2em; + padding-right: 0.2em; +} + +.wagonorder .wagon ~ .wagon { + border-top: none; +} + +.wagonorder .details { + position: absolute; + left: 11em; + right: 0em; +} + +.wagonorder .details .firstclass { + display: inline-block; + width: 0.8em; + text-align: center; + color: #ffffff; + background-color: #666666; + border: 1px solid #666666; +} + +.wagonorder .details .secondclass { + display: inline-block; + width: 0.8em; + text-align: center; + color: #666666; + border: 1px solid #666666; +} + +.wagonorder .details .noclass { + display: inline-block; + width: 0.8em; +} + +.wagonorder .details .type { + display: inline-block; + width: 5em; + color: #666666; +} + div.app { border-width:1px 2px; width:100%; diff --git a/templates/wagenreihung.html.ep b/templates/wagenreihung.html.ep index 3b403cb..b14c2dc 100644 --- a/templates/wagenreihung.html.ep +++ b/templates/wagenreihung.html.ep @@ -20,11 +20,11 @@ </div> </div> <div class="container"> - <div style="position: relative; width: 100%; height: 100ex;"> + <div class="wagonorder"> % if (not $wr->has_bad_wagons) { % 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;"> + <div class="section" style=" + top: <%= $section->{start_percent} %>%; bottom: <%= 100 - $section->{end_percent} %>%;"> %= $section->{name} </div> % } @@ -37,7 +37,7 @@ % if ($wagon->is_locomotive or $wagon->is_powercar) { % $bg = 'background-color: #cccccc;'; % } - <div style="position: absolute; left: 10em; + <div class="direction" style=" top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%;"> % if ($wr->has_bad_wagons) { % } @@ -48,12 +48,9 @@ ↑ % } </div> - <div style="position: absolute; left: 3em; - top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%; - min-width: 6em; - border: 1px solid #999999; padding-left: 0.2em; padding-right: 0.2em; <%= $bg %>"> + <div class="wagon" style=" + top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%; <%= $bg %>"> % if ($wagon->is_locomotive or $wagon->is_powercar) { - LOK % } % else { %= $wagon->number // '?' @@ -80,18 +77,18 @@ % } % } </div> - <div style="position: absolute; left: 11em; right: 0em; + <div class="details" style=" top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%;"> % if ($wagon->is_first_class) { - <span style="display: inline-block; width: 0.8em; text-align: center; color: #ffffff; background-color: #666666; border: 1px solid #666666;">1</span> + <span class="firstclass">1</span> % } % elsif ($wagon->is_second_class) { - <span style="display: inline-block; width: 0.8em; text-align: center; color: #666666; border: 1px solid #666666;">2</span> + <span class="secondclass">2</span> % } % else { - <span style="display: inline-block; width: 0.8em;"></span> + <span class="noclass"></span> % } - <span style="display: inline-block; width: 5em; color: #666666;"> + <span class="type"> %= $wagon->type </span> % my $uic_id = $wagon->uic_id; |