💄 improve server-status theme

README.md

@@ -4,7 +4,7 @@
   <br>
   <small><i>LOGO designed by <a href="https://xio.ng" target="_blank">熊大</a> .</i></small>
   <br><br>
-<img src="https://img.shields.io/github/actions/workflow/status/naiba/nezha/dashboard.yml?branch=master&label=Dash%20v0.15.9&logo=github&style=for-the-badge">&nbsp;<img src="https://img.shields.io/github/v/release/nezhahq/agent?color=brightgreen&label=Agent&style=for-the-badge&logo=github">&nbsp;<img src="https://img.shields.io/github/actions/workflow/status/nezhahq/agent/agent.yml?branch=v0.15.11&label=Agent%20CI&logo=github&style=for-the-badge">&nbsp;<img src="https://img.shields.io/badge/Installer-v0.15.0-brightgreen?style=for-the-badge&logo=linux">
+<img src="https://img.shields.io/github/actions/workflow/status/naiba/nezha/dashboard.yml?branch=master&label=Dash%20v0.15.10&logo=github&style=for-the-badge">&nbsp;<img src="https://img.shields.io/github/v/release/nezhahq/agent?color=brightgreen&label=Agent&style=for-the-badge&logo=github">&nbsp;<img src="https://img.shields.io/github/actions/workflow/status/nezhahq/agent/agent.yml?branch=v0.15.11&label=Agent%20CI&logo=github&style=for-the-badge">&nbsp;<img src="https://img.shields.io/badge/Installer-v0.15.0-brightgreen?style=for-the-badge&logo=linux">
   <br>
   <br>
   <p>:trollface: <b>Nezha Monitoring: Self-hostable, lightweight, servers and websites monitoring and O&M tool.</b></p>

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

@@ -246,7 +246,10 @@ body {
         min-width: 25px;
         max-width: 50px;
     }
+}
 
-    .service-day-status-icon {
+@media only screen and (min-width: 768px) {
+    .pl-md-unset {
+        padding-left: unset !important;
     }
 }

resource/template/theme-server-status/content-nav.html

@@ -1,7 +1,7 @@
 {{define "theme-server-status/content-nav"}}
 <div role="navigation" class="navbar navbar-inverse navbar-fixed-top">
     <div class="navbar-inner">
-        <div class="container">
+        <div class="container pl-md-unset">
             <div class="navbar-header">
                 <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
                     <span class="sr-only">Toggle navigation</span>
@@ -9,7 +9,7 @@
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
-                <a href="/" class="navbar-brand">
+                <a href="/" class="navbar-brand pl-md-unset">
                     <img src="/static/logo.svg?v20210804" style="height: 2rem;display: inline-block;">
                     {{.Conf.Site.Brand}}
                 </a>

resource/template/theme-server-status/header.html

@@ -8,13 +8,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/static/theme-server-status/css/bootstrap.min.css">
     <link rel="stylesheet" href="/static/theme-server-status/css/bootstrap-theme.min.css">
-    <link rel="stylesheet" href="/static/theme-server-status/css/main.css">
+    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20231109">
     <link rel="stylesheet" href="/static/theme-server-status/css/dark.css">
     <link rel="stylesheet" href="/static/theme-server-status/css/light.css">
     <link href="https://cdn.staticfile.org/font-logos/0.17/font-logos.min.css" type="text/css"
           rel="stylesheet"/>
-    <link rel="stylesheet" type="text/css"
-          href="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css">
     <link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20210804" />
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>

resource/template/theme-server-status/service.html

@@ -51,16 +51,16 @@
             <table class="table table-striped table-condensed">
                 <thead>
                     <tr>
-                        <th>ID</th>
+                        <th class="node-cell center">ID</th>
-                        <th>{{tr "Rules"}}</th>
+                        <th class="node-cell center">{{tr "Rules"}}</th>
-                        <th>{{tr "Server"}}</th>
+                        <th class="node-cell center">{{tr "Server"}}</th>
-                        <th>{{tr "From"}}</th>
+                        <th class="node-cell center">{{tr "From"}}</th>
-                        <th>{{tr "To"}}</th>
+                        <th class="node-cell center">{{tr "To"}}</th>
-                        <th>MAX</th>
+                        <th class="node-cell center">MAX</th>
-                        <th>MIN</th>
+                        <th class="node-cell center">MIN</th>
-                        <th>{{tr "NextCheck"}}</th>
+                        <th class="node-cell center">{{tr "NextCheck"}}</th>
-                        <th>{{tr "CurrentUsage"}}</th>
+                        <th class="node-cell center">{{tr "CurrentUsage"}}</th>
-                        <th class='ui center aligned'>{{tr "Transleft"}}</th>
+                        <th class="node-cell center">{{tr "Transleft"}}</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -68,23 +68,20 @@
                     {{range $innerId, $transfer := $stats.Transfer}}
                     {{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
                     <tr>
-                        <td>{{$id}}</td>
+                        <td class="node-cell center">{{$id}}</td>
-                        <td>{{$stats.Name}}</td>
+                        <td class="node-cell center">{{$stats.Name}}</td>
-                        <td>{{index $stats.ServerName $innerId}}</td>
+                        <td class="node-cell center">{{index $stats.ServerName $innerId}}</td>
-                        <td>{{$stats.From|tf}}</td>
+                        <td class="node-cell center">{{$stats.From|tf}}</td>
-                        <td>{{$stats.To|tf}}</td>
+                        <td class="node-cell center">{{$stats.To|tf}}</td>
-                        <td>{{$stats.Max|bf}}</td>
+                        <td class="node-cell center">{{$stats.Max|bf}}</td>
-                        <td>{{$stats.Min|bf}}</td>
+                        <td class="node-cell center">{{$stats.Min|bf}}</td>
-                        <td>{{(index $stats.NextUpdate $innerId)|sft}}</td>
+                        <td class="node-cell center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
-                        <td>{{$transfer|bf}}</td>
+                        <td class="node-cell center">{{$transfer|bf}}</td>
-                        <td>
+                        <td class="node-cell center">
-                            <div class="ui progress {{TransClassName $TransLeftPercent}}"
+                            <div class="progress">
-                                style=" background: rgba(0,0,0,.1); background-color: rgba(0,0,0,.1)!important; height: 25px; margin: unset !important">
+                                <div style="width: '{{$TransLeftPercent}}%'" :class="'progress-bar-' + toSSBar('{{TransClassName $TransLeftPercent}}')">
-                                <div class="bar"
+                                    <small>{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small>
-                                    style="transition-duration: 300ms; min-width: unset; background-color: rgb(10, 148, 242); width: {{$TransLeftPercent}}% !important">
                                 </div>
-                                <small style="position: relative; top: -2em;">{{TransLeft $stats.Max $transfer}} /
-                                    {{$TransLeftPercent}} %</small>
                             </div>
                         </td>
                     </tr>
@@ -114,6 +111,19 @@
         },
         mixins: [mixinsVue],
         methods: {
+            toSSBar(n) {
+                switch (n) {
+                    case "fine":
+                        return "success"
+                    case "offline":
+                        return "danger"
+                    case "error":
+                        return "danger"
+                    case "warning":
+                        return "warning"
+                }
+                return n
+            },
             initData() {
                 // @formatter:off
                 const services = []

service/singleton/singleton.go

@@ -12,7 +12,7 @@ import (
 	"github.com/naiba/nezha/pkg/utils"
 )
 
-var Version = "v0.15.9" // ！！记得修改 README 中的 badge 版本！！
+var Version = "v0.15.10" // ！！记得修改 README 中的 badge 版本！！
 
 var (
 	Conf  *model.Config