diff --git a/src/public/javascripts/services/mobile.js b/src/public/javascripts/services/mobile.js index 0636115e7..6f544b9cb 100644 --- a/src/public/javascripts/services/mobile.js +++ b/src/public/javascripts/services/mobile.js @@ -6,10 +6,16 @@ import treeBuilder from "./tree_builder.js"; const $tree = $("#tree"); const $detail = $("#detail"); +const $closeDetailButton = $("#close-detail-button"); -$detail.on('hide.bs.modal', e => { - $tree.show(); -}); +function togglePanes() { + if (!$tree.is(":visible") || !$detail.is(":visible")) { + $detail.toggleClass("d-none"); + $tree.toggleClass("d-none"); + } +} + +$closeDetailButton.click(togglePanes); async function showTree() { const tree = await treeService.loadTree(); @@ -25,12 +31,9 @@ async function showTree() { const noteId = node.data.noteId; treeService.setCurrentNotePathToHash(node); + togglePanes(); noteDetailService.switchToNote(noteId, true); - - $tree.hide(); - - $detail.modal(); }, expand: (event, data) => treeService.setExpandedToServer(data.node.data.branchId, true), collapse: (event, data) => treeService.setExpandedToServer(data.node.data.branchId, false), diff --git a/src/public/stylesheets/mobile.css b/src/public/stylesheets/mobile.css index c920ced2c..03ef85ba7 100644 --- a/src/public/stylesheets/mobile.css +++ b/src/public/stylesheets/mobile.css @@ -12,21 +12,13 @@ html, body { overflow: auto; } -.modal-full { - min-width: 100%; - margin: 0; -} - -.modal-backdrop { - background-color: transparent; -} - -.modal-full .modal-content { - min-height: 100vh; -} - #detail { + padding: 10px 20px 10px 35px; +} +#close-detail-button { + padding-left: 1em; + padding-right: 1em; } .fancytree-custom-icon { diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs index ca9493ab4..d2239b7b8 100644 --- a/src/views/mobile.ejs +++ b/src/views/mobile.ejs @@ -5,36 +5,34 @@ Trilium Notes +
+
-
+
+
+ -