xobs/farpatch-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mobile: fix mobile view

Browse Source 
This uses `dvh` and `dvw` rather than `vh` and `vw`, which excludes
things like the address bar and the keyboard.

Signed-off-by: Sean Cross <sean@xobs.io>
This commit is contained in:
Sean Cross
2023-12-03 19:35:34 +08:00
parent efe0397fab
commit 4ff0642139
6 changed files with 70 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
static/css/desktop.css
View File

@@ -51,7 +51,7 @@ main {
padding: 0rem;
/* SIDEBAR WIDTH */
margin-left: 10rem;
height: 100vh;
height: 100dvh;
transition: margin-left 500ms ease;
}
@@ -63,7 +63,7 @@ main {
.main-content {
display: none;
height: 100vh;
height: 100dvh;
}
.main-content-active {
@@ -76,7 +76,7 @@ main {
width: 10rem;
left: 0;
background-color: white;
height: 100vh;
height: 100dvh;
transition: width 500ms ease;
overflow: overlay;
}
@@ -92,7 +92,7 @@ main {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
}
.sidenav-item {
@@ -144,7 +144,7 @@ main {
}
.dashboard-view {
max-width: 89vw;
max-width: 89dvw;
padding-left: 1rem;
padding-right: 1rem;
display: grid;

15
static/css/mobile.css
View File

@@ -1,23 +1,28 @@
/* Small screen */
@media only screen and (max-width: 600px) {
main {
/* BOTTOM BAR HEIGHT */
height: calc(100vh - 5rem);
height: calc(100dvh - 5rem);
/* height: calc(calc(var(--vh, 1dvh) * 100) - 5rem); */
margin: 0;
padding: 0;
}
.main-content {
height: calc(100vh - 5rem);
height: calc(100dvh - 5rem);
/* height: calc(calc(var(--vh, 1dvh) * 100) - 5rem); */
}
.main-sidebar-rail {
margin-left: 0;
}
.dashboard-view {
padding-top: 1rem;
}
.sidenav {
bottom: 0;
width: 100vw;
width: 100dvw;
/* BOTTOM BAR HEIGHT */
height: 5rem;
align-items: flex-start;
@@ -26,7 +31,7 @@
}
.sidenav-rail {
width: 100vw;
width: 100dvw;
transition: none;
}