Merge pull request #1772 from chakflying/fix/mobile-monitor-list

Fix: Fix monitor list layout on mobile

src/assets/app.scss

@@ -383,6 +383,12 @@ optgroup {
         height: calc(100% - 65px);
     }
     
+    @media (max-width: 770px) {
+        &.scrollbar {
+            height: calc(100% - 40px);
+        }
+    }
+
     .item {
         display: block;
         text-decoration: none;

src/components/MonitorList.vue

@@ -69,10 +69,22 @@ export default {
         };
     },
     computed: {
+        /**
+         * Improve the sticky appearance of the list by increasing its
+         * height as user scrolls down.
+         * Not used on mobile.
+         */
         boxStyle() {
-            return {
+            if (window.innerWidth > 550) {
-                height: `calc(100vh - 160px + ${this.windowTop}px)`,
+                return {
-            };
+                    height: `calc(100vh - 160px + ${this.windowTop}px)`,
+                };
+            } else {
+                return {
+                    height: "calc(100vh - 160px)",
+                };
+            }
+
         },
 
         sortedMonitorList() {

src/pages/List.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="slide-fade" appear>
-        <MonitorList />
+        <MonitorList :scrollbar="true" />
     </transition>
 </template>
 
@@ -14,3 +14,11 @@ export default {
 };
 </script>
 
+<style lang="scss" scoped>
+@import "../assets/vars";
+
+.shadow-box {
+    padding: 20px;
+}
+
+</style>

src/router.js

@@ -65,12 +65,12 @@ const routes = [
                                 path: "/add",
                                 component: EditMonitor,
                             },
-                            {
-                                path: "/list",
-                                component: List,
-                            },
                         ],
                     },
+                    {
+                        path: "/list",
+                        component: List,
+                    },
                     {
                         path: "/settings",
                         component: Settings,