Skip to content

Commit

Permalink
Merge pull request #30 from adrienluitot/master
Browse files Browse the repository at this point in the history 
Improve style of tables on large screens
  • Loading branch information
@nook24
nook24 authored Oct 21, 2019
2 parents 7dd0489 + 5b674ad commit d5fe547
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 54 deletions.
28 changes: 26 additions & 2 deletions public/css/app.css
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*/

body {
font-family: arial;
}

.pointer {
cursor: pointer;
}
Expand Down Expand Up @@ -117,6 +121,18 @@
clear: both;
}

servicestatuspill {
display: inline-block;
vertical-align: top;
margin-top: -1.5px;
}

.label[title="Issue has been acknowledged"] {
display: inline-block;
vertical-align: middle;
margin-top: -2.5px;
}

.label-type {
padding: .3em .6em .3em;
display: inline-block;
Expand All @@ -142,12 +158,20 @@
margin-left: 2px;
}

.row-hover {
padding: .8rem 1rem !important;
}

.node-header > div {
margin-top: 2rem;
}

.row-even {
background-color: #f9f9f9;
background-color: #f2f2f2;
}

.row-hover:hover {
background-color: #f5f5f5
background-color: #f6f6f6;
}

.dropdown-menu > li > label {
Expand Down
2 changes: 1 addition & 1 deletion public/css/night-mode.css
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@

/** row tables **/
.night-mode .row-even {
background-color: #3A3F44;
background-color: #232629;
}

.night-mode .row-hover:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/templates/views/nodes.html
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ <h3 class="pull-left">
<div class="col-sm-2 hidden-xs text-bold">Service summary</div>

<div ng-repeat="hoststatus in data track by $index">
<div class="col-xs-12 no-padding margin-bottom-5 row-hover" ng-class="{ 'row-even':$even }">
<div class="col-xs-12 no-padding row-hover" ng-class="{ 'row-even':$even }">


<div class="col-sm-6 hidden-xs">
Expand Down
49 changes: 25 additions & 24 deletions public/templates/views/problems.html
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,31 +63,32 @@ <h3 class="pull-left">

<div ng-repeat="nodeContainer in data track by $index">
<div ng-repeat="node in nodeContainer">
<div class="col-xs-3 col-md-1 no-padding">
<div class="shield-label-mobile">Node</div>
</div>
<div class="col-xs-9 col-md-11 shield-mobile shield-host-{{ node.hoststatus.current_state }}">
<a ui-sref="nodedetails({'nodename':'{{ node.hoststatus.hostname | encodeURI }}'})">
{{node.hoststatus.hostname }}
</a>

<small class="label bg-purple" title="Issue has been acknowledged"
ng-show="node.hoststatus.problem_has_been_acknowledged">
<i class="fa fa-commenting-o"></i>
</small>

<small class="label bg-purple" title="Scheduled downtime is running"
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged}"
ng-show="node.hoststatus.scheduled_downtime_depth > 0">
<i class="fa fa-plug"></i>
</small>

<small class="label bg-purple" title="State of node is flapping"
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged || node.hoststatus.scheduled_downtime_depth}"
ng-show="node.hoststatus.is_flapping">
<i class="fa fa-adjust"></i>
</small>
<div class="node-header">
<div class="col-xs-3 col-md-1 no-padding">
<div class="shield-label-mobile">Node</div>
</div>
<div class="col-xs-9 col-md-11 shield-mobile shield-host-{{ node.hoststatus.current_state }}">
<a ui-sref="nodedetails({'nodename':'{{ node.hoststatus.hostname | encodeURI }}'})">
{{node.hoststatus.hostname }}
</a>

<small class="label bg-purple" title="Issue has been acknowledged"
ng-show="node.hoststatus.problem_has_been_acknowledged">
<i class="fa fa-commenting-o"></i>
</small>

<small class="label bg-purple" title="Scheduled downtime is running"
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged}"
ng-show="node.hoststatus.scheduled_downtime_depth > 0">
<i class="fa fa-plug"></i>
</small>

<small class="label bg-purple" title="State of node is flapping"
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged || node.hoststatus.scheduled_downtime_depth}"
ng-show="node.hoststatus.is_flapping">
<i class="fa fa-adjust"></i>
</small>
</div>
</div>

<div ng-repeat="servicestatus in node.servicestatus">
Expand Down
53 changes: 27 additions & 26 deletions public/templates/views/services.html
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,35 +64,36 @@ <h3 class="pull-left">

<div ng-repeat="nodeContainer in data track by $index">
<div ng-repeat="node in nodeContainer">
<div class="col-xs-3 col-md-1 no-padding">
<div class="shield-label-mobile">Node</div>
</div>
<div class="col-xs-9 col-md-11 shield-mobile shield-host-{{ node.hoststatus.current_state }}">
<a ui-sref="nodedetails({'nodename':'{{ node.hoststatus.hostname | encodeURI }}'})">
{{node.hoststatus.hostname }}
</a>

<small class="label bg-purple" title="Issue has been acknowledged"
ng-show="node.hoststatus.problem_has_been_acknowledged">
<i class="fa fa-commenting-o"></i>
</small>

<small class="label bg-purple" title="Scheduled downtime is running"
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged}"
ng-show="node.hoststatus.scheduled_downtime_depth > 0">
<i class="fa fa-plug"></i>
</small>

<small class="label bg-purple" title="State of node is flapping"
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged || node.hoststatus.scheduled_downtime_depth}"
ng-show="node.hoststatus.is_flapping">
<i class="fa fa-adjust"></i>
</small>

<div class="node-header">
<div class="col-xs-3 col-md-1 no-padding">
<div class="shield-label-mobile">Node</div>
</div>
<div class="col-xs-9 col-md-11 shield-mobile shield-host-{{ node.hoststatus.current_state }}">
<a ui-sref="nodedetails({'nodename':'{{ node.hoststatus.hostname | encodeURI }}'})">
{{node.hoststatus.hostname }}
</a>

<small class="label bg-purple" title="Issue has been acknowledged"
ng-show="node.hoststatus.problem_has_been_acknowledged">
<i class="fa fa-commenting-o"></i>
</small>

<small class="label bg-purple" title="Scheduled downtime is running"
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged}"
ng-show="node.hoststatus.scheduled_downtime_depth > 0">
<i class="fa fa-plug"></i>
</small>

<small class="label bg-purple" title="State of node is flapping"
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged || node.hoststatus.scheduled_downtime_depth}"
ng-show="node.hoststatus.is_flapping">
<i class="fa fa-adjust"></i>
</small>
</div>
</div>

<div ng-repeat="servicestatus in node.servicestatus">
<div class="col-xs-12 no-padding row-hover" ng-class="{ 'row-even':$even }">
<div class="col-xs-12 line row-hover" ng-class="{ 'row-even':$even }">

<div class="col-xs-12 hidden-sm hidden-md hidden-lg shield-mobile shield-service-{{ servicestatus.current_state }}">
<a ui-sref="servicedetails({nodename:'{{ node.hoststatus.hostname |encodeURI }}', 'servicedescription':'{{ servicestatus.service_description | encodeURI }}'})">
Expand Down

0 comments on commit d5fe547

Please sign in to comment.