tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request from Icinga/feature/flex-box-layout-reworked 

Rework layout with flexbox
This commit is contained in:
Johannes Meyer 2019-12-06 16:37:46 +01:00 committed by GitHub
parent b8f8187762 6a4c3ea542
commit f5dc25b5c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 226 additions and 395 deletions

68
application/layouts/scripts/body.phtml
View File

@ -24,41 +24,45 @@ if ($this->layout()->inlineLayout) {
?>
<div id="header">
<div id="announcements" class="container">
<?= $this->widget('announcements') ?>
</div>
<div id="header-logo-container">
<?= $this->qlink(
'',
Auth::getInstance()->isAuthenticated() ? 'dashboard' : '',
null,
array(
'aria-hidden' => 'true',
'data-base-target' => '_main',
'id' => 'header-logo'
)
); ?>
</div>
<div id="announcements" class="container">
<?= $this->widget('announcements') ?>
</div>
</div>
<div id="content-wrapper">
<?php if (! $this->layout()->isIframe): ?>
<div id="sidebar">
<?= $this->render('parts/navigation.phtml'); ?>
</div>
<div id="sidebar">
<div id="header-logo-container">
<?= $this->qlink(
'',
Auth::getInstance()->isAuthenticated() ? 'dashboard' : '',
null,
array(
'aria-hidden' => 'true',
'data-base-target' => '_main',
'id' => 'header-logo'
)
); ?>
<div id="mobile-menu-toggle">
<button type="button"><?= $this->icon('menu') ?><?= $this->icon('cancel') ?></button>
</div>
</div>
<?= $this->render('parts/navigation.phtml'); ?>
</div>
<?php endif ?>
<div id="main" role="main">
<div id="col1"
class="container<?= $moduleClass ?>"
<?php if ($moduleName): ?>data-icinga-module="<?= $moduleName ?>"<?php endif ?>
data-icinga-title="<?= ! empty($this->title) ? $this->escape($this->title) . ' :: ' : '' ?><?= $this->defaultTitle ?>"
data-icinga-url="<?= $this->escape(Url::fromRequest()->without('renderLayout')->getAbsoluteUrl()); ?>"
<?= $refresh; ?>
style="display: block">
<?= $this->render($inlineLayoutScript) ?>
</div>
<div id="col2" class="container">
</div>
<div id="col3" class="container">
</div>
<div id="main" role="main">
<div id="col1"
class="container<?= $moduleClass ?>"
<?php if ($moduleName): ?>
data-icinga-module="<?= $moduleName ?>"
<?php endif ?>
data-icinga-url="<?= $this->escape(Url::fromRequest()->without('renderLayout')->getAbsoluteUrl()); ?>"
<?= $refresh; ?>
>
<?= $this->render($inlineLayoutScript) ?>
</div>
<div id="col2" class="container"></div>
<div id="col3" class="container"></div>
</div>
</div>
<div id="footer">
<ul role="alert" id="notifications"><?php

20
application/layouts/scripts/parts/navigation.phtml
View File

@ -19,17 +19,15 @@ if (! $this->auth()->isAuthenticated()) {
</li>
</ul>
</div>
<div id="menu-container">
<div id="menu" data-last-update="-1" data-base-target="_main" class="container"
data-icinga-url="<?= $this->href('layout/menu') ?>" data-icinga-refresh="15">
<?= $this->partial(
'layout/menu.phtml',
'default',
array(
'menuRenderer' => (new Menu())->getRenderer()->setUseStandardItemRenderer()
)
) ?>
</div>
<div id="menu" data-last-update="-1" data-base-target="_main" class="container"
data-icinga-url="<?= $this->href('layout/menu') ?>" data-icinga-refresh="15">
<?= $this->partial(
'layout/menu.phtml',
'default',
array(
'menuRenderer' => (new Menu())->getRenderer()->setUseStandardItemRenderer()
)
) ?>
</div>
<button id="toggle-sidebar" title="<?= $this->translate('Toggle Menu') ?>">
<i id="close-sidebar" class="icon-angle-double-left"></i>

1
modules/monitoring/application/views/scripts/list/hosts.phtml
View File

@ -113,7 +113,6 @@ if (! $this->compact): ?>
<?php endif ?>
</div>
<?php if (! $this->compact): ?>
<div class="monitoring-statusbar-ghost dont-print"></div>
<div class="monitoring-statusbar dont-print">
<?= $this->render('list/components/hostssummary.phtml') ?>
<?= $this->render('list/components/selectioninfo.phtml') ?>

1
modules/monitoring/application/views/scripts/list/services.phtml
View File

@ -141,7 +141,6 @@ if (! $this->compact): ?>
<?php endif ?>
</div>
<?php if (! $this->compact): ?>
<div class="monitoring-statusbar-ghost dont-print"></div>
<div class="monitoring-statusbar dont-print">
<?= $this->render('list/components/servicesummary.phtml') ?>
<?= $this->render('list/components/selectioninfo.phtml') ?>

29
modules/monitoring/public/css/module.less
View File

@ -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;
}
}
}

48
public/css/icinga/layout-structure.less
View File

@ -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,

62
public/css/icinga/layout.less
View File

@ -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 {

80
public/css/icinga/menu.less
View File

@ -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);
}
}
}

55
public/css/icinga/responsive.less
View File

@ -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

6
public/css/icinga/setup.less
View File

@ -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%;

20
public/css/icinga/tabs.less
View File

@ -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,

6
public/css/themes/Winter.less
View File

@ -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;

2
public/css/themes/solarized-dark.less
View File

@ -56,7 +56,7 @@
// Form colors
@button-primary-color: lighten(@base02, 20);
#header {
#header-logo-container {
background-color: @base02;
}

8
public/js/icinga/behavior/application-state.js
View File

@ -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);

2
public/js/icinga/behavior/filtereditor.js
View File

@ -56,8 +56,6 @@
$li.toggleClass('collapsed');
}
});
icinga.ui.fixControls($container);
}
}
};

13
public/js/icinga/behavior/navigation.js
View File

@ -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);
};

5
public/js/icinga/events.js
View File

@ -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) {

9
public/js/icinga/loader.js
View File

@ -938,8 +938,6 @@
+ '.',
true
);
this.icinga.ui.fixControls();
}
this.icinga.logger.error(
@ -964,8 +962,6 @@
'<li class="' + c + '">' + this.icinga.utils.escape(message) + '</li>'
).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);

186
public/js/icinga/ui.js
View File

@ -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($('<div class="tabs-spacer"></div>'));
}
var $fakeControls = $('<div class="fake-controls"></div>');
$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(
$('<div id="mobile-menu-toggle"><button><i class="icon-menu"></i><i class="icon-cancel"></i></button></div>')
);
$('#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) {