[status page] improve mobile layout

src/components/PublicGroupList.vue

@@ -33,7 +33,7 @@
                         <template #item="monitor">
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-6 col-md-8 small-padding">
+                                    <div class="col-9 col-md-8 small-padding">
                                         <div class="info">
                                             <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
                                             <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
@@ -42,7 +42,7 @@
                                             {{ monitor.element.name }}
                                         </div>
                                     </div>
-                                    <div :key="$root.userHeartbeatBar" class="col-6 col-md-4">
+                                    <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
                                         <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
                                     </div>
                                 </div>
@@ -61,7 +61,6 @@ import HeartbeatBar from "./HeartbeatBar.vue";
 import Uptime from "./Uptime.vue";
 
 export default {
-    name: "GroupList",
     components: {
         Draggable,
         HeartbeatBar,
@@ -136,4 +135,10 @@ export default {
     }
 }
 
+.mobile {
+    .item {
+        padding: 13px 0 10px 0;
+    }
+}
+
 </style>

src/layouts/Layout.vue

@@ -78,7 +78,6 @@
 <script>
 import Login from "../components/Login.vue";
 import compareVersions from "compare-versions";
-import axios from "axios";
 
 export default {
 

src/mixins/mobile.js

@@ -3,23 +3,34 @@ export default {
     data() {
         return {
             windowWidth: window.innerWidth,
-        }
+        };
     },
 
     created() {
         window.addEventListener("resize", this.onResize);
+        this.updateBody();
     },
 
     methods: {
         onResize() {
             this.windowWidth = window.innerWidth;
+            this.updateBody();
         },
+
+        updateBody() {
+            if (this.isMobile) {
+                document.body.classList.add("mobile");
+            } else {
+                document.body.classList.remove("mobile");
+            }
+        }
+
     },
 
     computed: {
         isMobile() {
             return this.windowWidth <= 767.98;
         },
-    }
+    },
 
-}
+};

src/pages/Entry.vue

@@ -6,19 +6,6 @@
 import axios from "axios";
 
 export default {
-
-    data() {
-        return {};
-    },
-
-    computed: {
-
-    },
-
-    watch: {
-
-    },
-
     async mounted() {
         let entryPage = (await axios.get("/api/entry-page")).data;
 

src/pages/StatusPage.vue

@@ -634,4 +634,14 @@ footer {
     }
 }
 
+.mobile {
+    h1 {
+        font-size: 22px;
+    }
+
+    .overall-status {
+        font-size: 20px;
+    }
+}
+
 </style>