💄 improve(ui): progress bar

This commit is contained in:
naiba 2020-12-20 23:15:57 +08:00
parent fb770573d5
commit 789065cb5f
5 changed files with 31 additions and 11 deletions

View File

@ -68,3 +68,7 @@
.status.cards .outline.icon {
margin-right: 0 !important;
}
.ui.progress .bar {
min-width: .15em !important;
}

View File

@ -188,3 +188,7 @@ table tr {
border-radius: .3em;
margin-left: 1em;
}
.ui.progress .bar {
min-width: .15em !important;
}

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?v202012192326">
<link rel="stylesheet" type="text/css" href="/static/main.css?v202012202312">
<link rel="shortcut icon" type="image/png" href="/static/logo.png" />
</head>

View File

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

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