summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--public/collapse.js22
-rw-r--r--public/default.css19
-rw-r--r--templates/layouts/default.html.ep1
3 files changed, 34 insertions, 8 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/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() });