Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-11-17 16:31:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(mobile): background for whole bottom area + fix alignment

Browse Source
This commit is contained in:
Elian Doran 2025-01-04 23:05:24 +02:00
parent 6e2444d74f
commit 336e298462
No known key found for this signature in database
3 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/public/app/layouts/mobile_layout.ts
View File

@ -184,13 +184,16 @@ export default class MobileLayout {
.child(new ProtectedSessionPasswordDialog())
.child(new ConfirmDialog())
)
.child(new FlexContainer("column")
.contentSized()
.id("mobile-bottom-bar")
.child(new TabRowWidget().css('height', '40px'))
.child(new FlexContainer("row")
.class("horizontal")
.css("height", "53px")
.child(new LauncherContainer(true))
.child(new GlobalMenuWidget(true))
.id("launcher-pane"))
.id("launcher-pane")))
.child(new AboutDialog())
.child(new HelpDialog())
}

8
src/public/stylesheets/style.css
View File

@ -22,6 +22,7 @@
:root {
--submenu-opening-delay: 300ms;
--launcher-pane-size: 53px;
--mobile-bottom-offset: calc(env(safe-area-inset-bottom) * 0.75);
}
html {
@ -57,7 +58,10 @@ body.mobile.context-menu-shown * {
body.mobile #root-widget {
padding-top: env(safe-area-inset-top);
padding-bottom: calc(env(safe-area-inset-bottom) * 0.75);
}
#mobile-bottom-bar {
padding-bottom: var(--mobile-bottom-offset);
}
body.desktop #root-widget.horizontal-layout {
@ -1190,7 +1194,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
body.mobile #launcher-pane .dropdown-menu.show {
position: fixed !important;
bottom: var(--launcher-pane-size) !important;
bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important;
top: unset !important;
left: 0 !important;
right: 0 !important;

11
src/public/stylesheets/theme-next/shell.css
View File

@ -113,7 +113,16 @@ body.layout-horizontal > .horizontal {
#launcher-pane.horizontal {
height: var(--launcher-pane-size) !important;
align-items: center;
border-top: 1px solid var(--launcher-pane-horizontal-border-color);
}
@media (max-width: 991px) {
#mobile-bottom-bar {
background: var(--launcher-pane-background-color);
}
#launcher-pane {
background: transparent !important;
}
}
@media (min-width: 992px) {