[status page] improve mobile layout

This commit is contained in:
LouisLam 2021-09-23 16:31:45 +08:00
parent 439f45d91e
commit 27d4c3c194
5 changed files with 32 additions and 20 deletions

View File

@ -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>

View File

@ -78,7 +78,6 @@
<script>
import Login from "../components/Login.vue";
import compareVersions from "compare-versions";
import axios from "axios";
export default {

View File

@ -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;
},
}
},
}
};

View File

@ -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;

View File

@ -634,4 +634,14 @@ footer {
}
}
.mobile {
h1 {
font-size: 22px;
}
.overall-status {
font-size: 20px;
}
}
</style>