jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Use flexbox for sysinfo layout

Browse Source
This commit is contained in:
Johannes Zellner
2024-10-15 19:49:17 +02:00
parent 727d4876f5
commit 06a23951c9
1 changed files with 37 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/public/views/system.html
+37 -40
View File
@@ -7,46 +7,43 @@
<button class="btn btn-default" ng-click="$parent.reboot.show()">{{ 'main.action.reboot' | tr }}</button>
</h1>
<div class="row">
<div class="col-md-12">
<h3 class="graphs-toolbar">
{{ 'system.info.title' | tr }}
</h3>
<h3 class="graphs-toolbar">
{{ 'system.info.title' | tr }}
</h3>
<div class="card card-expand">
<div class="row">
<div class="col-xs-4 text-muted">{{ 'system.info.platformVersion' | tr }}</div>
<div class="col-xs-8 text-right">v{{ config.version }} ({{ config.ubuntuVersion }})</div>
</div>
<div class="row">
<div class="col-xs-4 text-muted">{{ 'system.info.vendor' | tr }}</div>
<div class="col-xs-8 text-right">{{ info.sysVendor }}</div>
</div>
<div class="row">
<div class="col-xs-4 text-muted">{{ 'system.info.product' | tr }}</div>
<div class="col-xs-8 text-right">{{ info.productName }}</div>
</div>
<div class="row">
<div class="col-xs-4 text-muted">CPU</div>
<div class="col-xs-8 text-right">{{ cpus.length + ' Core "' + cpus[0].model + '"' }}</div>
</div>
<div class="row">
<div class="col-xs-4 text-muted">{{ 'system.info.memory' | tr }}</div>
<div class="col-xs-8 text-right">{{ memory.memory | prettyDiskSize }} RAM <span ng-show="memory.swap">&amp; {{ memory.swap | prettyDiskSize }} Swap</span></div>
</div>
<div class="row">
<div class="col-xs-4 text-muted">{{ 'system.info.uptime' | tr }}</div>
<div class="col-xs-8 text-right">{{ info.uptimeSecs }}</div>
</div>
<div class="row" ng-show="info.activationTime">
<div class="col-xs-4 text-muted">{{ 'system.info.activationTime' | tr }}</div>
<div class="col-xs-8 text-right">{{ info.activationTime | prettyDate }}</div>
</div>
</div>
<div class="card card-expand">
<div class="row">
<div class="col-xs-4 text-muted">{{ 'system.info.platformVersion' | tr }}</div>
<div class="col-xs-8 text-right">v{{ config.version }} ({{ config.ubuntuVersion }})</div>
</div>
<div class="row">
<div class="col-xs-4 text-muted">{{ 'system.info.vendor' | tr }}</div>
<div class="col-xs-8 text-right">{{ info.sysVendor }}</div>
</div>
<div class="row">
<div class="col-xs-4 text-muted">{{ 'system.info.product' | tr }}</div>
<div class="col-xs-8 text-right">{{ info.productName }}</div>
</div>
<div class="row">
<div class="col-xs-4 text-muted">CPU</div>
<div class="col-xs-8 text-right">{{ cpus.length + ' Core "' + cpus[0].model + '"' }}</div>
</div>
<div class="row">
<div class="col-xs-4 text-muted">{{ 'system.info.memory' | tr }}</div>
<div class="col-xs-8 text-right">{{ memory.memory | prettyDiskSize }} RAM <span ng-show="memory.swap">&amp; {{ memory.swap | prettyDiskSize }} Swap</span></div>
</div>
<div class="row">
<div class="col-xs-4 text-muted">{{ 'system.info.uptime' | tr }}</div>
<div class="col-xs-8 text-right">{{ info.uptimeSecs }}</div>
</div>
<div class="row" ng-show="info.activationTime">
<div class="col-xs-4 text-muted">{{ 'system.info.activationTime' | tr }}</div>
<div class="col-xs-8 text-right">{{ info.activationTime | prettyDate }}</div>
</div>
</div>
<div class="col-md-6">
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div style="flex-grow: 1;">
<h3 class="graphs-toolbar">
{{ 'system.graphs.title' | tr }}
<div class="graphs-toolbar-actions">
@@ -67,7 +64,7 @@
</div>
</h3>
<div class="card" style="min-height: 300px;">
<div class="card card-expand" style="min-height: 300px;">
<label>{{ 'system.cpuUsage.title' | tr }}</label>
<canvas id="graphsCPUChart" style="width: 100%;"></canvas>
<div class="text-muted text-center text-small">{{ 'system.cpuUsage.graphSubtext' | tr:{ threshold: '20 %'} }}</div>
@@ -80,7 +77,7 @@
</div>
</div>
<div class="col-md-6">
<div style="flex-grow: 1;">
<h3 class="graphs-toolbar">
{{ 'system.diskUsage.title' | tr }}
<span class="small disks-last-updated" ng-show="!disks.busy && disks.ts">Last updated: {{ disks.ts | prettyDate }}</span>
@@ -89,7 +86,7 @@
</div>
</h3>
<div class="card">
<div class="card card-expand">
<div class="row" ng-show="disks.busy">
<div class="col-md-12 text-center">
<h2 style="margin: 60px 0;"><i class="fa fa-circle-notch fa-spin"></i></h2>