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:
parent
17398fc513
commit
bd5a2ebaa3
|
@ -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 ?>
|
||||
|
|
|
@ -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 ?>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 () {
|
||||
|
|
Loading…
Reference in New Issue