From a772bb7fef43421ed18a52b1cb1d7bd010e3cf93 Mon Sep 17 00:00:00 2001
From: Daniel Friesel <derf@finalrewind.org>
Date: Thu, 7 May 2015 11:49:04 +0200
Subject: clean template: show moreinfo using javascript

---
 public/collapse.js                | 22 ++++++++++++++++++++++
 public/default.css                | 19 +++++++++++--------
 templates/layouts/default.html.ep |  1 +
 3 files changed, 34 insertions(+), 8 deletions(-)
 create mode 100644 public/collapse.js

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/default.css b/public/default.css
index 6d59b03..e4d36a5 100644
--- a/public/default.css
+++ b/public/default.css
@@ -106,20 +106,23 @@ div.displayclean li .info {
 div.displayclean li .moreinfo {
 	color:#000000;
 	font-size:2.1em;
-	position:absolute;
-	top:5px;
-	left:8em;
+	position:fixed;
+	top:1em;
+	left:1em;
 	min-height: 1em;
-	width: 66%;
+	width: 90%;
 	background-color: white;
 	border: 1px solid black;
 	z-index: 5;
-	visibility: hidden;
+	display: none;
+}
+
+div.displayclean li .collapsed-moreinfo {
+	display: none;
 }
 
-div.displayclean li:hover .moreinfo,
-div.displayclean li .moreinfo:hover {
-	visibility: visible;
+div.displayclean li .expanded-moreinfo {
+	display: block;
 }
 
 div.displayclean li .moreinfo .reason {
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 0264a43..ff67a82 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -10,6 +10,7 @@
 
 	%= stylesheet '/default.css'
 	%= javascript '/jquery-1.10.2.min.js'
+	%= javascript '/collapse.js'
 	%= javascript '/marquee.js'
 	%= javascript begin
 	$(function () {  $('marquee').marquee() });
-- 
cgit v1.2.3