summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2019-12-21 23:06:12 +0100
committerDaniel Friesel <derf@finalrewind.org>2019-12-21 23:06:12 +0100
commita578f8f66613a9428617338f8270b9be21c7816b (patch)
treeffad057988171d0aacedd829e3efb4ce185b5d6a
parente27db34a1e3f4166980c0088403668fc332e9e82 (diff)
use CSS classes for wagonorder template (1/2)
-rw-r--r--public/static/css/app.css65
-rw-r--r--templates/wagenreihung.html.ep25
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;