Optimize wagon order view for smartphones (vertical display)

(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 // '?'

% }

   

%= $wagon->type

</div>

% }

</div>