optimize for mobile

src/layouts/Layout.vue

@@ -6,18 +6,25 @@
         </div>
     </div>
 
-    <header class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom">
+    <!-- Desktop header -->
-
+    <header class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom" v-if="! $root.isMobile">
         <router-link to="/dashboard" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
             <object class="bi me-2 ms-4" width="40" data="/icon.svg"></object>
             <span class="fs-4 title">Uptime Kuma</span>
         </router-link>
 
-        <ul class="nav nav-pills">
+        <ul class="nav nav-pills" >
             <li class="nav-item"><router-link to="/dashboard" class="nav-link">📊 Dashboard</router-link></li>
-            <li class="nav-item"><router-link to="/settings" class="nav-link">⚙ Settings</router-link></li>
+            <li class="nav-item"><router-link to="/settings" class="nav-link">🔧 Settings</router-link></li>
         </ul>
+    </header>
 
+    <!-- Mobile header -->
+    <header class="d-flex flex-wrap justify-content-center mt-3 mb-3" v-else>
+        <router-link to="/dashboard" class="d-flex align-items-center  text-dark text-decoration-none">
+            <object class="bi" width="40" data="/icon.svg"></object>
+            <span class="fs-4 title ms-2">Uptime Kuma</span>
+        </router-link>
     </header>
 
     <main>
@@ -26,6 +33,14 @@
         <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
     </main>
 
+    <!-- Mobile Only -->
+    <div style="width: 100%;height: 60px;" v-if="$root.isMobile"></div>
+    <nav class="bottom-nav" v-if="$root.isMobile">
+        <router-link to="/dashboard" class="nav-link" @click="$root.cancelActiveList"><div>📊</div>Dashboard</router-link>
+        <a href="#" :class=" { 'router-link-exact-active' : $root.showListMobile } " @click="$root.showListMobile = ! $root.showListMobile"><div>📃</div>List</a>
+        <router-link to="/add" class="nav-link" @click="$root.cancelActiveList"><div>➕</div>Add</router-link>
+        <router-link to="/settings" class="nav-link" @click="$root.cancelActiveList"><div>🔧</div>Settings</router-link>
+    </nav>
 </template>
 
 <script>
@@ -34,6 +49,14 @@ import Login from "../components/Login.vue";
 export default {
     components: {
         Login
+    },
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+
     },
     mounted() {
         this.init();
@@ -48,27 +71,65 @@ export default {
             if (this.$route.name === "root") {
                 this.$router.push("/dashboard")
             }
-        }
+        },
+
     }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-    .title {
+@import "../assets/vars.scss";
-        font-weight: bold;
-    }
 
-    .nav {
+.bottom-nav {
-        margin-right: 25px;
+    z-index: 1000;
-    }
+    position: fixed;
+    bottom: 0;
+    height: 60px;
+    width: 100%;
+    left: 0;
+    background-color: #fff;
+    box-shadow: 0 15px 47px 0 rgba(0, 0, 0, 0.05), 0 5px 14px 0 rgba(0, 0, 0, 0.05);
+    text-align: center;
+    white-space: nowrap;
+    padding: 0 35px;
 
-    .lost-connection {
+    a {
-        padding: 5px;
+        text-align: center;
-        background-color: crimson;
+        width: 25%;
-        color: white;
+        display: inline-block;
-    }
+        height: 100%;
+        padding: 8px 10px 0;
+        font-size: 13px;
+        color: #c1c1c1;
+        overflow: hidden;
+        text-decoration: none;
 
-    main {
+        &.router-link-exact-active {
-        margin-bottom: 30px;
+            color: $primary;
+            font-weight: bold;
+        }
+
+        div {
+            font-size: 20px;
+        }
     }
+}
+
+.title {
+    font-weight: bold;
+}
+
+.nav {
+    margin-right: 25px;
+}
+
+.lost-connection {
+    padding: 5px;
+    background-color: crimson;
+    color: white;
+}
+
+main {
+    margin-bottom: 30px;
+}
 </style>

src/mixins/socket.js

@@ -25,10 +25,14 @@ export default {
             avgPingList: { },
             uptimeList: { },
             notificationList: [],
+            windowWidth: window.innerWidth,
+            showListMobile: false,
         }
     },
 
     created() {
+        window.addEventListener('resize', this.onResize);
+
         let wsHost;
         if (localStorage.dev === "dev") {
             wsHost = ":3001"
@@ -136,6 +140,14 @@ export default {
 
     methods: {
 
+        cancelActiveList() {
+            this.$root.showListMobile = false;
+        },
+
+        onResize() {
+            this.windowWidth = window.innerWidth;
+        },
+
         storage() {
             return (this.remember) ? localStorage : sessionStorage;
         },
@@ -209,6 +221,10 @@ export default {
 
     computed: {
 
+        isMobile() {
+            return this.windowWidth <= 767.98;
+        },
+
         timezone() {
 
             if (this.userTimezone === "auto") {

src/pages/Dashboard.vue

@@ -3,17 +3,17 @@
     <div class="container-fluid">
         <div class="row">
             <div class="col-12 col-md-5 col-xl-4">
-                <div>
+                <div v-if="! $root.isMobile">
                     <router-link to="/add" class="btn btn-primary">Add New Monitor</router-link>
                 </div>
 
-                <div class="shadow-box list mb-4">
+                <div class="shadow-box list mb-4" v-if="showList">
 
                     <div class="text-center mt-3" v-if="Object.keys($root.monitorList).length === 0">
                         No Monitors, please <router-link to="/add">add one</router-link>.
                     </div>
 
-                    <router-link :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" v-for="item in sortedMonitorList">
+                    <router-link :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" v-for="item in sortedMonitorList" @click="$root.cancelActiveList">
 
                         <div class="row">
                         	<div class="col-6 col-md-8 small-padding">
@@ -53,6 +53,7 @@ export default {
     },
     data() {
         return {
+
         }
     },
     computed: {
@@ -86,6 +87,9 @@ export default {
 
             return result;
         },
+        showList() {
+            return ! this.$root.isMobile || this.$root.showListMobile;
+        },
     },
     methods: {
         monitorURL(id) {

src/pages/EditMonitor.vue

@@ -55,6 +55,9 @@
             </div>
 
             <div class="col-md-6">
+
+                <div class="mt-3" v-if="$root.isMobile"></div>
+
                 <h2>Notifications</h2>
                 <p v-if="$root.notificationList.length === 0">Not available, please setup.</p>
 

src/pages/Settings.vue

@@ -51,6 +51,9 @@
             </div>
 
             <div class="col-md-6">
+
+                <div class="mt-3" v-if="$root.isMobile"></div>
+
                 <h2>Notifications</h2>
                 <p v-if="$root.notificationList.length === 0">Not available, please setup.</p>
                 <p v-else>Please assign the notification to monitor(s) to get it works.</p>