zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-02-24 23:13:43 +08:00
Code Issues Projects Releases Packages Wiki Activity

basic responsive layout

Browse source
This commit is contained in:
azivner 2018-12-24 20:38:38 +01:00
parent eeb62a6cf2
commit 5dea271d6f
3 changed files with 33 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/public/javascripts/services/mobile.js
View file

@ -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),

18
src/public/stylesheets/mobile.css
View file

@ -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 {

38
src/views/mobile.ejs
View file

@ -5,36 +5,34 @@
<title>Trilium Notes</title>
</head>
<body>
<div class="row">
<div id="tree" class="d-sm-block d-md-block d-lg-block d-xl-block col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
<div id="tree"></div>
<div id="detail" class="d-none d-sm-block d-md-block d-lg-block d-xl-block col-12 col-sm-8 col-md-8 col-lg-8">
<div style="display: flex; padding-left: 10px;">
<input autocomplete="off" value="" id="note-title" class="form-control" tabindex="1">
<div id="detail" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-full" role="document">
<div class="modal-content">
<div class="modal-header">
<input autocomplete="off" value="" id="note-title" class="form-control" tabindex="1">
<button type="button" id="close-detail-button" class="close d-sm-none d-md-none d-lg-none d-xl-none" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<span id="saved-indicator" title="All changes have been saved" class="jam jam-check"></span>
<div style="position: relative;">
<span id="saved-indicator" title="All changes have been saved" class="jam jam-check"></span>
<div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
<div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
<div id="note-detail-code" class="note-detail-component"></div>
<div id="note-detail-code" class="note-detail-component"></div>
<% include details/search.ejs %>
<% include details/search.ejs %>
<% include details/render.ejs %>
<% include details/render.ejs %>
<% include details/file.ejs %>
<% include details/file.ejs %>
<% include details/image.ejs %>
<% include details/image.ejs %>
<% include details/relation_map.ejs %>
</div>
<% include details/relation_map.ejs %>
</div>
</div>
</div>