diff options
| -rw-r--r-- | public/collapse.js | 22 | ||||
| -rw-r--r-- | public/infoscreen.css | 47 | ||||
| -rw-r--r-- | templates/infoscreen.html.ep | 35 |
3 files changed, 104 insertions, 0 deletions
diff --git a/public/collapse.js b/public/collapse.js new file mode 100644 index 0000000..d38b30a --- /dev/null +++ b/public/collapse.js @@ -0,0 +1,22 @@ +$(document).ready(function() { + $('div.displayclean > ul > li').each(function() { + $(this).click(function() { + $(this).children('.moreinfo').each(function() { + if ($(this).hasClass('expanded-moreinfo')) { + $(this).removeClass('expanded-moreinfo'); + $(this).addClass('collapsed-moreinfo'); + } + else { + $('.moreinfo').each(function() { + if ($(this).hasClass('expanded-moreinfo')) { + $(this).removeClass('expanded-moreinfo'); + $(this).addClass('collapsed-moreinfo'); + } + }); + $(this).removeClass('collapsed-moreinfo'); + $(this).addClass('expanded-moreinfo'); + } + }); + }); + }); +}); diff --git a/public/infoscreen.css b/public/infoscreen.css index e3988d1..38d78cd 100644 --- a/public/infoscreen.css +++ b/public/infoscreen.css @@ -128,6 +128,53 @@ div.displayclean li .time { top:5px; } +div.displayclean li .moreinfo { + color:#000000; + font-size:2.1em; + position:fixed; + top:0em; + padding-top: 1em; + left:0em; + padding-left: 1em; + right:0em; + padding-right: 1em; + bottom:0em; + background-color: white; + z-index: 5; + display: none; + overflow: auto; +} + +div.displayclean li .collapsed-moreinfo { + display: none; +} + +div.displayclean li .expanded-moreinfo { + display: block; +} + +div.displayclean li .moreinfo .mheader { + text-align: center; + background-color: #dddddd; + font-size: 120%; +} + +div.displayclean li .moreinfo .mroute { + margin-bottom: 0.6em +} + +div.displayclean li .moreinfo .mroute .separator { + color: #999999; +} + +div.displayclean li .moreinfo .mroute .important-stop { + color: #000000; +} + +div.displayclean li .moreinfo .mroute .generic-stop { + color: #555555; +} + div.about { font-family: Sans-Serif; color: #666666; diff --git a/templates/infoscreen.html.ep b/templates/infoscreen.html.ep index acf5140..e87cc5e 100644 --- a/templates/infoscreen.html.ep +++ b/templates/infoscreen.html.ep @@ -9,6 +9,7 @@ %= stylesheet '/infoscreen.css' %= javascript '/jquery-2.1.1.min.js' + %= javascript '/collapse.js' </head> <body> @@ -37,6 +38,40 @@ <span class="line <%= $linetype %>"> %= $departure->line </span> <!-- line --> + <span class="moreinfo"> + <div class="mheader"> + <span class="train-line"><%= $departure->line %></span> + : + <span class="train-route"> +% if ($departure->can('lineref') and $departure->lineref) { +%= $departure->lineref->route +% } +% elsif ($departure->can('route_pre') and $departure->can('route_post')) { +% if ($departure->route_pre) { +%= ($departure->route_pre)[0]->{stop} +% } +% if ($departure->route_post) { +% ($departure->route_post)[-1]->{stop} +% } +% } + </span> <!-- train-route --> + </div> <!-- mheader --> +% if ($departure->can('route_pre')) { + Fahrplan: + <ul> +% for my $stop ($departure->route_pre) { + <li><%= $stop->{dep_time} %> <%= $stop->{stop} %></li> +% } + </ul> +% } +% if ($departure->can('route_post')) { + <ul> +% for my $stop ($departure->route_post) { + <li><%= $stop->{arr_time} %> <%= $stop->{stop} %></li> +% } + </ul> +% } + </span> <!-- moreinfo --> <span class="route"> % if ($departure->can('route_interesting') and $departure->route_interesting) { %= join(' - ', map { $_->{stop_suf} } ($departure->route_interesting)); |