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

css: adjust padding for dashboard widgets

Browse Source 
Signed-off-by: Sean Cross <sean@xobs.io>
This commit is contained in:
Sean Cross 2023-12-06 18:00:05 +08:00
parent 4ff0642139
commit 450f1213af
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/css/desktop.css
View File

@ -145,8 +145,7 @@ main {
.dashboard-view { .dashboard-view {
max-width: 89dvw; max-width: 89dvw;
padding-left: 1rem; padding: 1rem;
padding-right: 1rem;
display: grid; display: grid;
gap: var(--space-xl) var(--space-xxl); gap: var(--space-xl) var(--space-xxl);
--repeat: auto-fit; --repeat: auto-fit;

23
static/css/mobile.css
View File

@ -1,15 +1,19 @@
/* Small screen */ /* Small screen */
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
:root {
--nav-height: 4rem;
--view-padding: 1rem;
}
main { main {
height: calc(100dvh - 5rem); height: calc(100dvh - var(--nav-height));
/* height: calc(calc(var(--vh, 1dvh) * 100) - 5rem); */
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.main-content { .main-content {
height: calc(100dvh - 5rem); height: calc(100dvh - var(--nav-height));
/* height: calc(calc(var(--vh, 1dvh) * 100) - 5rem); */ padding-bottom: calc(var(--nav-height) + var(--view-padding));
} }
.main-sidebar-rail { .main-sidebar-rail {
@ -24,9 +28,9 @@
bottom: 0; bottom: 0;
width: 100dvw; width: 100dvw;
/* BOTTOM BAR HEIGHT */ /* BOTTOM BAR HEIGHT */
height: 5rem; height: var(--nav-height);
align-items: flex-start; align-items: flex-start;
padding-top: 0.4rem; /* padding-top: 0.4rem; */
transition: none; transition: none;
} }
@ -36,7 +40,7 @@
} }
.sidenav-nav { .sidenav-nav {
height: 5rem; height: var(--nav-height);
flex-direction: row; flex-direction: row;
margin-top: 0; margin-top: 0;
align-items: flex-start; align-items: flex-start;
@ -53,4 +57,9 @@
#rail-toggle-button { #rail-toggle-button {
display: none; display: none;
} }
.dashboard-view {
padding-top: calc(var(--nav-height) + var(--view-padding));
padding-bottom: calc(var(--nav-height) + var(--view-padding));
}
} }