kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 07:10: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>
</head>
<body>
<div id="app" class="w-100 vh-100"></div>
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
</body>
</html>

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

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

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

@ -16,13 +16,12 @@ export default {
</script>
<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="{
'text-bg-danger': this.message.type === 'danger',
'text-bg-success': this.message.type === 'success',
'text-bg-warning': this.message.type === 'warning'}"
:id="this.message.id"
style="width: 400px">
:id="this.message.id">
<div class="card-body">
<small class="fw-bold d-block" style="text-transform: uppercase">
<LocaleText t="FROM "></LocaleText>
@ -33,5 +32,13 @@ export default {
</template>
<style scoped>
.message{
width: 100%;
}
@media screen and (min-width: 576px) {
.message{
width: 400px;
}
}
</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"
: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">
<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">
<li class="nav-item">
<RouterLink class="nav-link rounded-3"
@ -125,14 +126,35 @@ export default {
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
}
}
.navbar-container{
height: 100vh;
}
@supports (height: 100dvh) {
@media screen and (max-width: 768px){
.navbar-container{
height: calc(100dvh - 50px);
}
}
}
@keyframes zoomInFade {
0%{
opacity: 0;

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

@ -71,7 +71,6 @@ export default {
</small>
</p>
<i class="bi bi-check text-primary fs-5"
v-if="currentLanguage?.lang_id === x.lang_id"></i>
</a>
</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="row h-100">
<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>
<RouterView v-slot="{Component}">
<Transition name="fade2" mode="out-in">
@ -32,8 +32,8 @@ export default {
</Transition>
</RouterView>
</Suspense>
<div class="messageCentre text-body position-fixed">
<TransitionGroup name="message" tag="div" class="position-relative">
<div class="messageCentre text-body position-fixed d-flex">
<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="m" :key="m.id"></Message>
</TransitionGroup>
@ -47,5 +47,19 @@ export default {
.messageCentre{
top: calc(50px + 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>

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

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