Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-11-18 00:41:48 +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

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

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

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

@ -22,6 +22,7 @@
:root { :root {
--submenu-opening-delay: 300ms; --submenu-opening-delay: 300ms;
--launcher-pane-size: 53px; --launcher-pane-size: 53px;
--mobile-bottom-offset: calc(env(safe-area-inset-bottom) * 0.75);
} }
html { html {
@ -57,7 +58,10 @@ body.mobile.context-menu-shown * {
body.mobile #root-widget { body.mobile #root-widget {
padding-top: env(safe-area-inset-top); 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 { 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 { body.mobile #launcher-pane .dropdown-menu.show {
position: fixed !important; position: fixed !important;
bottom: var(--launcher-pane-size) !important; bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important;
top: unset !important; top: unset !important;
left: 0 !important; left: 0 !important;
right: 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 { #launcher-pane.horizontal {
height: var(--launcher-pane-size) !important; height: var(--launcher-pane-size) !important;
align-items: center; 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) { @media (min-width: 992px) {