Move status summary in the host and service list views to the bottom of the page

Signed-off-by: Eric Lippmann <eric.lippmann@icinga.com>
This commit is contained in:
Florian Strohmaier 2016-11-24 10:42:14 +01:00 committed by Eric Lippmann
parent 17398fc513
commit bd5a2ebaa3
4 changed files with 58 additions and 6 deletions

View File

@ -4,8 +4,6 @@ use Icinga\Module\Monitoring\Object\Host;
if (! $this->compact): ?>
<div class="controls">
<?= $this->tabs ?>
<?= $this->render('list/components/hostssummary.phtml') ?>
<?= $this->render('list/components/selectioninfo.phtml') ?>
<?= $this->paginator ?>
<div class="sort-controls-container">
<?= $this->limiter ?>
@ -107,3 +105,10 @@ if (! $this->compact): ?>
</div>
<?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') ?>
</div>
<?php endif ?>

View File

@ -5,8 +5,6 @@ use Icinga\Module\Monitoring\Object\Service;
if (! $this->compact): ?>
<div class="controls">
<?= $this->tabs ?>
<?= $this->render('list/components/servicesummary.phtml') ?>
<?= $this->render('list/components/selectioninfo.phtml') ?>
<?= $this->paginator ?>
<div class="sort-controls-container">
<?= $this->limiter ?>
@ -112,3 +110,10 @@ if (! $this->compact): ?>
</div>
<?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') ?>
</div>
<?php endif ?>

View File

@ -1,5 +1,40 @@
/*! 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 {
background-color: @body-bg-color;
border-top: 1px solid @gray-lighter;
bottom: 0;
padding: .25em @gutter;
position: fixed;
&:before {
background: -webkit-linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
background: -moz-linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
content: "";
display: block;
height: 6px;
position: absolute;
left: 0;
right: 0;
top: -7px;
}
.services-summary,
.hosts-summary {
float: left;
margin-bottom: 0;
}
}
// Styles for the icon displayed if a check result is late
.check-result-late {
&:before {

View File

@ -657,14 +657,21 @@
$container.find('.controls').each(function() {
var $controls = $(this);
var $fakeControls = $controls.next('.fake-controls');
$controls.css({
top: $container.offset().top,
width: $fakeControls.outerWidth()
});
$fakeControls.height($controls.height());
});
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 () {