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

[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;
}
.spinner {
color: $primary;
}
// Localization
@import "localization.scss";

2
src/icon.js
View file

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

2
src/mixins/socket.js
View file

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

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 {