From 27d4c3c194cc1c1f84f7bf75229bf322d26ac7ba Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Thu, 23 Sep 2021 16:31:45 +0800
Subject: [PATCH] [status page] improve mobile layout

---
 src/components/PublicGroupList.vue | 11 ++++++++---
 src/layouts/Layout.vue             |  1 -
 src/mixins/mobile.js               | 17 ++++++++++++++---
 src/pages/Entry.vue                | 13 -------------
 src/pages/StatusPage.vue           | 10 ++++++++++
 5 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index cba0e022d..23d19e6cd 100644
--- a/src/components/PublicGroupList.vue
+++ b/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>
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 2cd9649dd..2342ed1a8 100644
--- a/src/layouts/Layout.vue
+++ b/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 {
 
diff --git a/src/mixins/mobile.js b/src/mixins/mobile.js
index b5812703f..e81ebf45c 100644
--- a/src/mixins/mobile.js
+++ b/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;
         },
-    }
+    },
 
-}
+};
diff --git a/src/pages/Entry.vue b/src/pages/Entry.vue
index 876313ed9..2dd3862a6 100644
--- a/src/pages/Entry.vue
+++ b/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;
 
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index f75cfb2da..3c7b40167 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -634,4 +634,14 @@ footer {
     }
 }
 
+.mobile {
+    h1 {
+        font-size: 22px;
+    }
+
+    .overall-status {
+        font-size: 20px;
+    }
+}
+
 </style>