Fix site layout of multi-views

Fix responsiveness and add icons for plugin output section.

refs 8565
This commit is contained in:
Matthias Jentsch 2015-03-06 14:49:33 +01:00
parent f91ce0cfa1
commit 4724eb907f
7 changed files with 32 additions and 30 deletions

View File

@ -18,7 +18,7 @@ use Icinga\Module\Monitoring\Forms\Command\Object\DeleteCommentCommandForm;
</div>
<div class="content">
<div class="content no-padding-top">
<h3>
<?= $this->icon('reschedule') ?>
<?= $this->translate('Commands') ?>

View File

@ -18,8 +18,8 @@ $hiddenRich = array();
<tr>
<th></th>
<th></th>
<th><?= $this->icon('host'); ?> <?= $this->translate('Host'); ?></th>
<th class="collapse"><?= $this->translate('Output'); ?></th>
<th class="oneline"><?= $this->icon('host'); ?> <?= $this->translate('Host'); ?></th>
<th class="oneline"><?= $this->icon('paste'); ?> <?= $this->translate('Plugin Output'); ?></th>
</tr>
</thead>
@ -64,8 +64,8 @@ $hiddenRich = array();
<?= $this->icon('comment', $this->translate('Last Comment: ') . $host->host_last_comment) ?>
<?php endif ?>
</td>
<td><?= $this->escape($host->getName()); ?></td>
<td><p class="pluginoutput"><?= $this->escape($host->host_output) ?></p></td>
<td class="name oneline"><?= $this->escape($host->getName()); ?></td>
<td><?= $this->escape($host->host_output) ?></td>
</tr>
<?php endforeach ?>

View File

@ -15,12 +15,11 @@ use Icinga\Web\Url;
<tr>
<th></th>
<th></th>
<th><?= $this->icon('service'); ?> <?= $this->translate('Service'); ?></th>
<th><?= $this->icon('host'); ?> <?= $this->translate('Host'); ?></th>
<th class="collapse"><?= $this->translate('Output'); ?></th>
<th class="oneline"><?= $this->icon('service'); ?> <?= $this->translate('Service'); ?></th>
<th class="oneline"><?= $this->icon('host'); ?> <?= $this->translate('Host'); ?></th>
<th class="oneline"><?= $this->icon('paste'); ?> <?= $this->translate('Plugin Output'); ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($objects as $service): /** @var Service $service */ ?>
<?php
@ -62,16 +61,16 @@ use Icinga\Web\Url;
<?= $this->icon('comment', $this->translate('Last Comment: ') . $service->service_last_comment) ?>
<?php endif ?>
</td>
<td><?= $this->escape($service->getName()); ?></td>
<td><?= $this->escape($service->getHost()->getName()); ?></b></td>
<td><p class="pluginoutput collapse"><?= $this->escape($service->service_output) ?></p></td>
<td class="name oneline"><?= $this->escape($service->getName()); ?></td>
<td class="name oneline"><?= $this->escape($service->getHost()->getName()); ?></b></td>
<td><?= $this->escape($service->service_output) ?></td>
</tr>
<?php endforeach ?>
<?php if (count($hidden)): ?>
<tr>
<td>
<div class="selection-info" data-title-rich="<span align='left'><?= join('<br>', $hiddenRich) ?></span>"
<td class="state">
<div data-title-rich="<span align='left'><?= join('<br>', $hiddenRich) ?></span>"
title="<?= join(', ', $hidden) ?>">
<?= sprintf(t('%d more ...'), count($hidden)) ?>
</div>

View File

@ -12,7 +12,7 @@ use Icinga\Module\Monitoring\Forms\Command\Object\DeleteCommentCommandForm;
<?= $this->render('partials/service/objects-header.phtml'); ?>
</div>
<div class="content">
<div class="content no-padding-top">
<h3>
<?= $this->icon('reschedule') ?>
<?= $this->translate('Commands') ?>

View File

@ -370,3 +370,7 @@ html {
position: absolute;
width: 1px;
}
.no-padding-top {
padding-top: 0em;
}

View File

@ -929,10 +929,6 @@ table.statesummary {
width: auto;
border-collapse: separate;
tbody {
white-space: nowrap;
}
td {
padding: 0em 0.4em 0em 0.4em;
line-height: 1.2em;
@ -943,29 +939,27 @@ table.statesummary {
font-weight: bold;
}
td .pluginoutput {
font-size: 0.8em;
td {
font-size: 0.85em;
line-height: 1.2em;
padding-left: 0;
padding-left: 0.2em;
margin: 0;
}
td.state {
padding: 0.2em;
min-width: 75px;
font-size: 0.7em;
font-size: 0.75em;
text-align: center;
}
td.name {
font-weight: bold;
}
td a {
color: inherit;
text-decoration: none;
}
}
/* Up to 576px for 1em=16px, should fit 320px devices */
@media screen and (max-width: 97em) {
table.statesummary .collapse {
display: none;
}
}

View File

@ -272,6 +272,10 @@ li li .badge {
background-color: @colorOk;
}
.badge-up {
background-color: @colorOk;
}
.badge-pending {
background-color: @colorPending;
}
@ -323,3 +327,4 @@ li li .badge {
white-space: nowrap;
text-overflow: ellipsis;
}