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 { .monitor-list {
&.scrollbar { &.scrollbar {
min-height: calc(100vh - 240px);
max-height: calc(100vh - 30px);
overflow-y: auto; overflow-y: auto;
position: sticky; height: calc(100% - 55px);
top: 10px;
} }
.item { .item {

View File

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