ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-30 18:24:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

improve monitor list

Browse source
This commit is contained in:
LouisLam 2021-08-30 02:22:49 +08:00
parent e644a1e36f
commit 3ad736692f
7 changed files with 34 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/assets/app.scss
View file

@ -131,7 +131,7 @@ h2 {
background-color: #090c10; background-color: #090c10;
color: $dark-font-color; color: $dark-font-color;
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {
background: $dark-border-color; background: $dark-border-color;
} }

15
src/components/MonitorList.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="shadow-box list mb-4"> <div class="shadow-box list mb-3" :class="{ scrollbar: scrollbar }">
<div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3"> <div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3">
{{ $t("No Monitors, please") }} <router-link to="/add">{{ $t("add one") }}</router-link> {{ $t("No Monitors, please") }} <router-link to="/add">{{ $t("add one") }}</router-link>
</div> </div>
@ -34,6 +34,11 @@ export default {
Uptime, Uptime,
HeartbeatBar, HeartbeatBar,
}, },
props: {
scrollbar: {
type: Boolean,
},
},
computed: { computed: {
sortedMonitorList() { sortedMonitorList() {
let result = Object.values(this.$root.monitorList); let result = Object.values(this.$root.monitorList);
@ -83,8 +88,12 @@ export default {
} }
.list { .list {
height: auto; &.scrollbar {
min-height: calc(100vh - 240px); height: calc(100vh - 20px);
overflow-y: scroll;
position: sticky;
top: 10px;
}
.item { .item {
display: block; display: block;

17
src/layouts/Layout.vue
View file

@ -45,14 +45,6 @@
<Login v-if="! $root.loggedIn && $root.allowLoginDialog" /> <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
</main> </main>
<footer>
<div class="container-fluid">
Uptime Kuma -
{{ $t("Version") }}: {{ $root.info.version }} -
<a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a>
</div>
</footer>
<!-- Mobile Only --> <!-- Mobile Only -->
<div v-if="$root.isMobile" style="width: 100%; height: 60px;" /> <div v-if="$root.isMobile" style="width: 100%; height: 60px;" />
<nav v-if="$root.isMobile" class="bottom-nav"> <nav v-if="$root.isMobile" class="bottom-nav">
@ -190,15 +182,6 @@ main {
color: white; color: white;
} }
footer {
color: #aaa;
font-size: 13px;
margin-top: 10px;
padding-bottom: 30px;
margin-left: 10px;
text-align: center;
}
.dark { .dark {
header { header {
background-color: #161b22; background-color: #161b22;

5
src/pages/Dashboard.vue
View file

@ -5,10 +5,10 @@
<div> <div>
<router-link to="/add" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("Add New Monitor") }}</router-link> <router-link to="/add" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("Add New Monitor") }}</router-link>
</div> </div>
<MonitorList /> <MonitorList scrollbar="true" />
</div> </div>
<div class="col-12 col-md-7 col-xl-8"> <div class="col-12 col-md-7 col-xl-8 mb-3">
<router-view /> <router-view />
</div> </div>
</div> </div>
@ -26,7 +26,6 @@ export default {
data() { data() {
return {} return {}
}, },
} }
</script> </script>

3
src/pages/DashboardHome.vue
View file

@ -5,7 +5,7 @@
{{ $t("Quick Stats") }} {{ $t("Quick Stats") }}
</h1> </h1>
<div class="shadow-box big-padding text-center"> <div class="shadow-box big-padding text-center mb-4">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3>{{ $t("Up") }}</h3> <h3>{{ $t("Up") }}</h3>
@ -170,7 +170,6 @@ export default {
.shadow-box { .shadow-box {
padding: 20px; padding: 20px;
margin-top: 25px;
} }
table { table {

8
src/pages/Details.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<transition name="slide-fade" appear> <transition name="slide-fade" appear>
<div v-if="monitor" class="monitor"> <div v-if="monitor">
<h1> {{ monitor.name }}</h1> <h1> {{ monitor.name }}</h1>
<p class="url"> <p class="url">
<a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank">{{ monitor.url }}</a> <a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank">{{ monitor.url }}</a>
@ -422,9 +422,5 @@ table {
color: $dark-font-color; color: $dark-font-color;
} }
} }
.monitor {
position: sticky;
top: 7px;
margin: 0 0 24px;
}
</style> </style>

16
src/pages/Settings.vue
View file

@ -155,6 +155,14 @@
</div> </div>
</div> </div>
<footer>
<div class="container-fluid">
Uptime Kuma -
{{ $t("Version") }}: {{ $root.info.version }} -
<a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a>
</div>
</footer>
<NotificationDialog ref="notificationDialog" /> <NotificationDialog ref="notificationDialog" />
<Confirm ref="confirmDisableAuth" btn-style="btn-danger" :yes-text="$t('I understand, please disable')" :no-text="$t('Leave')" @yes="disableAuth"> <Confirm ref="confirmDisableAuth" btn-style="btn-danger" :yes-text="$t('I understand, please disable')" :no-text="$t('Leave')" @yes="disableAuth">
@ -314,4 +322,12 @@ export default {
color: #000; color: #000;
} }
} }
footer {
color: #aaa;
font-size: 13px;
margin-top: 20px;
padding-bottom: 30px;
text-align: center;
}
</style> </style>