1
0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-06 16:00:28 +01:00

Adjusted some UI

This commit is contained in:
Donald Zou 2024-08-13 12:29:58 -04:00
parent e3f82e136a
commit 3a34a0eb40
7 changed files with 43 additions and 32 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -25,12 +25,13 @@ const getActiveCrossServer = computed(() => {
</script> </script>
<template> <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"> <div class="container-fluid d-flex text-body align-items-center">
<span class="navbar-brand mb-0 h1">WGDashboard</span> <span class="navbar-brand mb-0 h1">WGDashboard</span>
<small class="ms-auto text-muted" v-if="getActiveCrossServer !== undefined"> <small class="ms-auto text-muted" v-if="getActiveCrossServer !== undefined">
<i class="bi bi-server me-2"></i>{{getActiveCrossServer.host}} <i class="bi bi-server me-2"></i>{{getActiveCrossServer.host}}
</small> </small>
<a role="button"><i class="bi bi-list"></i></a>
</div> </div>
</nav> </nav>
<Suspense> <Suspense>

View File

@ -14,7 +14,7 @@ export default {
</script> </script>
<template> <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" > <nav id="sidebarMenu" class=" bg-body-tertiary sidebar border h-100 rounded-3 shadow overflow-y-scroll" >
<div class="sidebar-sticky pt-3"> <div class="sidebar-sticky pt-3">
<ul class="nav flex-column px-2"> <ul class="nav flex-column px-2">
@ -75,5 +75,10 @@ export default {
</template> </template>
<style scoped> <style scoped>
@media screen and (max-width: 768px) {
.navbar-container{
position: absolute;
z-index: 1000;
}
}
</style> </style>

View File

@ -65,7 +65,7 @@ export default {
<div class="card mb-4 shadow rounded-3"> <div class="card mb-4 shadow rounded-3">
<div class="card-header d-flex"> <div class="card-header d-flex">
API Keys 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" <input class="form-check-input" type="checkbox"
v-model="this.value" v-model="this.value"
@change="this.toggleDashboardAPIKeys()" @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"> <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" <button class="ms-auto btn bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3 shadow-sm"
@click="this.newDashboardAPIKey = true" @click="this.newDashboardAPIKey = true"
v-if="!this.store.getActiveCrossServer()"
> >
<i class="bi bi-key me-2"></i> Create <i class="bi bi-key me-2"></i> Create
</button> </button>

View File

@ -44,18 +44,22 @@ export default {
<small class="text-muted">Expire At</small> <small class="text-muted">Expire At</small>
{{this.apiKey.ExpiredAt ? this.apiKey.ExpiredAt : 'Never'}} {{this.apiKey.ExpiredAt ? this.apiKey.ExpiredAt : 'Never'}}
</div> </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> <i class="bi bi-trash-fill"></i>
</a> </a>
</div> </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? Are you sure to delete this API key?
<a role="button" class="btn btn-sm bg-success-subtle text-success-emphasis rounded-3" <a role="button" class="btn btn-sm bg-success-subtle text-success-emphasis rounded-3"
@click="this.deleteAPIKey()" @click="this.deleteAPIKey()"
> >
<i class="bi bi-check-lg"></i> <i class="bi bi-check-lg"></i>
</a> </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> <i class="bi bi-x-lg"></i>
</a> </a>
</div> </div>

View File

@ -77,8 +77,8 @@ export default {
<AccountSettingsInputPassword <AccountSettingsInputPassword
targetData="password"> targetData="password">
</AccountSettingsInputPassword> </AccountSettingsInputPassword>
<hr class="m-0"> <hr class="m-0" v-if="!this.dashboardConfigurationStore.getActiveCrossServer()">
<AccountSettingsMFA></AccountSettingsMFA> <AccountSettingsMFA v-if="!this.dashboardConfigurationStore.getActiveCrossServer()"></AccountSettingsMFA>
</div> </div>
</div> </div>
<DashboardAPIKeys></DashboardAPIKeys> <DashboardAPIKeys></DashboardAPIKeys>