-
-
+
+
- + + + + +
+
-
-
+
+
+ 
+
-
+
+
+
-
+
+ 
+ 
+
+
+
+
+
-
-
-
- 
-
+
diff --git a/static/js/init.js b/static/js/init.js
index 0338643ae..fbdf7d59f 100644
--- a/static/js/init.js
+++ b/static/js/init.js
@@ -1,21 +1,3 @@
-$(function() {
- $(window).resize(function() {
- // dynamically setting height of tree and note content to match window's height
- const fancyTree = $('ul.fancytree-container');
-
- if (fancyTree.length) {
- fancyTree.height($(window).height() - fancyTree.offset().top - 10);
- }
-
- const noteEditable = $('div.note-editable');
-
- if (noteEditable.length) {
- noteEditable.height($(window).height() - noteEditable.offset().top);
- }
- });
- $(window).resize();
-});
-
// hot keys are active also inside inputs and content editables
jQuery.hotkeys.options.filterInputAcceptingElements = true;
jQuery.hotkeys.options.filterContentEditable = true;
diff --git a/static/style.css b/static/style.css
index 18b3eae7a..ff09cc3ba 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,19 +1,13 @@
.note-editable {
/* This is because with empty content height of editor is 0 and it's impossible to click into it */
min-height: 400px;
- overflow: scroll;
+ overflow: auto;
}
.note-editable.encrypted {
background-color: #eee;
}
-#noteDetailWrapper {
- width: 750px;
- float: left;
- margin-left: 30px;
-}
-
#top-message {
display: none; /* initial state is hidden */
background-color: #e0e0e0;
@@ -36,8 +30,6 @@
}
ul.fancytree-container {
- width: 290px;
- height: 400px;
overflow: auto;
position: relative;
outline: none !important;
@@ -82,4 +74,19 @@ span.fancytree-node.encrypted.fancytree-folder > span.fancytree-icon {
#encryptButton img, #decryptButton img {
top: -5px;
position: relative;
+}
+
+body {
+ display: grid;
+ height: 100vh;
+ grid-template-areas: "messages messages"
+ "search title"
+ "tree-buttons note-content"
+ "tree note-content";
+ grid-template-columns: 1fr 3fr;
+ grid-template-rows: auto
+ auto
+ auto
+ 1fr;
+ grid-gap: 10px;
}
\ No newline at end of file
-
+
+
+ 
-
+
-
-
-
- This prototype version supports basic editing, including some formatting (bold, italic, strike-through, underscore), images (just paste it into editor) and links. To edit the note, just click on title or content and you can directly modify it. Changes are saved immediately.
- -
-
+ You can work with the tree using following keyboard shortcuts:
- - - -
-
+ This prototype version supports basic editing, including some formatting (bold, italic, strike-through, underscore), images (just paste it into editor) and links. To edit the note, just click on title or content and you can directly modify it. Changes are saved immediately.
- -You can work with the tree using following keyboard shortcuts:
- --
-
- insert - create new note on current tree level -
- ctrl + insert - create new sub-note -
- delete - delete current note (and it's sub-notes) -
- shift + up - move current note up in the current tree level -
- shift + down - move current note down in the current tree level -
- shift + left - move current note up in the tree hierarchy -
- shift + right - move current note down in the tree hierarchy -
-
+
- insert - create new note on current tree level +
- ctrl + insert - create new sub-note +
- delete - delete current note (and it's sub-notes) +
- shift + up - move current note up in the current tree level +
- shift + down - move current note down in the current tree level +
- shift + left - move current note up in the tree hierarchy +
- shift + right - move current note down in the tree hierarchy +