Skip to content

Commit d5fe547

Browse files
nook24nook24
authored
Merge pull request #30 from adrienluitot/master
Improve style of tables on large screens
2 parents 7dd0489 + 5b674ad commit d5fe547

File tree

5 files changed

+80
-54
lines changed

5 files changed

+80
-54
lines changed

‎public/css/app.css‎

100644100755
Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
* Licensed under the MIT license - http://opensource.org/licenses/MIT
33
*/
44

5+
body {
6+
font-family: arial;
7+
}
8+
59
.pointer {
610
cursor: pointer;
711
}
@@ -117,6 +121,18 @@
117121
clear: both;
118122
}
119123

124+
servicestatuspill {
125+
display: inline-block;
126+
vertical-align: top;
127+
margin-top: -1.5px;
128+
}
129+
130+
.label[title="Issue has been acknowledged"] {
131+
display: inline-block;
132+
vertical-align: middle;
133+
margin-top: -2.5px;
134+
}
135+
120136
.label-type {
121137
padding: .3em .6em .3em;
122138
display: inline-block;
@@ -142,12 +158,20 @@
142158
margin-left: 2px;
143159
}
144160

161+
.row-hover {
162+
padding: .8rem 1rem !important;
163+
}
164+
165+
.node-header > div {
166+
margin-top: 2rem;
167+
}
168+
145169
.row-even {
146-
background-color: #f9f9f9;
170+
background-color: #f2f2f2;
147171
}
148172

149173
.row-hover:hover {
150-
background-color: #f5f5f5
174+
background-color: #f6f6f6;
151175
}
152176

153177
.dropdown-menu > li > label {

‎public/css/night-mode.css‎

100644100755
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888

8989
/** row tables **/
9090
.night-mode .row-even {
91-
background-color: #3A3F44;
91+
background-color: #232629;
9292
}
9393

9494
.night-mode .row-hover:hover {

‎public/templates/views/nodes.html‎

100644100755
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ <h3 class="pull-left">
5555
<div class="col-sm-2 hidden-xs text-bold">Service summary</div>
5656

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

6060

6161
<div class="col-sm-6 hidden-xs">

‎public/templates/views/problems.html‎

100644100755
Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -63,31 +63,32 @@ <h3 class="pull-left">
6363

6464
<div ng-repeat="nodeContainer in data track by $index">
6565
<div ng-repeat="node in nodeContainer">
66-
<div class="col-xs-3 col-md-1 no-padding">
67-
<div class="shield-label-mobile">Node</div>
68-
</div>
69-
<div class="col-xs-9 col-md-11 shield-mobile shield-host-{{ node.hoststatus.current_state }}">
70-
<a ui-sref="nodedetails({'nodename':'{{ node.hoststatus.hostname | encodeURI }}'})">
71-
{{node.hoststatus.hostname }}
72-
</a>
73-
74-
<small class="label bg-purple" title="Issue has been acknowledged"
75-
ng-show="node.hoststatus.problem_has_been_acknowledged">
76-
<i class="fa fa-commenting-o"></i>
77-
</small>
78-
79-
<small class="label bg-purple" title="Scheduled downtime is running"
80-
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged}"
81-
ng-show="node.hoststatus.scheduled_downtime_depth > 0">
82-
<i class="fa fa-plug"></i>
83-
</small>
84-
85-
<small class="label bg-purple" title="State of node is flapping"
86-
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged || node.hoststatus.scheduled_downtime_depth}"
87-
ng-show="node.hoststatus.is_flapping">
88-
<i class="fa fa-adjust"></i>
89-
</small>
66+
<div class="node-header">
67+
<div class="col-xs-3 col-md-1 no-padding">
68+
<div class="shield-label-mobile">Node</div>
69+
</div>
70+
<div class="col-xs-9 col-md-11 shield-mobile shield-host-{{ node.hoststatus.current_state }}">
71+
<a ui-sref="nodedetails({'nodename':'{{ node.hoststatus.hostname | encodeURI }}'})">
72+
{{node.hoststatus.hostname }}
73+
</a>
9074

75+
<small class="label bg-purple" title="Issue has been acknowledged"
76+
ng-show="node.hoststatus.problem_has_been_acknowledged">
77+
<i class="fa fa-commenting-o"></i>
78+
</small>
79+
80+
<small class="label bg-purple" title="Scheduled downtime is running"
81+
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged}"
82+
ng-show="node.hoststatus.scheduled_downtime_depth > 0">
83+
<i class="fa fa-plug"></i>
84+
</small>
85+
86+
<small class="label bg-purple" title="State of node is flapping"
87+
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged || node.hoststatus.scheduled_downtime_depth}"
88+
ng-show="node.hoststatus.is_flapping">
89+
<i class="fa fa-adjust"></i>
90+
</small>
91+
</div>
9192
</div>
9293

9394
<div ng-repeat="servicestatus in node.servicestatus">

‎public/templates/views/services.html‎

100644100755
Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -64,35 +64,36 @@ <h3 class="pull-left">
6464

6565
<div ng-repeat="nodeContainer in data track by $index">
6666
<div ng-repeat="node in nodeContainer">
67-
<div class="col-xs-3 col-md-1 no-padding">
68-
<div class="shield-label-mobile">Node</div>
69-
</div>
70-
<div class="col-xs-9 col-md-11 shield-mobile shield-host-{{ node.hoststatus.current_state }}">
71-
<a ui-sref="nodedetails({'nodename':'{{ node.hoststatus.hostname | encodeURI }}'})">
72-
{{node.hoststatus.hostname }}
73-
</a>
74-
75-
<small class="label bg-purple" title="Issue has been acknowledged"
76-
ng-show="node.hoststatus.problem_has_been_acknowledged">
77-
<i class="fa fa-commenting-o"></i>
78-
</small>
79-
80-
<small class="label bg-purple" title="Scheduled downtime is running"
81-
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged}"
82-
ng-show="node.hoststatus.scheduled_downtime_depth > 0">
83-
<i class="fa fa-plug"></i>
84-
</small>
85-
86-
<small class="label bg-purple" title="State of node is flapping"
87-
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged || node.hoststatus.scheduled_downtime_depth}"
88-
ng-show="node.hoststatus.is_flapping">
89-
<i class="fa fa-adjust"></i>
90-
</small>
91-
67+
<div class="node-header">
68+
<div class="col-xs-3 col-md-1 no-padding">
69+
<div class="shield-label-mobile">Node</div>
70+
</div>
71+
<div class="col-xs-9 col-md-11 shield-mobile shield-host-{{ node.hoststatus.current_state }}">
72+
<a ui-sref="nodedetails({'nodename':'{{ node.hoststatus.hostname | encodeURI }}'})">
73+
{{node.hoststatus.hostname }}
74+
</a>
75+
76+
<small class="label bg-purple" title="Issue has been acknowledged"
77+
ng-show="node.hoststatus.problem_has_been_acknowledged">
78+
<i class="fa fa-commenting-o"></i>
79+
</small>
80+
81+
<small class="label bg-purple" title="Scheduled downtime is running"
82+
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged}"
83+
ng-show="node.hoststatus.scheduled_downtime_depth > 0">
84+
<i class="fa fa-plug"></i>
85+
</small>
86+
87+
<small class="label bg-purple" title="State of node is flapping"
88+
ng-class="{'fix-downtime-icon': node.hoststatus.problem_has_been_acknowledged || node.hoststatus.scheduled_downtime_depth}"
89+
ng-show="node.hoststatus.is_flapping">
90+
<i class="fa fa-adjust"></i>
91+
</small>
92+
</div>
9293
</div>
9394

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

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

0 commit comments

Comments
 (0)