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

[Status Page] wip, upload logo and status page listing

Browse Source
This commit is contained in:
Louis Lam
2022-03-17 16:42:26 +08:00
parent bb1c951a96
commit e87cdf4d09
5 changed files with 82 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/ManageStatusPage.vue
View File

@@ -9,33 +9,14 @@
<router-link to="/add-status-page" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("Add New Status Page") }}</router-link>
</div>
<div class="shadow-box">
<div v-for="statusPage in $root.statusPageList" class="item">
<div class="row">
<div class="col">
<div class="title">{{ statusPage.title }}</div>
<div class="slug">/status/{{ statusPage.slug }}</div>
</div>
<div class="col-lg-6 col-xl-5">
<div class="btn-group">
<a :href="'/status/' + statusPage.slug" class="btn btn-dark">
<font-awesome-icon icon="external-link-square-alt" /><br />
{{ $t("View") }}
</a>
<a :href="'/status/' + statusPage.slug +'?edit'" class="btn btn-dark">
<font-awesome-icon icon="pen" /><br />
{{ $t("Edit") }}
</a>
<router-link to="/" class="btn btn-danger">
<font-awesome-icon icon="trash" /><br />
{{ $t("Delete") }}
</router-link>
</div>
</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>
</div>
</a>
</div>
</div>
</transition>
@@ -43,6 +24,8 @@
<script>
import { getResBaseURL } from "../util-frontend";
export default {
components: {
@@ -58,7 +41,13 @@ export default {
},
methods: {
icon(icon) {
if (icon === "/icon.svg") {
return icon;
} else {
return getResBaseURL() + icon;
}
}
},
};
</script>
@@ -67,11 +56,13 @@ export default {
@import "../assets/vars.scss";
.item {
display: block;
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
padding: 13px 15px 10px 15px;
border-radius: 10px;
transition: all ease-in-out 0.15s;
padding: 10px;
&:hover {
background-color: $highlight-white;
@@ -81,17 +72,22 @@ export default {
background-color: #cdf8f4;
}
.title {
font-weight: bold;
font-size: 20px;
$logo-width: 70px;
.logo {
width: $logo-width;
}
.slug {
font-size: 14px;
}
.info {
.btn-group {
//margin-top: 7px;
.title {
font-weight: bold;
font-size: 20px;
}
.slug {
font-size: 14px;
}
}
}