From bd19dd3e55e3c537933ccec474e54cbe3c6e156d Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Tue, 15 Aug 2017 22:32:30 -0400
Subject: [PATCH] auto resizing (full height) of tree and editor to fill the
 window without creating global scrollbar (instead there are independent
 scrollbars for tree and editor)

---
 src/templates/app.html | 9 +++++----
 static/js/init.js      | 7 +++++++
 static/js/note.js      | 2 ++
 static/style.css       | 1 +
 4 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 static/js/init.js

diff --git a/src/templates/app.html b/src/templates/app.html
index 06fe76687..047b171e5 100644
--- a/src/templates/app.html
+++ b/src/templates/app.html
@@ -11,11 +11,11 @@
       <span id="error-message"></span>
     </div>
 
-    <div style="margin-left: auto; margin-right: auto; width: 1100px">
-      <div style="width: 300px; height: 800px; float: left; overflow: scroll;">
+    <div id="content" style="margin-left: auto; margin-right: auto; width: 1100px">
+      <div style="width: 300px; height: 100%; float: left;">
         <button type="button" class="btn" onclick="createNewTopLevelNote()">Create new note</button>
 
-        <div id="tree">
+        <div id="tree" style="overflow: scroll; height: 100%;">
         </div>
       </div>
 
@@ -32,7 +32,7 @@
 
         <div style="clear: both; height: 0"></div>
 
-        <div id="noteDetail">
+        <div id="noteDetail" style="overflow: scroll; height: 100%;">
           <p>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 immediatelly.</p>
 
           <p>You can work with the tree using following keyboard shortcuts:</p>
@@ -71,6 +71,7 @@
       const baseUrl = '';
     </script>
 
+    <script src="stat/js/init.js"></script>
     <script src="stat/js/tree.js"></script>
     <script src="stat/js/note.js"></script>
     <script src="stat/js/notecase2html.js"></script>
diff --git a/static/js/init.js b/static/js/init.js
new file mode 100644
index 000000000..03abb1c71
--- /dev/null
+++ b/static/js/init.js
@@ -0,0 +1,7 @@
+$(function() {
+    $(window).resize(function() {
+        $('div#tree').height($(window).height() - $('div#tree').offset().top);
+        $('div.note-editable').height($(window).height() - $('div.note-editable').offset().top);
+    });
+    $(window).resize();
+});
\ No newline at end of file
diff --git a/static/js/note.js b/static/js/note.js
index 23411617d..b3012ebbd 100644
--- a/static/js/note.js
+++ b/static/js/note.js
@@ -135,6 +135,8 @@ function loadNote(noteId) {
 
         $('#noteDetail').summernote('code', noteText);
 
+        $(window).resize(); // to trigger resizing of editor
+
         noteChangeDisabled = false;
     });
 }
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 969f3138e..ecd10eb10 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,6 +1,7 @@
 .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;
 }
 
 #top-message {