self-hosted/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-26 22:56:52 +02:00
Code Issues Actions 1 Releases Activity

UPTM-14 - Dashboard Display on vertical 4K screen (#3451)

Browse Source 
* Update src/pages/DashboardHome.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* resolve comment

Co-authored-by: AqidaHaidari <aghida55@gmail.com>
Co-authored-by: Pascal Ojinnaka <56399504+passy4ucj@users.noreply.github.com>
Co-authored-by: Aqida <42426077+AqidaHaidari@users.noreply.github.com>

---------

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: AqidaHaidari <aghida55@gmail.com>
Co-authored-by: gitstart_bot <gitstart_bot@users.noreply.github.com>
Co-authored-by: Frank Elsinga <frank@elsinga.de>
Co-authored-by: Pascal Ojinnaka <56399504+passy4ucj@users.noreply.github.com>
Co-authored-by: Aqida <42426077+AqidaHaidari@users.noreply.github.com>
This commit is contained in:
GitStart 2023-08-03 14:07:01 +01:00 committed by GitHub
parent 67b1974718
commit f4967615c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/Dashboard.vue
View File

@ -8,9 +8,9 @@
<MonitorList :scrollbar="true" />
</div>
<div class="col-12 col-md-7 col-xl-8 mb-3">
<div ref="container" class="col-12 col-md-7 col-xl-8 mb-3">
<!-- Add :key to disable vue router re-use the same component -->
<router-view :key="$route.fullPath" />
<router-view :key="$route.fullPath" :calculatedHeight="height" />
</div>
</div>
</div>
@ -25,7 +25,12 @@ export default {
MonitorList,
},
data() {
return {};
return {
height: 0
};
},
mounted() {
this.height = this.$refs.container.offsetHeight;
},
};
</script>

40
src/pages/DashboardHome.vue
View File

@ -1,5 +1,5 @@
<template>
<transition name="slide-fade" appear>
<transition ref="tableContainer" name="slide-fade" appear>
<div v-if="$route.name === 'DashboardHome'">
<h1 class="mb-3">
{{ $t("Quick Stats") }}
@ -81,10 +81,17 @@ export default {
Status,
Pagination,
},
props: {
calculatedHeight: {
type: Number,
default: 0
}
},
data() {
return {
page: 1,
perPage: 25,
initialPerPage: 25,
heartBeatList: [],
paginationConfig: {
hideCount: true,
@ -134,6 +141,37 @@ export default {
return this.heartBeatList.slice(startIndex, endIndex);
},
},
watch: {
importantHeartBeatList() {
this.$nextTick(() => {
this.updatePerPage();
});
},
},
mounted() {
this.initialPerPage = this.perPage;
window.addEventListener("resize", this.updatePerPage);
this.updatePerPage();
},
beforeUnmount() {
window.removeEventListener("resize", this.updatePerPage);
},
methods: {
updatePerPage() {
const tableContainer = this.$refs.tableContainer;
const tableContainerHeight = tableContainer.offsetHeight;
const availableHeight = window.innerHeight - tableContainerHeight;
const additionalPerPage = Math.floor(availableHeight / 58);
if (additionalPerPage > 0) {
this.perPage = Math.max(this.initialPerPage, this.perPage + additionalPerPage);
} else {
this.perPage = this.initialPerPage;
}
},
},
};
</script>