improve server-status theme (#310)

* Add files via upload

* Add files via upload

* Add files via upload

* improve theme-server-status

1.前台分组展示agent
2.一些小优化

---------

Co-authored-by: SuperHsiao <superhsiao@4indesign.com>

resource/static/theme-server-status/css/light.css

@@ -27,6 +27,10 @@ body[theme="light"] .table {
     background: #ffffff;
 }
 
+body[theme="light"] .table>thead>tr>th.node-group-tag {
+    background-color:#ffffff;
+}
+
 body[theme="light"] .table-striped tbody > tr.even > td,
 body[theme="light"] .table-striped tbody > tr.even > th {
     background-color: #F9F9F9;
@@ -37,10 +41,25 @@ body[theme="light"] .table-striped tbody > tr.odd > th {
     background-color: #FFF;
 }
 
+body[theme="light"] .table>tbody>tr>td, 
+body[theme="light"] .table>tbody>tr>th, 
+body[theme="light"] .table>tfoot>tr>td, 
+body[theme="light"] .table>tfoot>tr>th, 
+body[theme="light"] .table>thead>tr>td, 
+body[theme="light"] .table>thead>tr>th {
+    line-height:20px;
+}
+
 body[theme="light"] .progress-bar {
     color: #000;
 }
 
+
+body[theme="light"] .progress-offline .progress-bar-success {
+    background-image: linear-gradient(grey 0px, grey 100%);
+}
+}
+
 body[theme="light"] .table-hover > tbody > tr:hover > td {
     background: #E6E6E6;
 }
@@ -75,4 +94,10 @@ body[theme="light"] .service-status .warning {
 
 body[theme="light"] .service-day-status-icon {
     background-color: #ebebeb;
+}
+
+body[theme="light"] footer p a, 
+body[theme="light"] footer p a:hover {
+    color: #333333;
+    text-decoration: none;
 }

resource/static/theme-server-status/css/main.css

@@ -1,5 +1,5 @@
 body {
-    padding-top: 70px !important;
+    padding-top:70px !important;
     padding-bottom: 30px !important;
 }
 
@@ -8,14 +8,27 @@ body {
     min-height: 40px !important;
 }
 
+.navbar-inner{
+    margin:0 auto;
+}
+
+.pl-md-unset {
+    max-width: 95vw;
+}
+
 .navbar-collapse:not([aria-expanded]) .navbar-nav .dropdown-toggle {
     margin-top: 18px;
     padding: 0 !important;
 }
 
+.navbar-toggle {
+    margin-right:0
+}
+
 .navbar-brand {
     font-size: 20px;
     text-align: center;
+    padding:12px 0 0 0;
 }
 
 .node-cell-expand {
@@ -32,18 +45,17 @@ body {
     padding-top: 10px;
 }
 
-.dropdown {
-    margin-right: 10px;
-}
-
 .navbar-inverse, .nav.navbar-nav {
     background-image: linear-gradient(rgb(60, 60, 60) 0px, rgb(34, 34, 34) 100%) !important;
 }
 
+.navbar-inverse .navbar-nav>li>a {
+    color:#f1f1f1;
+}
+
 .navbar-inverse .navbar-brand {
     font-size: 20px;
 }
-
 /* 导航部分 结束 */
 
 /* 正文部分 开始 */
@@ -63,6 +75,15 @@ body {
     text-align: left;
 }
 
+.table>thead>tr>th{
+  border:none;  
+}
+
+.table .node-group-tag {
+    font-size: 18px;
+    padding-bottom:15px;
+}
+
 .progress {
     margin-bottom: 0;
 }
@@ -78,6 +99,10 @@ body {
     border-top: 0 !important;
 }
 
+.accordian-body{
+    margin: 10px 0px 10px 18px;
+}
+
 .node-cell.center {
     text-align: center !important;
 }
@@ -147,104 +172,45 @@ body {
 }
 
 /* 服务页 正文结束 */
-
 @media only screen and (max-width: 1200px) {
-    .node-cell.os,
-    .node-cell.location,
-    .node-cell.uptime {
-        display: none;
-        visibility: hidden;
+    .accordian-body{
+        margin: 5px 0px 5px 10px;        
+    }
+    .table .node-group-tag {
+        font-size:16px;
+        padding-bottom:6px;
     }
 }
 
 @media only screen and (max-width: 720px) {
     body {
         font-size: 10px !important;
+        padding-top:60px !important;
     }
-
     .content {
         padding: 0;
+        margin-bottom: 10px;
     }
-
     .node-cell.os,
-    .node-cell.location,
-    .node-cell.uptime {
-        display: none;
-        visibility: hidden;
-    }
-
-    .service-day-status-icon {
-        width: 8px;
-        height: 8px;
-        margin-right: 2px;
-        border-radius: 3px;
-    }
-}
-
-@media only screen and (max-width: 620px) {
-    body {
-        font-size: 10px !important;
-    }
-
-    .content {
-        padding: 0;
-    }
-
-    .node-cell.type,
-    .node-cell.location,
     .node-cell.uptime,
-    .node-cell.traffic {
+    .node-cell.traffic{
         display: none;
         visibility: hidden;
     }
-
-    .service-day-status-icon {
+    .node-cell.location{
+        display: table-cell;
+        visibility: visible;
     }
-}
-
-@media only screen and (max-width: 533px) {
-    body {
-        font-size: 10px !important;
-    }
-
-    .content {
-        padding: 0;
-    }
-
-    .node-cell.os,
-    .node-cell.location,
-    .node-cell.uptime,
-    .node-cell.traffic {
+    .node-cell-os-text,.node-cell-location-text{
         display: none;
         visibility: hidden;
     }
-
-    .service-day-status-icon {
+    .accordian-body{
+        margin: 5px 0px 5px 10px;        
     }
-}
-
-@media only screen and (max-width: 450px) {
-    body {
-        font-size: 10px !important;
-    }
-
-    .content {
-        padding: 0;
-    }
-
-    .node-cell.type,
-    .node-cell.location,
-    .node-cell.uptime,
-    .node-cell.traffic {
-        display: none;
-        visibility: hidden;
-    }
-
-    .node-cell.cpu,
-    .node-cell.ram,
-    .node-cell.hdd {
-        min-width: 25px;
-        max-width: 50px;
+    .table .node-group-tag {
+        font-size:12px;
+        padding-bottom:6px;
     }
 }