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:
parent
3feb45dc01
commit
4f648aff52
2
src/static/app/dist/assets/index.css
vendored
2
src/static/app/dist/assets/index.css
vendored
File diff suppressed because one or more lines are too long
40
src/static/app/dist/assets/index.js
vendored
40
src/static/app/dist/assets/index.js
vendored
File diff suppressed because one or more lines are too long
@ -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>
|
@ -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>
|
@ -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>
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
@ -16,7 +16,8 @@ export const DashboardConfigurationStore = defineStore('DashboardConfigurationSt
|
||||
ServerList: {}
|
||||
},
|
||||
ActiveServerConfiguration: undefined,
|
||||
IsElectronApp: false
|
||||
IsElectronApp: false,
|
||||
ShowNavBar: false
|
||||
}),
|
||||
actions: {
|
||||
initCrossServerConfiguration(){
|
||||
|
@ -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}`
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user