diff options
| -rw-r--r-- | public/collapse.js | 22 | ||||
| -rw-r--r-- | public/default.css | 19 | ||||
| -rw-r--r-- | templates/layouts/default.html.ep | 1 |
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() }); |