1
0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 15:20:09 +01:00

Updated UI for smaller screen

This commit is contained in:
Donald Zou 2024-08-14 12:07:53 -04:00
parent 3feb45dc01
commit 4f648aff52
9 changed files with 83 additions and 33 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

@ -31,7 +31,10 @@ const getActiveCrossServer = computed(() => {
<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>
<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></a>
</div>
</nav>
<Suspense>
@ -58,4 +61,12 @@ const getActiveCrossServer = computed(() => {
transform: translateY(-20px);
opacity: 0;
}
@media screen and (min-width: 768px) {
.navbarBtn{
display: none;
}
}
</style>

View File

@ -32,15 +32,14 @@ export default {
<template>
<div class="mt-5">
<div class="container">
<div class="d-flex mb-4 ">
<h3 class="text-body">
<div class="container-md">
<div class="d-flex mb-4 configurationListTitle">
<h3 class="text-body d-flex">
<i class="bi bi-body-text me-2"></i>
WireGuard Configurations</h3>
<span>WireGuard Configurations</span></h3>
<RouterLink to="/new_configuration" class="btn btn-dark btn-brand rounded-3 px-3 py-2 shadow ms-auto rounded-3">
<i class="bi bi-plus-circle-fill me-2"></i>
Configuration
</RouterLink>
</div>
<Transition name="fade" mode="out-in">
@ -60,5 +59,18 @@ export default {
</template>
<style scoped>
@media screen and (max-width: 768px) {
.configurationListTitle{
flex-direction: column;
gap: 0.5rem;
h3 span{
margin-left: auto !important;
}
.btn{
width: 100%;
}
}
}
</style>

View File

@ -14,7 +14,10 @@ export default {
</script>
<template>
<div class="col-md-3 col-lg-2 d-md-block p-3 navbar-container bg-body" style="height: calc(-50px + 100vh);">
<div class="col-md-3 col-lg-2 d-md-block p-3 navbar-container"
:class="{active: this.dashboardConfigurationStore.ShowNavBar}"
:data-bs-theme="dashboardConfigurationStore.Configuration.Server.dashboard_theme"
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">
@ -79,6 +82,28 @@ export default {
.navbar-container{
position: absolute;
z-index: 1000;
animation-duration: 0.4s;
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;
display: block !important;
animation-name: zoomInFade
}
}
@keyframes zoomInFade {
0%{
opacity: 0;
transform: translateY(60px);
filter: blur(3px);
}
100%{
opacity: 1;
transform: translateY(0px);
filter: blur(0px);
}
}
</style>

View File

@ -136,6 +136,7 @@ router.beforeEach(async (to, from, next) => {
}else{
document.title = "WGDashboard"
}
dashboardConfigurationStore.ShowNavBar = false;
if (to.meta.requiresAuth){
if (!dashboardConfigurationStore.getActiveCrossServer()){
@ -159,7 +160,6 @@ router.beforeEach(async (to, from, next) => {
next()
}
}else {
next();
}
});

View File

@ -16,7 +16,8 @@ export const DashboardConfigurationStore = defineStore('DashboardConfigurationSt
ServerList: {}
},
ActiveServerConfiguration: undefined,
IsElectronApp: false
IsElectronApp: false,
ShowNavBar: false
}),
actions: {
initCrossServerConfiguration(){

View File

@ -19,7 +19,7 @@ const getUrl = (url) => {
if (apiKey){
return `${apiKey.host}${url}`
}
return window.location.hostname === 'localhost' ? url
return import.meta.env.MODE === 'development' ? url
: `${window.location.protocol}//${window.location.host}${window.location.pathname}${url}`
}

View File

@ -121,7 +121,8 @@
}
[data-bs-theme="dark"].main,
#app:has(.main[data-bs-theme="dark"]){
#app:has(.main[data-bs-theme="dark"]),
[data-bs-theme="dark"].navbar-container{
background-color: #1b1e21;
}