diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index 86f2762a1..fa08f0e06 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -226,3 +226,12 @@ html.no-js .controls > .tabs { background-color: @color-notification-warning; } } + +// Z-Index correction +#main { + z-index: 1; +} + +#sidebar { + z-index: 2; +} diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 2f52f67fd..3e898ee00 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -30,6 +30,15 @@ color: @icinga-blue; } +#menu .nav-item { + vertical-align: middle; + + > a { + overflow: hidden; + text-overflow: ellipsis; + } +} + #menu .nav-level-1 > .nav-item { border-left: 5px solid transparent; line-height: 2.167em; // 26 px @@ -104,7 +113,6 @@ } // Badge offset correction - #menu > nav > .nav-level-1 > .badge-nav-item > a > .badge { margin-top: 0.2em; } @@ -114,26 +122,24 @@ } // Hovered menu - -#menu .nav-level-1 > .nav-item.hover { - position: relative; - - &:before { - border: 0.5em solid rgba(0, 0, 0, 0); - border-right-color: @text-color; - content: ""; - position: absolute; - right: 0; - top: 30%; - } - +#menu .nav-level-1 > .nav-item:not(.active):hover { > .nav-level-2 { + &:before { + border: 0.5em solid rgba(0, 0, 0, 0); + border-right-color: @text-color; + content: ""; + width: 1em; + position: fixed; + margin-left: -1em; + margin-top: 0.5em; + } + background-color: @text-color; color: @text-color-inverted; - left: 100%; padding: @vertical-padding 0; - position: absolute; - top: 0; + position: fixed; + margin-left: 15.583em; + margin-top: -3.2em; width: 14em; > .nav-item { @@ -152,20 +158,6 @@ } } -#layout.hoveredmenu { - #main { - z-index: 2; - } - - #sidebar { - z-index: 3; - } - - #menu { - overflow: visible; - } -} - // Accessibility skip links .skip-links { position: relative; diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less index c88c4efb9..3af0a8b02 100644 --- a/public/css/icinga/responsive.less +++ b/public/css/icinga/responsive.less @@ -106,6 +106,16 @@ #layout.twocols #col2 { border-left: 1px solid @gray-lighter; display: block; + + > .controls > .tabs:before { + background-color: @icinga-blue; + content: ""; + display: block; + height: 3em; + margin-left: -1px; + width: 1px; + position: fixed; + } } #layout.twocols > #main > .container { diff --git a/public/js/icinga/behavior/navigation.js b/public/js/icinga/behavior/navigation.js index bd711799c..2d0c57b2f 100644 --- a/public/js/icinga/behavior/navigation.js +++ b/public/js/icinga/behavior/navigation.js @@ -10,9 +10,8 @@ Icinga.EventListener.call(this, icinga); this.on('click', '#menu a', this.linkClicked, this); this.on('click', '#menu tr[href]', this.linkClicked, this); - this.on('mouseenter', '#menu > nav > ul > li', this.menuTitleHovered, this); - this.on('mouseleave', '#sidebar', this.leaveSidebar, this); this.on('rendered', '#menu', this.onRendered, this); + this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.fixFlyoutPosition, this); /** * The DOM-Path of the active item @@ -23,15 +22,6 @@ */ this.active = null; - /** - * The DOM-Path of the hovered item - * - * @see getDomPath - * - * @type {null|Array} - */ - this.hovered = null; - /** * The menu * @@ -39,6 +29,7 @@ */ this.$menu = null; }; + Navigation.prototype = new Icinga.EventListener(); /** @@ -71,7 +62,7 @@ }; /** - * Re-render the menu selection and menu hovering according to the current state + * Re-render the menu selection according to the current state */ Navigation.prototype.refresh = function() { // restore selection to current active element @@ -89,14 +80,6 @@ $el.html($el.html()); } } - - // restore hovered menu to current hovered element - if (this.hovered) { - var hovered = this.icinga.utils.getElementByDomPath(this.hovered); - if (hovered) { - this.hoverElement($(hovered)); - } - } }; /** @@ -107,26 +90,13 @@ Navigation.prototype.linkClicked = function(event) { var $a = $(this); var href = $a.attr('href'); - var $li; var _this = event.data.self; var icinga = _this.icinga; - _this.hovered = null; if (href.match(/#/)) { // ...it may be a menu section without a dedicated link. // Switch the active menu item: _this.setActive($a); - $li = $a.closest('li'); - if ($li.hasClass('hover')) { - $li.removeClass('hover'); - } - if (href === '#') { - // Allow to access dropdown menu by keyboard - if ($a.hasClass('dropdown-toggle')) { - $a.closest('li').toggleClass('hover'); - } - return; - } } else { _this.setActive($(event.target)); } @@ -233,6 +203,22 @@ this.active = null; }; + /** + * Fix top position of the flyout menu + * + * @param e + */ + Navigation.prototype.fixFlyoutPosition = function(e) { + var $target = $(this); + var $flyout = $target.find('.nav-level-2'); + + if ($flyout.length) { + $flyout.css({ + top: $target.position().top - parseInt($flyout.css('margin-top'), 10) + }); + } + }; + /** * Called when the history changes * @@ -267,87 +253,6 @@ return this.active; }; - Navigation.prototype.menuTitleHovered = function(event) { - if ($('#layout').hasClass('minimal-layout')) { - return; - } - - var $li = $(this), - delay = 800, - _this = event.data.self; - - _this.hovered = null; - if ($li.hasClass('active')) { - $li.siblings().removeClass('hover'); - return; - } - if ($li.children('ul').children('li').length === 0) { - return; - } - if ($('#menu').scrollTop() > 0) { - return; - } - - if ($('#layout').hasClass('hoveredmenu')) { - delay = 0; - } - - setTimeout(function () { - try { - if (!$li.is('li:hover')) { - return; - } - if ($li.hasClass('active')) { - return; - } - } catch(e) { /* Bypass because if IE8 */ } - - $li.siblings().each(function () { - var $sibling = $(this); - try { - if ($sibling.is('li:hover')) { - return; - } - } catch(e) { /* Bypass because if IE8 */ }; - if ($sibling.hasClass('hover')) { - $sibling.removeClass('hover'); - } - }); - _this.hoverElement($li); - }, delay); - }; - - Navigation.prototype.leaveSidebar = function (event) { - var $sidebar = $(this), - $li = $sidebar.find('li.hover'), - _this = event.data.self; - if (! $li.length) { - $('#layout').removeClass('hoveredmenu'); - return; - } - - setTimeout(function () { - try { - if ($li.is('li:hover') || $sidebar.is('sidebar:hover')) { - return; - } - } catch(e) { /* Bypass because if IE8 */ }; - $li.removeClass('hover'); - $('#layout').removeClass('hoveredmenu'); - }, 500); - _this.hovered = null; - }; - - Navigation.prototype.hoverElement = function ($li) { - $('#layout').addClass('hoveredmenu'); - $li.addClass('hover'); - if ($li[0]) { - this.hovered = this.icinga.utils.getDomPath($li[0]); - } else { - this.hovered = null; - } - }; - Icinga.Behaviors.Navigation = Navigation; }) (Icinga, jQuery);