ui: condense and improve UI for check display under services
This commit is contained in:
parent
e94fc14b6a
commit
ad438e86fa
|
@ -294,7 +294,11 @@
|
|||
<div class="border-left hidden-xs hidden-sm">
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-7 border-left scrollable">
|
||||
<div class="visible-xs visible-sm">
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-7 border-left">
|
||||
<div class="row padded-border">
|
||||
{{outlet}}
|
||||
</div>
|
||||
|
@ -315,8 +319,9 @@
|
|||
|
||||
{{#each node in model }}
|
||||
|
||||
{{#link-to 'nodes.show' node.Node.Node tagName="div" href=false class="panel panel-link" }}
|
||||
<div {{ bind-attr class=":panel-bar node.hasFailingChecks:bg-orange:bg-green" }}></div>
|
||||
{{#link-to 'nodes.show' node.Node.Node tagName="div" href=false class="panel panel-link panel-list" }}
|
||||
<div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :panel-bar-horizontal"}}></div>
|
||||
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
{{node.Node.Node}}
|
||||
|
@ -325,15 +330,21 @@
|
|||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<ul class="list-unstyled list-broken">
|
||||
{{#each check in node.Checks }}
|
||||
<li>
|
||||
<h4 class="check">{{ check.Name }} <small>{{ check.CheckID }}</small> <span class="pull-right"><small>{{check.Status}}</small></h4>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="list-unstyled">
|
||||
{{#each check in node.Checks }}
|
||||
<li class="list-group-item list-condensed-link">
|
||||
{{listBar check.Status}}
|
||||
<div class="name">
|
||||
{{check.Name}}
|
||||
<small>{{ check.CheckID }}</small>
|
||||
<small class="pull-right">
|
||||
{{check.Status}}
|
||||
</small>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
{{/link-to}}
|
||||
|
||||
{{/each}}
|
||||
|
@ -391,7 +402,7 @@
|
|||
<div class="border-left hidden-xs hidden-sm">
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-7 border-left scrollable">
|
||||
<div class="col-md-6 col-lg-7 border-left">
|
||||
<div class="row padded-border">
|
||||
{{outlet}}
|
||||
</div>
|
||||
|
|
|
@ -8,3 +8,14 @@ Ember.Handlebars.helper('panelBar', function(status) {
|
|||
}
|
||||
return new Handlebars.SafeString('<div class="panel-bar ' + highlightClass + '"></div>');
|
||||
});
|
||||
|
||||
Ember.Handlebars.helper('listBar', function(status) {
|
||||
var highlightClass;
|
||||
|
||||
if (status == "passing") {
|
||||
highlightClass = "bg-green";
|
||||
} else {
|
||||
highlightClass = "bg-orange";
|
||||
}
|
||||
return new Handlebars.SafeString('<div class="list-bar-horizontal ' + highlightClass + '"></div>');
|
||||
});
|
||||
|
|
|
@ -59,7 +59,7 @@
|
|||
|
||||
small {
|
||||
padding-right: 8px;
|
||||
padding-top: 1px;
|
||||
padding-top: 2px;
|
||||
font-size: 12px;
|
||||
color: $gray-light;
|
||||
}
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
@include transition(background-color .3s ease-in-out);
|
||||
|
||||
.panel-heading {
|
||||
padding: 10px 7px;
|
||||
background-color: transparent;
|
||||
border-width: 2px;
|
||||
border-color: $gray-background;
|
||||
|
@ -57,6 +58,23 @@
|
|||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
&.panel-list {
|
||||
ul {
|
||||
margin: 0;
|
||||
li {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.panel-bar-horizontal {
|
||||
width: 20px;
|
||||
float: left;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.panel-short {
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue