Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 10:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(mobile): immersive header & footer (proof of concept)

Browse Source
This commit is contained in:
Elian Doran 2025-02-08 12:29:02 +02:00
parent ab5a6c59b8
commit 8a8179ea4f
No known key found for this signature in database
3 changed files with 29 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -147,6 +147,7 @@ export default class MobileLayout {
.css("position", "relative") .css("position", "relative")
.child( .child(
new FlexContainer("row") new FlexContainer("row")
.id("title-bar")
.contentSized() .contentSized()
.css("font-size", "larger") .css("font-size", "larger")
.css("align-items", "center") .css("align-items", "center")

12
src/public/app/widgets/geo_map.ts
View File

@ -12,6 +12,18 @@ const TPL = `\
overflow: hidden; overflow: hidden;
} }
.geo-map-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.leaflet-top {
margin-top: calc(env(safe-area-inset-top) + var(--mobile-title-bar-height));
}
.leaflet-top, .leaflet-top,
.leaflet-bottom { .leaflet-bottom {
z-index: 900; z-index: 900;

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

@ -23,6 +23,7 @@
--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); --mobile-bottom-offset: calc(env(safe-area-inset-bottom) * 0.75);
--mobile-title-bar-height: 36px;
} }
html { html {
@ -66,6 +67,21 @@ body.mobile #root-widget {
padding-bottom: var(--mobile-bottom-offset); padding-bottom: var(--mobile-bottom-offset);
} }
#title-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
padding-top: env(safe-area-inset-top);
}
#title-bar,
#mobile-bottom-bar {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(16px);
}
body.desktop #root-widget.horizontal-layout { body.desktop #root-widget.horizontal-layout {
padding-top: env(safe-area-inset-top); padding-top: env(safe-area-inset-top);
background-color: var(--launcher-pane-background-color); background-color: var(--launcher-pane-background-color);