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

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

diff --git a/resource/static/main.css b/resource/static/main.css
index f2f81a9..9f09963 100644
--- a/resource/static/main.css
+++ b/resource/static/main.css
@@ -70,5 +70,10 @@
 }
 
 .ui.progress .bar {
-    min-width: .15em !important;
+    min-width: 1.26em !important;
+    text-align: right;
+    padding-right: .4em;
+    line-height: 1.75em;
+    color: rgba(255, 255, 255, .7);
+    font-weight: 700;
 }
\ 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 9ddfabf..973a837 100644
--- a/resource/static/theme-hotaru/css/main.css
+++ b/resource/static/theme-hotaru/css/main.css
@@ -190,5 +190,7 @@ table tr {
 }
 
 .ui.progress .bar {
-    min-width: .15em !important;
+    min-width: 1.26em !important;
+    text-align: right;
+    padding-right: 0.4em;
 }
\ No newline at end of file
diff --git a/resource/template/common/header.html b/resource/template/common/header.html
index 630d5a2..bc65924 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?v202012202312">
+    <link rel="stylesheet" type="text/css" href="/static/main.css?v202012252026">
     <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 639674a..77347b4 100644
--- a/resource/template/theme-default/home.html
+++ b/resource/template/theme-default/home.html
@@ -36,9 +36,7 @@
                             <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">
-                                            <small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
-                                        </div>
+                                        <small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
                                     </div>
                                 </div>
                             </div>
@@ -48,9 +46,7 @@
                                     :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">
-                                            <small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
-                                        </div>
+                                        <small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
                                     </div>
                                 </div>
                             </div>
@@ -60,9 +56,7 @@
                                     :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">
-                                            <small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
-                                        </div>
+                                        <small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
                                     </div>
                                 </div>
                             </div>
@@ -79,9 +73,7 @@
                                     :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">
-                                            <small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
-                                        </div>
+                                        <small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
                                     </div>
                                 </div>
                             </div>
diff --git a/resource/template/theme-hotaru/home.html b/resource/template/theme-hotaru/home.html
index c473b8f..ded0313 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?v202012202312" type="text/css">
+    <link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202012252026" type="text/css">
     <link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202012121912" type="text/css">
     {{if ts .CustomCode}}
     {{.CustomCode|safe}}