Better sticky monitor list

This commit is contained in:
Louis Lam 2022-03-21 23:53:55 +08:00
parent 3adda48f3a
commit 4545eec3fe
2 changed files with 34 additions and 5 deletions

View File

@ -348,11 +348,8 @@ textarea.form-control {
.monitor-list {
&.scrollbar {
min-height: calc(100vh - 240px);
max-height: calc(100vh - 30px);
overflow-y: auto;
position: sticky;
top: 10px;
height: calc(100% - 55px);
}
.item {

View File

@ -1,5 +1,5 @@
<template>
<div class="shadow-box mb-3">
<div class="shadow-box mb-3" :style="boxStyle">
<div class="list-header">
<div class="placeholder"></div>
<div class="search-wrapper">
@ -63,9 +63,16 @@ export default {
data() {
return {
searchText: "",
windowTop: 0,
};
},
computed: {
boxStyle() {
return {
height: `calc(100vh - 160px + ${this.windowTop}px)`,
};
},
sortedMonitorList() {
let result = Object.values(this.$root.monitorList);
@ -108,7 +115,20 @@ export default {
return result;
},
},
mounted() {
window.addEventListener("scroll", this.onScroll);
},
beforeUnmount() {
window.removeEventListener("scroll", this.onScroll);
},
methods: {
onScroll() {
if (window.top.scrollY <= 133) {
this.windowTop = window.top.scrollY;
} else {
this.windowTop = 133;
}
},
monitorURL(id) {
return getMonitorRelativeURL(id);
},
@ -122,6 +142,12 @@ export default {
<style lang="scss" scoped>
@import "../assets/vars.scss";
.shadow-box {
height: calc(100vh - 150px);
position: sticky;
top: 10px;
}
.small-padding {
padding-left: 5px !important;
padding-right: 5px !important;
@ -142,6 +168,12 @@ export default {
}
}
.dark {
.footer {
// background-color: $dark-bg;
}
}
@media (max-width: 770px) {
.list-header {
margin: -20px;