diff --git a/application/layouts/scripts/body.phtml b/application/layouts/scripts/body.phtml index e04aaf1dd..005309aef 100644 --- a/application/layouts/scripts/body.phtml +++ b/application/layouts/scripts/body.phtml @@ -24,41 +24,45 @@ if ($this->layout()->inlineLayout) { ?> +
layout()->isIframe): ?> - + -
-
data-icinga-module="" - data-icinga-title="title) ? $this->escape($this->title) . ' :: ' : '' ?>defaultTitle ?>" - data-icinga-url="escape(Url::fromRequest()->without('renderLayout')->getAbsoluteUrl()); ?>" - - style="display: block"> - render($inlineLayoutScript) ?> -
-
-
-
-
+
+
+ data-icinga-module="" + + data-icinga-url="escape(Url::fromRequest()->without('renderLayout')->getAbsoluteUrl()); ?>" + + > + render($inlineLayoutScript) ?> +
+
+
+
- compact): ?> -
render('list/components/hostssummary.phtml') ?> render('list/components/selectioninfo.phtml') ?> diff --git a/modules/monitoring/application/views/scripts/list/services.phtml b/modules/monitoring/application/views/scripts/list/services.phtml index 0c7865316..60a39a32a 100644 --- a/modules/monitoring/application/views/scripts/list/services.phtml +++ b/modules/monitoring/application/views/scripts/list/services.phtml @@ -141,7 +141,6 @@ if (! $this->compact): ?>
compact): ?> -
render('list/components/servicesummary.phtml') ?> render('list/components/selectioninfo.phtml') ?> diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less index c0a0ca10c..533e283f2 100644 --- a/modules/monitoring/public/css/module.less +++ b/modules/monitoring/public/css/module.less @@ -1,17 +1,10 @@ /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ -// Styles for the bottom status bar in the host and service list views -.monitoring-statusbar-ghost { - display: block; - visibility: hidden; -} - .monitoring-statusbar { + position: relative; background-color: @body-bg-color; border-top: 1px solid @gray-lighter; - bottom: 0; padding: .25em @gutter; - position: fixed; line-height: 1; &:before { @@ -200,17 +193,25 @@ // Quick actions .quick-actions { + margin: 0 -.5em; + + &:last-child { + margin-bottom: -.25em; + } + li { color: @icinga-blue; - padding: 0 0.6em; } - li:first-child { - padding-left: 0; - } + a, + button { + .rounded-corners(); + padding: .25em .5em; - li:last-child { - padding-right: 0; + &:hover { + background-color: @gray-lighter; + text-decoration: none; + } } } diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less index 80ce4d006..cc3fe019b 100644 --- a/public/css/icinga/layout-structure.less +++ b/public/css/icinga/layout-structure.less @@ -1,53 +1,45 @@ /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ html { + height: 100%; font-family: 'default-layout'; } +body { + height: 100%; +} + #layout { height: 100%; - width: 100%; - position: fixed; - left: 0; - top: 0; + display: flex; + flex-direction: column; // Prevent nav-level-2 flyovers from being covered by #main z-index: 0; } -#header { - width: 100%; - padding-bottom: 3em; - position: fixed; - left: 0; - top: 0; +#content-wrapper { + flex: 1 1 auto; + display: flex; + height: 0; } #sidebar { - width: 12em; - position: fixed; - bottom: 0; - left: 0; - top: 4.5em; + width: 16em; + display: flex; + flex-direction: column; + position: relative; } #main { - position: fixed; - bottom: 0; - left: 12em; - right: 0; - top: 2.25em; + flex: 1; + display: flex; } .iframe { #header, #sidebar { display: none; } - - #main { - left: 0; - top: 0; - } } #fileupload-frame-target { @@ -103,17 +95,11 @@ html { height: 1.5em; font-size: 0.75em; padding: 0.2em 0 0; - background-color: @icinga-blue; } .controls > ul.tabs > li > a { line-height: 1.5em; } - - #main { - left: 0; - top: 0 !important; - } } .controls-separated, diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index 2dea1e2f1..7c76e79a9 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -26,24 +26,16 @@ #header, #login, -#main > .container, -#menu { +#content-wrapper { font-size: @font-size; line-height: @line-height; } -#header { - background-color: @icinga-blue; -} - #header-logo-container { - background: inherit; + background: @icinga-blue; height: 6em; padding: 1.25em; width: 16em; - position: fixed; - left: 0; - margin-top: -3em; } #header-logo, @@ -105,22 +97,23 @@ .clearfix(); & > .container { - float: left; - // Column width controlled by #layout - width: 100%; - - // Container scrolling - height: 100%; + width: 0; overflow: auto; + flex: 1 1 auto; + display: flex; + flex-direction: column; + + &:empty { + display: none; + } & > .content { + flex: 1 1 auto; + overflow: auto; padding: @gutter; - z-index: 2; } & > .controls { - z-index: 3; - padding-left: @gutter; padding-right: @gutter; @@ -128,6 +121,11 @@ // Remove gutter for tabs margin-left: -1 * @gutter; margin-right: -1 * @gutter; + height: 2.5em; + } + + .tabs:first-child:not(:last-child) { + margin-bottom: .5em; } } } @@ -162,19 +160,9 @@ } .controls { - // Override default transparent background because scrolled content is positioned beneath controls and could be seen - // through otherwise - background-color: @body-bg-color; - > .tabs { - height: 2.6em; - margin-top: -2.6em; overflow: hidden; } - - > .tabs-spacer { - margin-bottom: 1em; - } } // Display tabs if JS is disabled @@ -245,15 +233,6 @@ html.no-js .controls > .tabs { } } -// Z-Index correction -#main { - z-index: 1; -} - -#sidebar { - z-index: 2; -} - // Collapsed sidebar #layout:not(.minimal-layout).sidebar-collapsed { #header-logo-container { @@ -266,13 +245,8 @@ html.no-js .controls > .tabs { background-image: url('../img/icinga-logo-compact.svg'); } - #main { - left: 3em; - } - #sidebar { - top: 2.25em; - width: 3em; + width: 4em; } #open-sidebar { diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 105e93b15..3b2c60f5a 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -9,20 +9,13 @@ @icon-width: 1.7em; // 1.5em width + 0.2em right margin -#menu-container { - height: 100%; - overflow: hidden; - position: relative; -} - #menu { background-color: @menu-bg-color; box-shadow: inset -.5em 0 1em rgba(0, 0, 0, .3); - height: 100%; width: 100%; + flex: 1; + overflow: auto; overflow-x: hidden; - overflow-y: auto; - position: absolute; } #layout:not(.minimal-layout) #menu { @@ -38,6 +31,8 @@ vertical-align: middle; > a { + position: relative; + &:focus { outline: none; } @@ -91,7 +86,7 @@ &.active:not(.selected) > a:focus, &.active:not(.selected) > a:hover { - background-color: mix(#000, @menu-active-bg-color, 20); + background-color: darken(@menu-active-bg-color, 20); } &:not(.selected) > a:hover, @@ -148,9 +143,9 @@ ul:not(.nav-level-2) > .selected > a { padding: 0.364em 0.545em 0.364em (@icon-width + .75em)/@font-size-small; } - &:not(.selected):not(.active) > a:hover, - &:not(.selected):not(.active) > a:focus { - background-color: mix(#000, @menu-active-bg-color, 20); + &:not(.selected):not(.active) > a:not(.badge):hover, + &:not(.selected):not(.active) > a:not(.badge):focus { + background-color: darken(@menu-active-bg-color, 20); color: @menu-2ndlvl-highlight-color; } @@ -231,7 +226,7 @@ ul:not(.nav-level-2) > .selected > a { &:hover, &:focus { - background-color: mix(#000, @menu-bg-color, 20); + background-color: darken(@menu-bg-color, 20); } } @@ -256,6 +251,7 @@ ul:not(.nav-level-2) > .selected > a { padding: @vertical-padding 0; width: 14em; position: fixed; + z-index: 1; &:after { .transform(rotate(45deg)); @@ -329,6 +325,8 @@ ul:not(.nav-level-2) > .selected > a { // Accessibility skip links .skip-links { position: relative; + font-size: 1/.75em; + ul { list-style-type: none; margin: 0; @@ -356,9 +354,6 @@ ul:not(.nav-level-2) > .selected > a { } #sidebar.expanded { - bottom: 0 !important; - height: auto !important; - #mobile-menu-toggle .icon-menu { display: none; } @@ -373,7 +368,7 @@ ul:not(.nav-level-2) > .selected > a { } .search-input:focus ~ .search-reset:hover { - background-color: mix(#000, @menu-active-bg-color, 20); + background-color: darken(@menu-active-bg-color, 20); } .search-reset { @@ -391,7 +386,7 @@ ul:not(.nav-level-2) > .selected > a { &:focus, &:hover { - background-color: mix(#000, @menu-bg-color, 20); + background-color: darken(@menu-bg-color, 20); outline: none; } } @@ -437,6 +432,8 @@ input[type=text].search-input { // Toggle sidebar button #toggle-sidebar { + font-size: 1/.75em; + // Reset button styles background: none; border: none; @@ -477,3 +474,48 @@ input[type=text].search-input { width: 1.4em; margin-right: 0; } + +#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li, +#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li { + &.badge-nav-item { + display: flex; + align-items: center; + } + + &.badge-nav-item a:not(.badge) { + flex: 1 1 auto; + width: 0; + } + + &.badge-nav-item a.badge { + color: white; + flex: 0 1 auto; + margin-right: 1em; + padding: .25em; + width: auto; + + &:hover { + opacity: .6; + } + } +} + +#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li { + &.badge-nav-item:not(.selected) { + &:hover { + background-color: darken(@menu-bg-color, 20); + + a { + color: white; + } + } + } +} + +#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li { + &.badge-nav-item { + &:hover { + background-color: lighten(@icinga-blue, 80); + } + } +} diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less index 8260e3d22..993fe836f 100644 --- a/public/css/icinga/responsive.less +++ b/public/css/icinga/responsive.less @@ -61,17 +61,37 @@ } } +#layout:not(.minimal-layout) { + #mobile-menu-toggle { + display: none; + } +} + #layout.minimal-layout { - #main { - left: 0; + #sidebar { + width: 100%; } - #sidebar { - top: 0 !important; - height: 32px; - padding-bottom: 2.5em; - width: 100%; - z-index: 3; + #header-logo-container { + width: auto; + height: 2.5em; + padding: 0; + background: inherit; + } + + #header-logo { + float: left; + width: 6em; + height: 2em; + margin: .25em; + } + + #mobile-menu-toggle { + float: right; + } + + #sidebar:not(.expanded) #menu { + display: none; } #menu { @@ -80,6 +100,10 @@ box-shadow: none; } + #content-wrapper { + flex-direction: column; + } + ul > .selected > a:after, ul > .nav-item.active:after { display: none; @@ -174,25 +198,12 @@ // Columns -#layout #col2 { - display: none; -} - #layout.twocols #col2 { border-left: 1px solid @gray-lighter; - display: block; -} - -#layout.twocols > #main > .container { - width: 50%; -} - -#layout.twocols.wide-layout #col1 { - width: 33.33%; } #layout.twocols.wide-layout #col2 { - width: 66.66%; + flex-grow: 2; } // Safe areas for iPhone X diff --git a/public/css/icinga/setup.less b/public/css/icinga/setup.less index a348c3144..53b72d87b 100644 --- a/public/css/icinga/setup.less +++ b/public/css/icinga/setup.less @@ -1,10 +1,4 @@ /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ - -#layout { - overflow: auto; // TODO: Shouldn't be necessary, here, IMHO -} - - #setup { > .header { width: 100%; diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less index d1cf11e74..4ef51e2d0 100644 --- a/public/css/icinga/tabs.less +++ b/public/css/icinga/tabs.less @@ -3,6 +3,7 @@ // Styles for tab navigation of containers .tabs { + background-color: @icinga-blue; letter-spacing: -0.417em; } @@ -11,24 +12,27 @@ letter-spacing: normal; } -.tabs { - height: 2.6em; - - a { +.tabs a { padding: 0 1em; line-height: 2.6em; &:focus { outline-offset: -0.5em; } - } } .tabs > li { - margin-right: 0.5em; + &:not(:last-child) { + margin-right: 0.5em; + } > a { color: @body-bg-color; + + &:hover { + text-decoration: none; + background: rgba(0,0,0,.1); + } } &.active > a, @@ -36,10 +40,6 @@ background-color: @body-bg-color; color: @text-color; } - - &:last-child { - margin-right: 0; - } } .tabs > .dropdown-nav-item > a, diff --git a/public/css/themes/Winter.less b/public/css/themes/Winter.less index 3062589c4..e8acb9c3f 100644 --- a/public/css/themes/Winter.less +++ b/public/css/themes/Winter.less @@ -10,7 +10,7 @@ @tr-hover-color: #c6cfe4; /* Snow, from http://codepen.io/NickyCDK/pen/AIonk */ -#header, #login { +#login, #header-logo-container, #main > .container > .controls > .tabs { background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png'); -webkit-animation: snow 10s linear infinite; -moz-animation: snow 10s linear infinite; @@ -46,6 +46,10 @@ } #menu ul.nav-level-1 > .nav-item { + &.selected > a { + background-color: transparent; + } + &:focus, &:hover { background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png'); -webkit-animation: snow 10s linear infinite; diff --git a/public/css/themes/solarized-dark.less b/public/css/themes/solarized-dark.less index 4b04a8950..f383624a4 100644 --- a/public/css/themes/solarized-dark.less +++ b/public/css/themes/solarized-dark.less @@ -56,7 +56,7 @@ // Form colors @button-primary-color: lighten(@base02, 20); -#header { +#header-logo-container { background-color: @base02; } diff --git a/public/js/icinga/behavior/application-state.js b/public/js/icinga/behavior/application-state.js index a38848ab8..7cd655b44 100644 --- a/public/js/icinga/behavior/application-state.js +++ b/public/js/icinga/behavior/application-state.js @@ -10,7 +10,6 @@ var ApplicationState = function (icinga) { Icinga.EventListener.call(this, icinga); this.on('rendered', this.onRendered, this); - this.on('rendered', '#application-state-summary', this.onSummaryRendered, this); this.icinga = icinga; }; @@ -32,13 +31,6 @@ } }; - ApplicationState.prototype.onSummaryRendered = function(e) { - var height = $(this).height(); - - $('#sidebar').css('bottom', height); - $('#main').css('bottom', height); - }; - Icinga.Behaviors.ApplicationState = ApplicationState; })(Icinga, jQuery); diff --git a/public/js/icinga/behavior/filtereditor.js b/public/js/icinga/behavior/filtereditor.js index 5cd40e43b..9bdd17144 100644 --- a/public/js/icinga/behavior/filtereditor.js +++ b/public/js/icinga/behavior/filtereditor.js @@ -56,8 +56,6 @@ $li.toggleClass('collapsed'); } }); - - icinga.ui.fixControls($container); } } }; diff --git a/public/js/icinga/behavior/navigation.js b/public/js/icinga/behavior/navigation.js index 07a90ef4d..205216470 100644 --- a/public/js/icinga/behavior/navigation.js +++ b/public/js/icinga/behavior/navigation.js @@ -12,7 +12,7 @@ this.on('click', '#menu tr[href]', this.linkClicked, this); this.on('rendered', '#menu', this.onRendered, this); this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.showFlyoutMenu, this); - this.on('mouseleave', '#menu-container', this.hideFlyoutMenu, this); + this.on('mouseleave', '#menu', this.hideFlyoutMenu, this); this.on('click', '#toggle-sidebar', this.toggleSidebar, this); /** @@ -277,17 +277,12 @@ var $flyout = $target.find('.nav-level-2'); if (! $flyout.length) { - $layout.removeClass('menu-hovered'); $target.siblings().not($target).removeClass('hover'); return; } var delay = 300; - if ($layout.hasClass('menu-hovered')) { - delay = 0; - } - setTimeout(function() { try { if (! $target.is(':hover')) { @@ -295,7 +290,6 @@ } } catch(e) { /* Bypass because if IE8 */ } - $layout.addClass('menu-hovered'); $target.siblings().not($target).removeClass('hover'); $target.addClass('hover'); @@ -325,19 +319,16 @@ var $hovered = $('#menu').find('.nav-level-1 > .nav-item.hover'); if (! $hovered.length) { - $layout.removeClass('menu-hovered'); - return; } setTimeout(function() { try { - if ($hovered.is(':hover') || $('#menu-container').is(':hover')) { + if ($hovered.is(':hover') || $('#menu').is(':hover')) { return; } } catch(e) { /* Bypass because if IE8 */ }; $hovered.removeClass('hover'); - $layout.removeClass('menu-hovered'); }, 600); }; diff --git a/public/js/icinga/events.js b/public/js/icinga/events.js index c82572a55..651972f1b 100644 --- a/public/js/icinga/events.js +++ b/public/js/icinga/events.js @@ -23,9 +23,6 @@ */ initialize: function () { this.applyGlobalDefaults(); - $('.container').each(function(idx, el) { - icinga.ui.initializeControls($(el)); - }); }, /** @@ -101,8 +98,6 @@ } else { $parent.addClass('collapsed'); } - - icinga.ui.fixControls($parent.closest('.container')); }, onInit: function (event) { diff --git a/public/js/icinga/loader.js b/public/js/icinga/loader.js index 4334ae6e1..bd655f36d 100644 --- a/public/js/icinga/loader.js +++ b/public/js/icinga/loader.js @@ -938,8 +938,6 @@ + '.', true ); - - this.icinga.ui.fixControls(); } this.icinga.logger.error( @@ -964,8 +962,6 @@ '
  • ' + this.icinga.utils.escape(message) + '
    • ' ).appendTo($('#notifications')); - this.icinga.ui.fixControls(); - if (!persist) { this.icinga.ui.fadeNotificationsAway(); } @@ -1145,11 +1141,6 @@ }, 0); } - var icinga = this.icinga; - //icinga.events.applyHandlers($container); - icinga.ui.initializeControls($container); - icinga.ui.fixControls(); - if (scrollPos !== false) { $container.scrollTop(scrollPos); diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js index 947473b49..782de5af6 100644 --- a/public/js/icinga/ui.js +++ b/public/js/icinga/ui.js @@ -21,13 +21,6 @@ this.timeCounterTimer = null; - /** - * Whether the mobile menu is shown - * - * @type {bool} - */ - this.mobileMenu = false; - // detect currentLayout var classList = $('#layout').attr('class').split(/\s+/); var _this = this; @@ -51,6 +44,11 @@ this.enableTimeCounters(); this.triggerWindowResize(); this.fadeNotificationsAway(); + + $(document).on('click', '#mobile-menu-toggle', this.toggleMobileMenu); + $(document).on('keypress', '#search',{ self: this, type: 'key' }, this.closeMobileMenu); + $(document).on('mouseleave', '#sidebar', { self: this, type: 'leave' }, this.closeMobileMenu); + $(document).on('click', '#sidebar a', { self: this, type: 'navigate' }, this.closeMobileMenu); }, fadeNotificationsAway: function() { @@ -62,10 +60,8 @@ .delay(7000) .fadeOut('slow', function() { - icinga.ui.fixControls(); $(this).remove(); }); - }, toggleDebug: function() { @@ -124,9 +120,9 @@ 'href', base + '/' + url.replace(/^\//, '') ).on('load', function() { - icinga.ui.fixControls(); $oldLink.remove(); }); + $newLink.appendTo($('head')); } }); @@ -195,7 +191,6 @@ var col2 = this.cutContainer($('#col2')); var kill = this.cutContainer($('#col1')); this.pasteContainer($('#col1'), col2); - this.fixControls(); this.icinga.behaviors.navigation.trySetActiveAndSelectedByUrl($('#col1').data('icingaUrl')); }, @@ -250,7 +245,7 @@ _this.currentLayout ); } - _this.fixControls(); + _this.refreshDebug(); }, @@ -321,14 +316,12 @@ this.icinga.loader.stopPendingRequestsFor($c); $c.trigger('close-column'); $c.html(''); - this.fixControls(); }, layout2col: function () { if (! this.isOneColLayout()) { return; } this.icinga.logger.debug('Switching to double col'); $('#layout').addClass('twocols'); - this.fixControls(); $('#layout').trigger('layout-change'); }, @@ -501,172 +494,31 @@ * @param {object} e Event */ toggleMobileMenu: function(e) { - var $sidebar = $('#sidebar'); - var $target = $(e.target); - var href = $target.attr('href'); - if (href) { - if (href !== '#') { - $sidebar.removeClass('expanded'); - } - } else if (! $target.is('input')) { - $sidebar.toggleClass('expanded'); - } + $('#sidebar').toggleClass('expanded'); }, /** - * Close mobile menu when the enter key was pressed + * Close mobile menu when the enter key is pressed during search or the user leaves the sidebar * * @param {object} e Event */ closeMobileMenu: function(e) { - var $search = $('#search'); - if (e.which === 13 && $search.is(':focus')) { + if (e.data.self.currentLayout !== 'minimal') { + return; + } + + if (e.data.type === 'key') { + if (e.which === 13) { + $('#sidebar').removeClass('expanded'); + $(e.target)[0].blur(); + } + } else { $('#sidebar').removeClass('expanded'); - $search[0].blur(); - } - }, - - initializeControls: function(container) { - var $container = $(container); - - if ($container.parent('.dashboard').length || $('#layout').hasClass('fullscreen-layout')) { - return; - } - - $container.find('.controls').each(function() { - var $controls = $(this); - if (! $controls.prev('.fake-controls').length) { - var $tabs = $controls.find('.tabs', $controls); - if ($tabs.length && $controls.children().length > 1 && ! $tabs.next('.tabs-spacer').length) { - $tabs.after($('
    ')); - } - var $fakeControls = $('
    '); - $fakeControls.height($controls.height()).css({ - // That's only temporary. It's reset in fixControls, which is called at the end of this - // function. Its purpose is to prevent the content from jumping up upon auto-refreshes. - // It works by making the fake-controls appear at the same vertical level as the controls - // and the height of the content then doesn't change when taking the controls out of the flow. - float: 'right' - }); - $controls.before($fakeControls).css({ - position: 'fixed' - }); - } - }); - - this.fixControls($container); - }, - - fixControls: function($container) { - var $layout = $('#layout'); - - if ($layout.hasClass('fullscreen-layout')) { - return; - } - - if (typeof $container === 'undefined') { - var $header = $('#header'); - var $headerLogo = $('#header-logo-container'); - var $main = $('#main'); - var $search = $('#search'); - var $sidebar = $('#sidebar'); - - $header.css({ height: 'auto'}); - - if ($layout.hasClass('minimal-layout')) { - if (! this.mobileMenu && $sidebar.length) { - $header.css({ - top: $sidebar.outerHeight() + 'px' - }); - $headerLogo.css({ - display: 'none' - }); - $main.css({ - top: $header.outerHeight() + $sidebar.outerHeight() - }); - $sidebar - .on( - 'click', - this.toggleMobileMenu - ) - .prepend( - $('
    ') - ); - $('#header-logo').clone().attr('id', 'mobile-menu-logo') - .appendTo('#mobile-menu-toggle'); - $(window).on('keypress', this.closeMobileMenu); - - this.mobileMenu = true; - } - } else { - $headerLogo.css({ - top: $header.css('height') - }); - $main.css({ - top: $header.css('height') - }); - if (!! $headerLogo.length) { - $sidebar.css({ - top: $headerLogo.offset().top + $headerLogo.outerHeight() - }); - } - - if (this.mobileMenu) { - $header.css({ - top: 0 - }); - $headerLogo.css({ - display: 'block' - }); - $sidebar.removeClass('expanded').off('click', this.toggleMobileMenu); - $search.off('keypress', this.closeMobileMenu); - $('#mobile-menu-toggle').remove(); - - this.mobileMenu = false; - } - } - - var _this = this; - $('.container').each(function () { - _this.fixControls($(this)); - }); - - return; - } - - if ($container.parent('.dashboard').length) { - return; - } - - // Enable this only in case you want to track down UI problems - //this.icinga.logger.debug('Fixing controls for ', $container); - - $container.find('.controls').each(function() { - var $controls = $(this); - var $fakeControls = $controls.prev('.fake-controls'); - $fakeControls.css({ - float: '', // Set by initializeControls - height: $controls.height() - }); - $controls.css({ - top: $container.offsetParent().position().top, - width: $fakeControls.outerWidth() - }); - }); - - var $statusBar = $container.children('.monitoring-statusbar'); - if ($statusBar.length) { - $statusBar.css({ - left: $container.offset().left, - width: $container.width() - }); - $statusBar.prev('.monitoring-statusbar-ghost').height($statusBar.outerHeight(true)); } }, toggleFullscreen: function () { $('#layout').toggleClass('fullscreen-layout'); - this.fixControls(); }, getUniqueContainerId: function ($cont) {