💄 improve(ui): progress bar and percent

This commit is contained in:
naiba 2020-12-25 20:35:06 +08:00
parent 76c789efd8
commit 6bf1233ce8
5 changed files with 15 additions and 16 deletions

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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>

View File

@ -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>

View File

@ -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}}