IntenseWebs/uptime-kuma
3
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-25 08:21:12 -06: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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/app.scss
View File

@ -448,6 +448,10 @@ textarea.form-control {
border-radius: 10px !important; border-radius: 10px !important;
} }
.spinner {
color: $primary;
}
// Localization // Localization
@import "localization.scss"; @import "localization.scss";

2
src/icon.js
View File

@ -36,6 +36,7 @@ import {
faChevronDown, faChevronDown,
faPen, faPen,
faExternalLinkSquareAlt, faExternalLinkSquareAlt,
faSpinner,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
library.add( library.add(
@ -71,6 +72,7 @@ library.add(
faChevronDown, faChevronDown,
faPen, faPen,
faExternalLinkSquareAlt, faExternalLinkSquareAlt,
faSpinner,
); );
export { FontAwesomeIcon }; export { FontAwesomeIcon };

2
src/mixins/socket.js
View File

@ -38,6 +38,7 @@ export default {
uptimeList: { }, uptimeList: { },
tlsInfoList: {}, tlsInfoList: {},
notificationList: [], notificationList: [],
statusPageListLoaded: false,
statusPageList: [], statusPageList: [],
connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...", connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
}; };
@ -114,6 +115,7 @@ export default {
}); });
socket.on("statusPageList", (data) => { socket.on("statusPageList", (data) => {
this.statusPageListLoaded = true;
this.statusPageList = data; this.statusPageList = data;
}); });

28
src/pages/ManageStatusPage.vue
View File

@ -6,17 +6,24 @@
</h1> </h1>
<div> <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>
<div class="shadow-box" style="min-height: 110px;"> <div class="shadow-box">
<a v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :href="'/status/' + statusPage.slug" class="item"> <template v-if="$root.statusPageListLoaded">
<img :src="icon(statusPage.icon)" alt class="logo me-2" /> <span v-if="$root.statusPageList.length === 0">No status pages</span>
<div class="info">
<div class="title">{{ statusPage.title }}</div> <router-link v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :to="'/status/' + statusPage.slug" class="item">
<div class="slug">/status/{{ statusPage.slug }}</div> <img :src="icon(statusPage.icon)" alt class="logo me-2" />
</div> <div class="info">
</a> <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>
</div> </div>
</transition> </transition>
@ -76,6 +83,9 @@ export default {
.logo { .logo {
width: $logo-width; width: $logo-width;
// Better when the image is loading
min-height: 1px;
} }
.info { .info {