From 789065cb5f0b09c7a5258d73a8e7b200a48833ee Mon Sep 17 00:00:00 2001
From: naiba <hi@nai.ba>
Date: Sun, 20 Dec 2020 23:15:57 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20improve(ui):=20progress=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resource/static/main.css                  |  4 ++++
 resource/static/theme-hotaru/css/main.css |  4 ++++
 resource/template/common/header.html      |  2 +-
 resource/template/theme-default/home.html | 28 ++++++++++++++++-------
 resource/template/theme-hotaru/home.html  |  4 ++--
 5 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/resource/static/main.css b/resource/static/main.css
index f323b5d..f2f81a9 100644
--- a/resource/static/main.css
+++ b/resource/static/main.css
@@ -67,4 +67,8 @@
 
 .status.cards .outline.icon {
     margin-right: 0 !important;
+}
+
+.ui.progress .bar {
+    min-width: .15em !important;
 }
\ No newline at end of file
diff --git a/resource/static/theme-hotaru/css/main.css b/resource/static/theme-hotaru/css/main.css
index c6bd2bf..9ddfabf 100644
--- a/resource/static/theme-hotaru/css/main.css
+++ b/resource/static/theme-hotaru/css/main.css
@@ -187,4 +187,8 @@ table tr {
     background-color: slategray;
     border-radius: .3em;
     margin-left: 1em;
+}
+
+.ui.progress .bar {
+    min-width: .15em !important;
 }
\ No newline at end of file
diff --git a/resource/template/common/header.html b/resource/template/common/header.html
index fdeba43..630d5a2 100644
--- a/resource/template/common/header.html
+++ b/resource/template/common/header.html
@@ -9,7 +9,7 @@
     <title>{{.Title}}</title>
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css">
     <link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
-    <link rel="stylesheet" type="text/css" href="/static/main.css?v202012192326">
+    <link rel="stylesheet" type="text/css" href="/static/main.css?v202012202312">
     <link rel="shortcut icon" type="image/png" href="/static/logo.png" />
 </head>
 
diff --git a/resource/template/theme-default/home.html b/resource/template/theme-default/home.html
index 02dd0c0..7318f34 100644
--- a/resource/template/theme-default/home.html
+++ b/resource/template/theme-default/home.html
@@ -15,7 +15,8 @@
                             v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i
                             v-if='server.Host.Platform == "linux"' class="linux icon"></i><i
                             v-if='server.Host.Platform == "windows"' class="windows icon"></i><i
-                            v-if='server.Host.Platform == "freebsd"' class="freebsd icon"></i>@#server.Name + (server.live?'':' [已离线]')#@
+                            v-if='server.Host.Platform == "freebsd"' class="freebsd icon"></i>@#server.Name +
+                        (server.live?'':' [已离线]')#@
                         <i class="yellow info circle icon"></i>
                         <div class='ui content popup'>
                             系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span
@@ -37,25 +38,33 @@
                             <div class="thirteen wide column">
                                 <div :class="formatPercent(server.live,server.State.CPU, 100).class">
                                     <div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
-                                        <div class="progress"></div>
+                                        <div class="progress">
+                                            <small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="three wide column">内存</div>
                             <div class="thirteen wide column">
-                                <div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
+                                <div
+                                    :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
                                     <div class="bar"
                                         :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
-                                        <div class="progress"></div>
+                                        <div class="progress">
+                                            <small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="three wide column">交换</div>
                             <div class="thirteen wide column">
-                                <div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
+                                <div
+                                    :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
                                     <div class="bar"
                                         :style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
-                                        <div class="progress"></div>
+                                        <div class="progress">
+                                            <small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -68,10 +77,13 @@
                             </div>
                             <div class="three wide column">硬盘</div>
                             <div class="thirteen wide column">
-                                <div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
+                                <div
+                                    :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
                                     <div class="bar"
                                         :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
-                                        <div class="progress"></div>
+                                        <div class="progress">
+                                            <small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
diff --git a/resource/template/theme-hotaru/home.html b/resource/template/theme-hotaru/home.html
index 992fbbe..81c7d86 100644
--- a/resource/template/theme-hotaru/home.html
+++ b/resource/template/theme-hotaru/home.html
@@ -17,7 +17,7 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
     <link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
     <link rel="stylesheet" href="/static/theme-hotaru/css/core.css?v202012121912" type="text/css">
-    <link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202012202136" type="text/css">
+    <link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202012202312" type="text/css">
     <link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202012121912" type="text/css">
     {{if ts .CustomCSS}}
     {{tag "style"}}
@@ -93,7 +93,7 @@
                         <td>
                             <div v-if="server.State"
                                 :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
-                                <div
+                                <div class="bar"
                                     :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
                                     <small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
                                 </div>