From ec5f4f2778a082d5c4f1ab66f2d35e9da0795ac7 Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Thu, 7 Nov 2024 23:43:14 +0800
Subject: [PATCH] Fixed some CSS issue on mobile

---
 src/static/app/src/App.vue                    | 22 +++++++++----------
 src/static/app/src/components/navbar.vue      | 20 ++++++++++++++---
 src/static/app/src/views/newConfiguration.vue |  2 +-
 .../app/src/views/restoreConfiguration.vue    |  2 +-
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/static/app/src/App.vue b/src/static/app/src/App.vue
index fb4ddfb..2fa8525 100644
--- a/src/static/app/src/App.vue
+++ b/src/static/app/src/App.vue
@@ -1,5 +1,5 @@
 <script setup async>
-import { RouterView } from 'vue-router'
+import {RouterView, useRoute} from 'vue-router'
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 import {computed, watch} from "vue";
 const store = DashboardConfigurationStore();
@@ -14,26 +14,24 @@ watch(store.CrossServerConfiguration, () => {
 }, {
 	deep: true
 });
-const getActiveCrossServer = computed(() => {
-	if (store.ActiveServerConfiguration){
-		return store.CrossServerConfiguration.ServerList[store.ActiveServerConfiguration]
-	}
-	return undefined
-})
+const route = useRoute()
+
 </script>
 
 <template>
 	<div style="z-index: 9999; height: 5px" class="position-absolute loadingBar top-0 start-0"></div>
 	<nav class="navbar bg-dark sticky-top" data-bs-theme="dark">
 		<div class="container-fluid d-flex text-body align-items-center">
-			<span class="navbar-brand mb-0 h1">WGDashboard</span>
-			<small class="ms-auto text-muted" v-if="getActiveCrossServer !== undefined">
-				<i class="bi bi-server me-2"></i>{{getActiveCrossServer.host}}
-			</small>
+			<RouterLink to="/" class="navbar-brand mb-0 h1">
+				<img src="../public/img/logo.png" alt="WGDashboard Logo" style="width: 32px">
+			</RouterLink>
 			<a role="button" class="navbarBtn text-body"
 			   @click="store.ShowNavBar = !store.ShowNavBar"
 			   style="line-height: 0; font-size: 2rem">
-				<i class="bi bi-list"></i>
+				<Transition name="fade2" mode="out-in">
+					<i class="bi bi-list" v-if="!store.ShowNavBar"></i>
+					<i class="bi bi-x-lg" v-else></i>
+				</Transition>
 			</a>
 		</div>
 	</nav>
diff --git a/src/static/app/src/components/navbar.vue b/src/static/app/src/components/navbar.vue
index 836d41b..f9d5e82 100644
--- a/src/static/app/src/components/navbar.vue
+++ b/src/static/app/src/components/navbar.vue
@@ -23,6 +23,15 @@ export default {
 			openHelpModal: false,
 		}
 	},
+	computed: {
+		getActiveCrossServer(){
+			if (this.dashboardConfigurationStore.ActiveServerConfiguration){
+				return new URL(this.dashboardConfigurationStore.CrossServerConfiguration.ServerList
+					[this.dashboardConfigurationStore.ActiveServerConfiguration].host)
+			}
+			return undefined
+		}
+	},
 	mounted() {
 		fetchGet("/api/getDashboardUpdate", {}, (res) => {
 			if (res.status){
@@ -47,7 +56,14 @@ export default {
 	>
 		<nav id="sidebarMenu" class=" bg-body-tertiary sidebar border h-100 rounded-3 shadow overflow-y-scroll" >
 			<div class="sidebar-sticky ">
-				<h5 class="text-white text-center m-0 py-3 mb-3 btn-brand">WGDashboard</h5>
+				<div class="text-white text-center m-0 py-3 mb-3 btn-brand">
+					<h5 class="mb-0">
+						WGDashboard
+					</h5>
+					<small class="ms-auto" v-if="getActiveCrossServer !== undefined">
+						<i class="bi bi-hdd-rack-fill me-2"></i>{{getActiveCrossServer.host}}
+					</small>
+				</div>
 				<ul class="nav flex-column px-2">
 					<li class="nav-item">
 						<RouterLink class="nav-link rounded-3"
@@ -139,8 +155,6 @@ export default {
 		animation-fill-mode: both;
 		display: none;
 		animation-timing-function: cubic-bezier(0.82, 0.58, 0.17, 0.9);
-
-		
 	}
 	.navbar-container.active{
 		animation-direction: normal;
diff --git a/src/static/app/src/views/newConfiguration.vue b/src/static/app/src/views/newConfiguration.vue
index a934a5e..da237c6 100644
--- a/src/static/app/src/views/newConfiguration.vue
+++ b/src/static/app/src/views/newConfiguration.vue
@@ -126,7 +126,7 @@ export default {
 </script>
 
 <template>
-	<div class="mt-5 text-body">
+	<div class="mt-md-5 mt-3 text-body">
 		<div class="container mb-4">
 			<div class="mb-4 d-flex align-items-center gap-4">
 				<RouterLink to="/"
diff --git a/src/static/app/src/views/restoreConfiguration.vue b/src/static/app/src/views/restoreConfiguration.vue
index cbf8507..ecd6ade 100644
--- a/src/static/app/src/views/restoreConfiguration.vue
+++ b/src/static/app/src/views/restoreConfiguration.vue
@@ -16,7 +16,7 @@ const selectedConfiguration = ref("")
 </script>
 
 <template>
-	<div class="mt-5 text-body">
+	<div class="mt-md-5 mt-3 text-body">
 		<div class="container mb-4">
 			<div class="mb-5 d-flex align-items-center gap-4">
 				<RouterLink to="/"