clean template: Show detail RIS / IRIS messages when hovering over a departure

2 files changed, 45 insertions, 3 deletions

diff --git a/cgi/templates/clean.html.ep b/cgi/templates/clean.html.ep
index 085407b..ae1167c 100644
--- a/cgi/templates/clean.html.ep
+++ b/cgi/templates/clean.html.ep
@@ -10,6 +10,26 @@
 <span class="line">
 %= $departure->{train}
 </span>
+% if ($departure->{moreinfo} and @{$departure->{moreinfo}}) {
+<span class="moreinfo">
+<ul>
+% for my $pair (@{$departure->{moreinfo}}) {
+<li>
+% if ($pair->[0]->isa('DateTime')) {
+%= $pair->[0]->strftime('%H:%M')
+% }
+% else {
+%= $pair->[0]
+% }
+:
+<span class="reason">
+%= $pair->[1]
+</span>
+</li>
+% }
+</ul>
+</span>
+% }
 % if ($departure->{info} and length $departure->{info}) {
 <span class="info">
 %= $departure->{info}
diff --git a/cgi/templates/layouts/default.html.ep b/cgi/templates/layouts/default.html.ep
index bf147ca..2c0f858 100644
--- a/cgi/templates/layouts/default.html.ep
+++ b/cgi/templates/layouts/default.html.ep
@@ -29,7 +29,7 @@
 		width:100%;
 	}
 
-	div.displayclean ul {
+	div.displayclean > ul {
 		position:absolute;
 		width:100%;
 		background-color:#F8F8F8;
@@ -42,8 +42,8 @@
 		border-bottom: 1px solid #cccccc;
 	}
 
-	div.displayclean li {
-		height:7em;
+	div.displayclean > ul > li {
+		min-height:7em;
 		background-color:#F8F8F8;
 		display:block;
 		border-width:1px 0;
@@ -86,6 +86,28 @@
 		overflow: hidden;
 	}
 
+	div.displayclean li .moreinfo {
+		color:#000000;
+		font-size:2.1em;
+		position:absolute;
+		top:5px;
+		left:8em;
+		min-height: 1em;
+		width: 70%;
+		background-color: white;
+		border: 1px solid black;
+		z-index: 5;
+		visibility: hidden;
+	}
+
+	div.displayclean li:hover .moreinfo {
+		visibility: visible;
+	}
+
+	div.displayclean li .moreinfo .reason {
+		color: #ff0000;
+	}
+
 	div.displayclean li .dest {
 		color:#000000;
 		font-weight:bold;