optimize for mobile

4 years ago · f9800a087e
5 changed files with 109 additions and 22 deletions
--- a/src/layouts/Layout.vue
+++ b/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>
-    .title {
-        font-weight: bold;
-    }
+<style scoped lang="scss">
+@import "../assets/vars.scss";

-    .nav {
-        margin-right: 25px;
-    }
+.bottom-nav {
+    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 {
-        padding: 5px;
-        background-color: crimson;
-        color: white;
-    }
+    a {
+        text-align: center;
+        width: 25%;
+        display: inline-block;
+        height: 100%;
+        padding: 8px 10px 0;
+        font-size: 13px;
+        color: #c1c1c1;
+        overflow: hidden;
+        text-decoration: none;

-    main {
-        margin-bottom: 30px;
+        &.router-link-exact-active {
+            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>
--- a/src/mixins/socket.js
+++ b/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") {
--- a/src/pages/Dashboard.vue
+++ b/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) {
--- a/src/pages/EditMonitor.vue
+++ b/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>

--- a/src/pages/Settings.vue
+++ b/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>