From 4545eec3fe49dfdcc06c0c0858b902b0001c84e5 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Mon, 21 Mar 2022 23:53:55 +0800
Subject: [PATCH] Better sticky monitor list

---
 src/assets/app.scss            |  5 +----
 src/components/MonitorList.vue | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index b999da9d2..4f0c696c4 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -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 {
diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index ef51e89cd..e38d1810b 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -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;