gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 09:58:32 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Mobile view: iOS sizing/styling changes (#1756)

Browse Source 
* Fix dark themed action-button text color on mobile safari

* Fix note view scrolling on ios safari

* Fix scroll issues on tree view on ios safari

* Fix mobile firefox/chrome sizing issues

* Fix scroll-to-active-note
This commit is contained in:
Patrick Moriarty 2021-03-17 16:07:53 -05:00 committed by GitHub
parent 70656d240b
commit a4bffbfa60
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/public/app/layouts/mobile_layout.js
View File

@ -24,11 +24,19 @@ kbd {
font-size: 1.5em;
padding-left: 0.5em;
padding-right: 0.5em;
color: var(--main-text-color);
}
</style>`;
const FANCYTREE_CSS = `
<style>
.tree-wrapper {
max-height: 100%;
margin-top: 55px;
overflow-y: auto;
contain: content;
}
.fancytree-custom-icon {
font-size: 2em;
}
@ -62,6 +70,14 @@ span.fancytree-expander {
border-width: 2px;
border-style: solid;
}
.tree-wrapper .collapse-tree-button,
.tree-wrapper .scroll-to-active-note-button,
.tree-wrapper .tree-settings-button {
position: fixed;
margin-right: 16px;
display: none;
}
</style>`;
export default class MobileLayout {
@ -72,17 +88,27 @@ export default class MobileLayout {
.css('height', '100vh')
.child(new ScreenContainer("tree", 'column')
.class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4")
.css("max-height", "100%")
.css('padding-left', 0)
.css('contain', 'content')
.child(new MobileGlobalButtonsWidget())
.child(new NoteTreeWidget("main").cssBlock(FANCYTREE_CSS)))
.child(new NoteTreeWidget("main")
.cssBlock(FANCYTREE_CSS)))
.child(new ScreenContainer("detail", "column")
.class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8")
.css('max-height', '100%')
.child(new FlexContainer('row').overflowing()
.css('font-size', 'larger')
.css('align-items', 'center')
.css('position', 'fixed')
.css('top', 0)
.child(new MobileDetailMenuWidget())
.child(new NoteTitleWidget())
.child(new CloseDetailButtonWidget()))
.child(new NoteDetailWidget()
.css('padding', '5px 20px 10px 0')));
.css('padding', '5px 20px 10px 0')
.css('margin-top', '55px')
.css('overflow-y', 'auto')
.css('contain', 'content')));
}
}

6
src/public/app/widgets/mobile_widgets/mobile_global_buttons.js
View File

@ -7,9 +7,11 @@ const WIDGET_TPL = `
display: flex;
flex-shrink: 0;
justify-content: space-around;
padding: 3px 0 3px 0;
margin: 0 10px 0 16px;
padding: 0px 0 3px 0;
font-size: larger;
position: absolute;
top: 8px;
width: 100%;
}
</style>