7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-21 20:02:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

[Status Page] Listing: Better loading effect

Browse Source
This commit is contained in:
Louis Lam
2022-03-17 19:07:05 +08:00
parent 78a732409b
commit 502c7f87e7
4 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/ManageStatusPage.vue
View File

@@ -6,17 +6,24 @@
</h1>
<div>
<router-link to="/add-status-page" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("Add New Status Page") }}</router-link>
<router-link to="/add-status-page" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("New Status Page") }}</router-link>
</div>
<div class="shadow-box" style="min-height: 110px;">
<a v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :href="'/status/' + statusPage.slug" class="item">
<img :src="icon(statusPage.icon)" alt class="logo me-2" />
<div class="info">
<div class="title">{{ statusPage.title }}</div>
<div class="slug">/status/{{ statusPage.slug }}</div>
</div>
</a>
<div class="shadow-box">
<template v-if="$root.statusPageListLoaded">
<span v-if="$root.statusPageList.length === 0">No status pages</span>
<router-link v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :to="'/status/' + statusPage.slug" class="item">
<img :src="icon(statusPage.icon)" alt class="logo me-2" />
<div class="info">
<div class="title">{{ statusPage.title }}</div>
<div class="slug">/status/{{ statusPage.slug }}</div>
</div>
</router-link>
</template>
<div v-else class="d-flex align-items-center justify-content-center my-3 spinner">
<font-awesome-icon icon="spinner" size="2x" spin />
</div>
</div>
</div>
</transition>
@@ -76,6 +83,9 @@ export default {
.logo {
width: $logo-width;
// Better when the image is loading
min-height: 1px;
}
.info {