Better sticky monitor list

louislam · Mar 21, 2022 · 4545eec · 4545eec
1 parent 3adda48
commit 4545eec
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git 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
@@ -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;