From 21f49ea7c5ea05e1ec1acee433ed988910516734 Mon Sep 17 00:00:00 2001 From: azivner Date: Sat, 23 Sep 2017 23:54:38 -0400 Subject: [PATCH] layout conversion to cleaner CSS grid, work in progress --- src/templates/app.html | 125 +++++++++++++++++++++-------------------- static/js/init.js | 18 ------ static/style.css | 25 ++++++--- 3 files changed, 79 insertions(+), 89 deletions(-) diff --git a/src/templates/app.html b/src/templates/app.html index 83aa89f31..497e25b17 100644 --- a/src/templates/app.html +++ b/src/templates/app.html @@ -5,85 +5,86 @@ Notecase web app -
-   +
 
-
-
-
- -
-
+
+

+ + + + +

+
-
- -
+
+ + Create new top level note + -
-

- - - - -

+ + Collapse tree + - - Create new top level note + + Collapse tree + +
+ +
+
+ +
+
+ - - Collapse tree + - - Collapse tree - +   -
+ + +
+
+ +
+
+ +
+
+
-
-
- - Encrypt note - +
+
+

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.

- - Decrypt note - +

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
    • +
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