mirror of
https://github.com/Icinga/icingaweb2-module-businessprocess.git
synced 2025-12-25 09:09:34 -05:00
Merge pull request #176 from Icinga/feature/update-styles
Feature/update styles
This commit is contained in:
Eric Lippmann
GitHub
commit
14211fc3f7
2 changed files with 74 additions and 51 deletions
|
|
@ -126,9 +126,7 @@ abstract class Renderer extends Html
|
|||
*/
|
||||
public function renderStateBadges($summary)
|
||||
{
|
||||
$container = Container::create(
|
||||
array('class' => 'badges')
|
||||
)/* ->renderIfEmpty(false) */;
|
||||
$elements = [];
|
||||
|
||||
foreach ($summary as $state => $cnt) {
|
||||
if ($cnt === 0
|
||||
|
|
@ -138,22 +136,31 @@ abstract class Renderer extends Html
|
|||
continue;
|
||||
}
|
||||
|
||||
$container->addContent(
|
||||
Element::create(
|
||||
'span',
|
||||
array(
|
||||
'class' => array(
|
||||
'badge',
|
||||
'badge-' . strtolower($state)
|
||||
),
|
||||
// TODO: We should translate this in this module
|
||||
'title' => mt('monitoring', $state)
|
||||
)
|
||||
)->setContent($cnt)
|
||||
);
|
||||
$elements[] = Element::create(
|
||||
'span',
|
||||
array(
|
||||
'class' => array(
|
||||
'badge',
|
||||
'badge-' . strtolower($state)
|
||||
),
|
||||
// TODO: We should translate this in this module
|
||||
'title' => mt('monitoring', $state)
|
||||
)
|
||||
)->setContent($cnt);
|
||||
}
|
||||
|
||||
return $container;
|
||||
if (!empty($elements)) {
|
||||
$container = Container::create(
|
||||
array('class' => 'badges')
|
||||
)/* ->renderIfEmpty(false) */;
|
||||
|
||||
foreach ($elements as $element) {
|
||||
$container->addContent($element);
|
||||
}
|
||||
|
||||
return $container;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
public function getNodeClasses(Node $node)
|
||||
|
|
|
|||
|
|
@ -383,13 +383,14 @@ div.knightrider table.bp {
|
|||
|
||||
/** BEGIN Badges **/
|
||||
.badges {
|
||||
background-color: fade(@body-bg-color, 50%);
|
||||
border-radius: 0.45em;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
padding: 0.3em 0.4em;
|
||||
|
||||
.badge {
|
||||
border: 1px solid white;
|
||||
margin: 0;
|
||||
margin-right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -398,13 +399,19 @@ div.bp .badges {
|
|||
padding-top: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
td > a > .badges {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.badge-critical, .badge-down { background: @colorCritical; }
|
||||
.badge-unknown, .badge-unreachable { background: @colorUnknown; }
|
||||
.badge-warning { background: @colorWarning; }
|
||||
.badge-pending { background: @colorPending; }
|
||||
.badge-missing { background: #ccc; }
|
||||
/** END Badges **/
|
||||
|
||||
.badges
|
||||
/** BEGIN Tiles **/
|
||||
.tiles:after {
|
||||
content:'';
|
||||
|
|
@ -422,8 +429,13 @@ div.bp .badges {
|
|||
margin-bottom: 0.2em;
|
||||
height: 6em;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
.badges {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0.5em;
|
||||
text-align: center;
|
||||
font-size: 0.5em;
|
||||
display: block;
|
||||
|
|
@ -431,6 +443,18 @@ div.bp .badges {
|
|||
|
||||
> a {
|
||||
display: block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
font-size: 0.7em;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
color: @text-color-inverted;
|
||||
top: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -438,9 +462,13 @@ div.bp .badges {
|
|||
}
|
||||
|
||||
.actions {
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0.5em 0 0 0.5em;
|
||||
font-size: 0.75em;
|
||||
margin-left: 0.5em;
|
||||
padding-top: 0.2em;
|
||||
height: 1.8em;
|
||||
|
||||
i {
|
||||
|
|
@ -480,35 +508,22 @@ div.bp .badges {
|
|||
height: 2em;
|
||||
}
|
||||
|
||||
.tiles > div > a {
|
||||
text-decoration: none;
|
||||
font-size: 0.5em;
|
||||
color: inherit;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tiles {
|
||||
> .critical { background-color: @colorCritical; background-color: @colorCritical; color: white; }
|
||||
> .critical.handled { background-color: @colorCriticalHandled; }
|
||||
> .down { background-color: @colorCritical; }
|
||||
> .down.handled { background-color: @colorCriticalHandled; }
|
||||
> .unknown { background-color: @colorUnknown; }
|
||||
> .unknown.handled { background-color: @colorUnknownHandled; }
|
||||
> .unreachable { background-color: @colorUnknown; }
|
||||
> .unreachable.handled { background-color: @colorUnknownHandled; }
|
||||
> .warning { background-color: @colorWarning; }
|
||||
> .warning.handled { background-color: @colorWarningHandled; }
|
||||
> .ok { background-color: @colorOk; }
|
||||
> .up { background-color: @colorOk; }
|
||||
> .pending { background-color: @colorPending; }
|
||||
> .missing { background-color: #ccc; }
|
||||
> .addnew { background-color: @icinga-blue; }
|
||||
> .critical { background-color: @colorCritical; > a { text-shadow: 0 0 1px mix(#000, @colorCritical, 40%); }}
|
||||
> .critical.handled { background-color: @colorCriticalHandled; > a { text-shadow: 0 0 1px mix(#000, @colorCriticalHandled, 40%); }}
|
||||
> .down { background-color: @colorCritical; > a { text-shadow: 0 0 1px mix(#000, @colorCritical, 40%); }}
|
||||
> .down.handled { background-color: @colorCriticalHandled; > a { text-shadow: 0 0 1px mix(#000, @colorCriticalHandled, 40%); }}
|
||||
> .unknown { background-color: @colorUnknown; > a { text-shadow: 0 0 1px mix(#000, @colorUnknown, 40%); }}
|
||||
> .unknown.handled { background-color: @colorUnknownHandled; > a { text-shadow: 0 0 1px mix(#000, @colorUnknownHandled, 40%); }}
|
||||
> .unreachable { background-color: @colorUnknown; > a { text-shadow: 0 0 1px mix(#000, @colorUnknown, 40%); }}
|
||||
> .unreachable.handled { background-color: @colorUnknownHandled; > a { text-shadow: 0 0 1px mix(#000, @colorUnknownHandled, 40%); }}
|
||||
> .warning { background-color: @colorWarning; > a { text-shadow: 0 0 1px mix(#000, @colorWarning, 40%); }}
|
||||
> .warning.handled { background-color: @colorWarningHandled; > a { text-shadow: 0 0 1px mix(#000, @colorWarningHandled, 40%); }}
|
||||
> .ok { background-color: @colorOk; > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }}
|
||||
> .up { background-color: @colorOk; > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }}
|
||||
> .pending { background-color: @colorPending; > a { text-shadow: 0 0 1px mix(#000, @colorPending, 40%); }}
|
||||
> .missing { background-color: @gray-light; > a { text-shadow: 0 0 1px @gray }}
|
||||
> .addnew { background-color: @icinga-blue; > a { text-shadow: 0 0 1px mix(#000, @icinga-blue, 40%); }}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -559,13 +574,14 @@ div.bp .badges {
|
|||
padding: 0;
|
||||
|
||||
.badges {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
padding: 0 0 0 0.5em;
|
||||
.badge {
|
||||
line-height: 1.25em;
|
||||
font-size: 0.8em;
|
||||
border: 1px solid white;
|
||||
margin: -0.25em 1px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue