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

Updated mobile UI

Browse Source 
Using dvh and vh as fallback for mobile browsers.
This commit is contained in:
Donald Zou 2024-10-03 21:20:15 +08:00
parent c414725f12
commit 5f46f54dfd
7 changed files with 66 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/static/app/index.html
View File

@ -7,7 +7,7 @@
<title>WGDashboard</title> <title>WGDashboard</title>
</head> </head>
<body> <body>
<div id="app" class="w-100 vh-100"></div> <div id="app"></div>
<script type="module" src="./src/main.js"></script> <script type="module" src="./src/main.js"></script>
</body> </body>
</html> </html>

2
src/static/app/src/App.vue
View File

@ -62,7 +62,7 @@ const getActiveCrossServer = computed(() => {
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.navbarBtn{ .navbar{
display: none; display: none;
} }
} }

13
src/static/app/src/components/messageCentreComponent/message.vue
View File

@ -16,13 +16,12 @@ export default {
</script> </script>
<template> <template>
<div class="card shadow rounded-3 position-relative mb-2" <div class="card shadow rounded-3 position-relative mb-2 message ms-auto"
:class="{ :class="{
'text-bg-danger': this.message.type === 'danger', 'text-bg-danger': this.message.type === 'danger',
'text-bg-success': this.message.type === 'success', 'text-bg-success': this.message.type === 'success',
'text-bg-warning': this.message.type === 'warning'}" 'text-bg-warning': this.message.type === 'warning'}"
:id="this.message.id" :id="this.message.id">
style="width: 400px">
<div class="card-body"> <div class="card-body">
<small class="fw-bold d-block" style="text-transform: uppercase"> <small class="fw-bold d-block" style="text-transform: uppercase">
<LocaleText t="FROM "></LocaleText> <LocaleText t="FROM "></LocaleText>
@ -33,5 +32,13 @@ export default {
</template> </template>
<style scoped> <style scoped>
.message{
width: 100%;
}
@media screen and (min-width: 576px) {
.message{
width: 400px;
}
}
</style> </style>

26
src/static/app/src/components/navbar.vue
View File

@ -42,9 +42,10 @@ export default {
<div class="col-md-3 col-lg-2 d-md-block p-3 navbar-container" <div class="col-md-3 col-lg-2 d-md-block p-3 navbar-container"
:class="{active: this.dashboardConfigurationStore.ShowNavBar}" :class="{active: this.dashboardConfigurationStore.ShowNavBar}"
:data-bs-theme="dashboardConfigurationStore.Configuration.Server.dashboard_theme" :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" > <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 ">
<h5 class="text-white text-center m-0 py-3 mb-3 btn-brand fw-light">WGDashboard</h5>
<ul class="nav flex-column px-2"> <ul class="nav flex-column px-2">
<li class="nav-item"> <li class="nav-item">
<RouterLink class="nav-link rounded-3" <RouterLink class="nav-link rounded-3"
@ -125,14 +126,35 @@ export default {
animation-fill-mode: both; animation-fill-mode: both;
display: none; display: none;
animation-timing-function: cubic-bezier(0.82, 0.58, 0.17, 0.9); animation-timing-function: cubic-bezier(0.82, 0.58, 0.17, 0.9);
} }
.navbar-container.active{ .navbar-container.active{
animation-direction: normal; animation-direction: normal;
display: block !important; display: block !important;
animation-name: zoomInFade animation-name: zoomInFade
} }
} }
.navbar-container{
height: 100vh;
}
@supports (height: 100dvh) {
@media screen and (max-width: 768px){
.navbar-container{
height: calc(100dvh - 50px);
}
}
}
@keyframes zoomInFade { @keyframes zoomInFade {
0%{ 0%{
opacity: 0; opacity: 0;

1
src/static/app/src/components/settingsComponent/dashboardLanguage.vue
View File

@ -71,7 +71,6 @@ export default {
</small> </small>
</p> </p>
<i class="bi bi-check text-primary fs-5" <i class="bi bi-check text-primary fs-5"
v-if="currentLanguage?.lang_id === x.lang_id"></i> v-if="currentLanguage?.lang_id === x.lang_id"></i>
</a> </a>
</li> </li>

20
src/static/app/src/views/index.vue
View File

@ -24,7 +24,7 @@ export default {
<div class="container-fluid flex-grow-1 main" :data-bs-theme="this.dashboardConfigurationStore.Configuration.Server.dashboard_theme"> <div class="container-fluid flex-grow-1 main" :data-bs-theme="this.dashboardConfigurationStore.Configuration.Server.dashboard_theme">
<div class="row h-100"> <div class="row h-100">
<Navbar></Navbar> <Navbar></Navbar>
<main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 overflow-y-scroll mb-0" style="height: calc(100vh - 50px)"> <main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 overflow-y-scroll mb-0">
<Suspense> <Suspense>
<RouterView v-slot="{Component}"> <RouterView v-slot="{Component}">
<Transition name="fade2" mode="out-in"> <Transition name="fade2" mode="out-in">
@ -32,8 +32,8 @@ export default {
</Transition> </Transition>
</RouterView> </RouterView>
</Suspense> </Suspense>
<div class="messageCentre text-body position-fixed"> <div class="messageCentre text-body position-fixed d-flex">
<TransitionGroup name="message" tag="div" class="position-relative"> <TransitionGroup name="message" tag="div" class="position-relative flex-grow-1 d-flex align-items-end">
<Message v-for="m in getMessages.slice().reverse()" <Message v-for="m in getMessages.slice().reverse()"
:message="m" :key="m.id"></Message> :message="m" :key="m.id"></Message>
</TransitionGroup> </TransitionGroup>
@ -47,5 +47,19 @@ export default {
.messageCentre{ .messageCentre{
top: calc(50px + 1rem); top: calc(50px + 1rem);
right: 1rem; right: 1rem;
width: calc(100% - 2rem);
} }
main{
height: 100vh;
}
@supports (height: 100dvh) {
@media screen and (max-width: 768px) {
main{
height: calc(100dvh - 50px);
}
}
}
</style> </style>

11
src/static/css/dashboard.css
View File

@ -30,6 +30,17 @@
} }
} }
#app{
width: 100%;
height: 100vh;
}
@supports (height: 100dvh) {
#app{
height: 100dvh;
}
}
/* /*
* Sidebar * Sidebar
*/ */