Adjusted some UI

donaldzou · Aug 13, 2024 · 3a34a0e · 3a34a0e
1 parent e3f82e1
commit 3a34a0e
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 32 deletions.
diff --git a/src/static/app/dist/assets/index.css b/src/static/app/dist/assets/index.css
diff --git a/src/static/app/dist/assets/index.js b/src/static/app/dist/assets/index.js
diff --git a/src/static/app/src/App.vue b/src/static/app/src/App.vue
@@ -25,12 +25,13 @@ const getActiveCrossServer = computed(() => {
 </script>
 
 <template>
-	<nav class="navbar bg-dark sticky-top" data-bs-theme="dark">
+	<nav class="navbar bg-dark sticky-top border-bottom border-secondary-subtle" 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>
+			<a role="button"><i class="bi bi-list"></i></a>
 		</div>
 	</nav>
 	<Suspense>

diff --git a/src/static/app/src/components/navbar.vue b/src/static/app/src/components/navbar.vue
@@ -14,7 +14,7 @@ export default {
 </script>
 
 <template>
-	<div class="col-md-3 col-lg-2 d-md-block p-3" style="height: calc(-50px + 100vh);">
+	<div class="col-md-3 col-lg-2 d-md-block p-3 navbar-container bg-body" style="height: calc(-50px + 100vh);">
 		<nav id="sidebarMenu" class=" bg-body-tertiary sidebar border h-100 rounded-3 shadow overflow-y-scroll" >
 			<div class="sidebar-sticky pt-3">
 				<ul class="nav flex-column px-2">
@@ -75,5 +75,10 @@ export default {
 </template>
 
 <style scoped>
-
+@media screen and (max-width: 768px) {
+	.navbar-container{
+		position: absolute;
+		z-index: 1000;
+	}
+}
 </style>
diff --git a/src/static/app/src/components/settingsComponent/dashboardAPIKeys.vue b/src/static/app/src/components/settingsComponent/dashboardAPIKeys.vue
@@ -65,7 +65,7 @@ export default {
 	<div class="card mb-4 shadow rounded-3">
 		<div class="card-header d-flex">
 			API Keys
-			<div class="form-check form-switch ms-auto">
+			<div class="form-check form-switch ms-auto" v-if="!this.store.getActiveCrossServer()">
 				<input class="form-check-input" type="checkbox"
 				       v-model="this.value"
 				       @change="this.toggleDashboardAPIKeys()"
@@ -78,6 +78,7 @@ export default {
 		<div class="card-body position-relative d-flex flex-column gap-2" v-if="this.value">
 			<button class="ms-auto btn bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3 shadow-sm"
 			        @click="this.newDashboardAPIKey = true"
+			        v-if="!this.store.getActiveCrossServer()"
 			>
 				<i class="bi bi-key me-2"></i> Create
 			</button>

diff --git a/...tatic/app/src/components/settingsComponent/dashboardAPIKeysComponents/dashboardAPIKey.vue b/...tatic/app/src/components/settingsComponent/dashboardAPIKeysComponents/dashboardAPIKey.vue
@@ -44,18 +44,22 @@ export default {
 				<small class="text-muted">Expire At</small>
 				{{this.apiKey.ExpiredAt ? this.apiKey.ExpiredAt : 'Never'}}
 			</div>
-			<a role="button" class="btn btn-sm bg-danger-subtle text-danger-emphasis rounded-3" @click="this.confirmDelete = true">
+			<a role="button" class="btn btn-sm bg-danger-subtle text-danger-emphasis rounded-3"
+			   v-if="!this.store.getActiveCrossServer()"
+			   @click="this.confirmDelete = true">
 				<i class="bi bi-trash-fill"></i>
 			</a>
 		</div>
-		<div v-else class="card-body d-flex gap-3 align-items-center justify-content-end">
+		<div v-else class="card-body d-flex gap-3 align-items-center justify-content-end" 
+		     v-if="!this.store.getActiveCrossServer()">
 			Are you sure to delete this API key?
 			<a role="button" class="btn btn-sm bg-success-subtle text-success-emphasis rounded-3"
 				@click="this.deleteAPIKey()"
 			>
 				<i class="bi bi-check-lg"></i>
 			</a>
-			<a role="button" class="btn btn-sm bg-secondary-subtle text-secondary-emphasis rounded-3" @click="this.confirmDelete = false">
+			<a role="button" class="btn btn-sm bg-secondary-subtle text-secondary-emphasis rounded-3" 
+			   @click="this.confirmDelete = false">
 				<i class="bi bi-x-lg"></i>
 			</a>
 		</div>

diff --git a/src/static/app/src/views/settings.vue b/src/static/app/src/views/settings.vue
@@ -77,8 +77,8 @@ export default {
 					<AccountSettingsInputPassword
 						targetData="password">
 					</AccountSettingsInputPassword>
-					<hr class="m-0">
-					<AccountSettingsMFA></AccountSettingsMFA>
+					<hr class="m-0" v-if="!this.dashboardConfigurationStore.getActiveCrossServer()">
+					<AccountSettingsMFA v-if="!this.dashboardConfigurationStore.getActiveCrossServer()"></AccountSettingsMFA>
 				</div>
 			</div>
 			<DashboardAPIKeys></DashboardAPIKeys>