mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-12-12 10:13:46 +02:00
[status page] improve mobile layout
This commit is contained in:
parent
439f45d91e
commit
27d4c3c194
@ -33,7 +33,7 @@
|
||||
<template #item="monitor">
|
||||
<div class="item">
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-8 small-padding">
|
||||
<div class="col-9 col-md-8 small-padding">
|
||||
<div class="info">
|
||||
<font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
|
||||
<font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
|
||||
@ -42,7 +42,7 @@
|
||||
{{ monitor.element.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div :key="$root.userHeartbeatBar" class="col-6 col-md-4">
|
||||
<div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
|
||||
<HeartbeatBar size="small" :monitor-id="monitor.element.id" />
|
||||
</div>
|
||||
</div>
|
||||
@ -61,7 +61,6 @@ import HeartbeatBar from "./HeartbeatBar.vue";
|
||||
import Uptime from "./Uptime.vue";
|
||||
|
||||
export default {
|
||||
name: "GroupList",
|
||||
components: {
|
||||
Draggable,
|
||||
HeartbeatBar,
|
||||
@ -136,4 +135,10 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.item {
|
||||
padding: 13px 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
@ -78,7 +78,6 @@
|
||||
<script>
|
||||
import Login from "../components/Login.vue";
|
||||
import compareVersions from "compare-versions";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
|
||||
|
@ -3,23 +3,34 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
windowWidth: window.innerWidth,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
window.addEventListener("resize", this.onResize);
|
||||
this.updateBody();
|
||||
},
|
||||
|
||||
methods: {
|
||||
onResize() {
|
||||
this.windowWidth = window.innerWidth;
|
||||
this.updateBody();
|
||||
},
|
||||
|
||||
updateBody() {
|
||||
if (this.isMobile) {
|
||||
document.body.classList.add("mobile");
|
||||
} else {
|
||||
document.body.classList.remove("mobile");
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
isMobile() {
|
||||
return this.windowWidth <= 767.98;
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
|
@ -6,19 +6,6 @@
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
let entryPage = (await axios.get("/api/entry-page")).data;
|
||||
|
||||
|
@ -634,4 +634,14 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.overall-status {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user