diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less index 319624cc3..cee595064 100644 --- a/public/css/icinga/layout-structure.less +++ b/public/css/icinga/layout-structure.less @@ -13,19 +13,22 @@ html { } #header { - height: 3em; - left: 0; - position: fixed; - top: 0; width: 100%; + + padding-bottom: 3em; + position: fixed; + left: 0; + top: 0; + } #sidebar { + width: 12em; + + position: fixed; bottom: 0; left: 0; - position: fixed; - top: 2.25em; - width: 12em; + top: 4.5em; } #main { diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index 7e4f44bd6..abddca94b 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -37,14 +37,18 @@ } #header-logo-container { - height: 2.667em; - margin: .1667em 0 .1667em .7em; - width: 100px; + background: inherit; + height: 6em; + padding: 1.25em; + width: 16em; + position: fixed; + left: 0; + margin-top: -3em; } #header-logo { background-image: url('../img/icinga-logo.svg'); - background-position: left center; + background-position: center center; background-repeat: no-repeat; background-size: contain; display: block; @@ -238,6 +242,12 @@ html.no-js .controls > .tabs { // Collpased sidebar #layout.sidebar-collapsed { + #header-logo-container { + height: 3.167em; + padding: 0.25em 0.125em; + width: 4em; + } + #header-logo { background-image: url('../img/icinga-logo-compact.svg'); } @@ -247,6 +257,7 @@ html.no-js .controls > .tabs { } #sidebar { + top: 2.25em; width: 3em; } diff --git a/public/js/icinga/behavior/navigation.js b/public/js/icinga/behavior/navigation.js index 0a65fa3ae..745892915 100644 --- a/public/js/icinga/behavior/navigation.js +++ b/public/js/icinga/behavior/navigation.js @@ -215,7 +215,7 @@ if ($flyout.length) { $flyout.css({ - top: $target.position().top - parseInt($flyout.css('margin-top'), 10) + top: $target.offset().top + $target.outerHeight() }); } }; diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js index 46e8d2c0d..4287f8f19 100644 --- a/public/js/icinga/ui.js +++ b/public/js/icinga/ui.js @@ -579,7 +579,7 @@ if (typeof $container === 'undefined') { var $header = $('#header'); - var $headerLogo = $('#header-logo'); + var $headerLogo = $('#header-logo-container'); var $main = $('#main'); var $search = $('#search'); var $sidebar = $('#sidebar'); @@ -595,8 +595,7 @@ display: 'none' }); $main.css({ - top: $header.height() + $sidebar.outerHeight(), - zIndex: 2 + top: $header.outerHeight() + $sidebar.outerHeight() }); $sidebar .on( @@ -611,16 +610,14 @@ this.mobileMenu = true; } } else { + $headerLogo.css({ + top: $header.css('height') + }); $main.css({ - top: $header.css('height'), - zIndex: '' + top: $header.css('height') }); $sidebar.css({ - top: $header.css('height'), - zIndex: '' - }); - $header.css({ - height: $header.height() + 'px' + top: $headerLogo.offset().top + $headerLogo.outerHeight() }); if (this.mobileMenu) { @@ -657,7 +654,7 @@ var $controls = $(this); var $fakeControls = $controls.next('.fake-controls'); $controls.css({ - top: $container.offset().top, + top: $container.offsetParent().position().top, width: $fakeControls.outerWidth() }); $fakeControls.height($controls.height());