self-hosted/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-14 10:23:16 +02:00
Code Issues Actions 1 Releases Activity

UI: Improve monitor page on mobile

Browse Source
This commit is contained in:
Nelson Chan 2023-04-11 21:16:45 +08:00
parent 8a3bce44ef
commit 4057ca6e72
1 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/Details.vue
View File

@ -54,35 +54,41 @@
<div class="shadow-box big-padding text-center stats"> <div class="shadow-box big-padding text-center stats">
<div class="row"> <div class="row">
<div class="col"> <div class="col-12 col-sm col row d-flex align-items-center d-sm-block">
<h4>{{ pingTitle() }}</h4> <h4 class="col-4 col-sm-12">{{ pingTitle() }}</h4>
<p>({{ $t("Current") }})</p> <p class="col-4 col-sm-12 mb-0 mb-sm-2">({{ $t("Current") }})</p>
<span class="num"> <span class="col-4 col-sm-12 num">
<a href="#" @click.prevent="showPingChartBox = !showPingChartBox"> <a href="#" @click.prevent="showPingChartBox = !showPingChartBox">
<CountUp :value="ping" /> <CountUp :value="ping" />
</a> </a>
</span> </span>
</div> </div>
<div class="col"> <div class="col-12 col-sm col row d-flex align-items-center d-sm-block">
<h4>{{ pingTitle(true) }}</h4> <h4 class="col-4 col-sm-12">{{ pingTitle(true) }}</h4>
<p>(24{{ $t("-hour") }})</p> <p class="col-4 col-sm-12 mb-0 mb-sm-2">(24{{ $t("-hour") }})</p>
<span class="num"><CountUp :value="avgPing" /></span> <span class="col-4 col-sm-12 num">
<CountUp :value="avgPing" />
</span>
</div> </div>
<div class="col"> <div class="col-12 col-sm col row d-flex align-items-center d-sm-block">
<h4>{{ $t("Uptime") }}</h4> <h4 class="col-4 col-sm-12">{{ $t("Uptime") }}</h4>
<p>(24{{ $t("-hour") }})</p> <p class="col-4 col-sm-12 mb-0 mb-sm-2">(24{{ $t("-hour") }})</p>
<span class="num"><Uptime :monitor="monitor" type="24" /></span> <span class="col-4 col-sm-12 num">
<Uptime :monitor="monitor" type="24" />
</span>
</div> </div>
<div class="col"> <div class="col-12 col-sm col row d-flex align-items-center d-sm-block">
<h4>{{ $t("Uptime") }}</h4> <h4 class="col-4 col-sm-12">{{ $t("Uptime") }}</h4>
<p>(30{{ $t("-day") }})</p> <p class="col-4 col-sm-12 mb-0 mb-sm-2">(30{{ $t("-day") }})</p>
<span class="num"><Uptime :monitor="monitor" type="720" /></span> <span class="col-4 col-sm-12 num">
<Uptime :monitor="monitor" type="720" />
</span>
</div> </div>
<div v-if="tlsInfo" class="col"> <div v-if="tlsInfo" class="col-12 col-sm col row d-flex align-items-center d-sm-block">
<h4>{{ $t("Cert Exp.") }}</h4> <h4 class="col-4 col-sm-12">{{ $t("Cert Exp.") }}</h4>
<p>(<Datetime :value="tlsInfo.certInfo.validTo" date-only />)</p> <p class="col-4 col-sm-12 mb-0 mb-sm-2">(<Datetime :value="tlsInfo.certInfo.validTo" date-only />)</p>
<span class="num"> <span class="col-4 col-sm-12 num">
<a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ tlsInfo.certInfo.daysRemaining }} {{ $tc("day", tlsInfo.certInfo.daysRemaining) }}</a> <a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ tlsInfo.certInfo.daysRemaining }} {{ $tc("day", tlsInfo.certInfo.daysRemaining) }}</a>
</span> </span>
</div> </div>
@ -136,7 +142,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}" style="padding: 10px;"> <tr v-for="(beat, index) in displayedRecords" :key="index" style="padding: 10px;">
<td><Status :status="beat.status" /></td> <td><Status :status="beat.status" /></td>
<td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td> <td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
<td class="border-0">{{ beat.msg }}</td> <td class="border-0">{{ beat.msg }}</td>
@ -376,7 +382,7 @@ export default {
translationPrefix = "Avg. "; translationPrefix = "Avg. ";
} }
if (this.monitor.type === "http") { if (this.monitor.type === "http" || this.monitor.type === "keyword") {
return this.$t(translationPrefix + "Response"); return this.$t(translationPrefix + "Response");
} }
@ -415,6 +421,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-top: 10px; padding-top: 10px;
font-size: 0.9em;
} }
a.btn { a.btn {
@ -471,6 +478,17 @@ table {
} }
} }
@media (max-width: 550px) {
.stats {
.col {
margin: 10px 0 !important;
}
h4 {
font-size: 1.1rem;
}
}
}
.keyword { .keyword {
color: black; color: black;
} }