diff options
| author | Daniel Friesel <derf@finalrewind.org> | 2019-12-21 23:06:12 +0100 |
|---|---|---|
| committer | Daniel Friesel <derf@finalrewind.org> | 2019-12-21 23:06:12 +0100 |
| commit | a578f8f66613a9428617338f8270b9be21c7816b (patch) | |
| tree | ffad057988171d0aacedd829e3efb4ce185b5d6a /templates | |
| parent | e27db34a1e3f4166980c0088403668fc332e9e82 (diff) | |
use CSS classes for wagonorder template (1/2)
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/wagenreihung.html.ep | 25 |
1 files changed, 11 insertions, 14 deletions
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; |