From ce220c5ea7bdf67e97ba9fd32d58d38319fc18a3 Mon Sep 17 00:00:00 2001
From: Thomas Gelf <thomas@gelf.net>
Date: Mon, 26 May 2014 08:18:47 +0000
Subject: [PATCH] sidebar/menu: menu should be scrollable

This allows us to scroll menus not fitting into available screen height.
Plays nice with menu hovering, however once you scroll down your menu
you'll temporarily disable the hover-menu-feature.

fixes #6283
---
 public/css/icinga/menu.less | 24 ++++++++++++++++--------
 public/js/icinga/events.js  |  4 ++++
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 2d2882013..aa5c26ec8 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -1,4 +1,13 @@
 
+#menu {
+  max-height: 100%;
+  overflow: auto;
+}
+
+#layout.hoveredmenu #menu {
+  overflow: visible;
+}
+
 #menu, #menu ul {
   margin: 0;
   padding: 0;
@@ -194,12 +203,15 @@
 
 /* END of Hoverable menu */
 
+#menu form {
+  width: 100%;
+}
 
 #menu input.search {
-  margin: 0 0 0 0.5em;
-  padding: 0 0.5em 0 2.5em;
+  margin: 0;
+  padding: 0 0.5em 0 3em;
   border: none;
-  width: 12.5em;
+  width: 100%;
   border-radius: 0;
   height: 2.5em;
   display: block;
@@ -207,7 +219,7 @@
   background-color: transparent;
   background-image: url('../img/icons/search.png');
   background-repeat: no-repeat;
-  background-position: 0.7em center;
+  background-position: 1.2em center;
   color: #f5f5f5;
   text-shadow: -1px 1px 0 #555555;
   border-bottom: 1px solid #888;
@@ -229,11 +241,7 @@
 #menu input.search.active {
   background-color: white;
   color: #121212;
-  width: 13em;
   text-shadow: none;
-  padding-left: 3em;
-  margin-left: 0;
-  background-position: 1.2em center;
 }
 
 #menu input.search.active::-moz-placeholder {
diff --git a/public/js/icinga/events.js b/public/js/icinga/events.js
index 0035fe0e7..2142a7c6b 100644
--- a/public/js/icinga/events.js
+++ b/public/js/icinga/events.js
@@ -147,6 +147,9 @@
             if ($li.children('ul').children('li').length === 0) {
                 return;
             }
+            if ($('#menu').scrollTop() > 0) {
+                return;
+            }
 
             if ($('#layout').hasClass('hoveredmenu')) {
                 delay = 0;
@@ -179,6 +182,7 @@
             var $sidebar = $(this);
             var $li = $sidebar.find('li.hover');
             if (! $li.length) {
+                $('#layout').removeClass('hoveredmenu');
                 return;
             }