ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-27 16:54:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #3052 from chakflying/ui/monitor-page-design-mobile

Browse source 
UI: Improve monitor page layout on mobile
This commit is contained in:
Louis Lam 2023-05-26 18:30:43 +08:00 committed by GitHub
commit 2114295381
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/pages/Details.vue
View file

@ -69,35 +69,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>
@ -151,7 +157,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>
@ -396,7 +402,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");
} }
@ -449,6 +455,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 {
@ -505,6 +512,18 @@ table {
} }
} }
@media (max-width: 550px) {
.stats {
.col {
margin: 10px 0 !important;
}
h4 {
font-size: 1.1rem;
}
}
}
.keyword { .keyword {
color: black; color: black;
} }