From 66cee8daa42460e9c9e9bdbd2182c079e23a2bf2 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Fri, 13 Apr 2018 19:58:33 -0400
Subject: [PATCH] restructuring CSS grid/flex which fixes jumpy scrolling in
 tree

---
 src/public/stylesheets/style.css | 13 +++-------
 src/views/index.ejs              | 42 ++++++++++++++++----------------
 2 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index f37a9550e..463adcdd7 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -4,18 +4,12 @@
 
     display: grid;
     grid-template-areas: "header header"
-                         "tree-actions title"
-                         "search note-detail"
-                         "tree note-detail"
-                         "parent-list note-detail"
-                         "parent-list label-list";
+                         "left-pane title"
+                         "left-pane note-detail";
     grid-template-columns: 2fr 5fr;
     grid-template-rows: auto
                         auto
-                        auto
-                        1fr
-                        auto
-                        auto;
+                        1fr;
 
     justify-content: center;
     grid-gap: 10px;
@@ -291,7 +285,6 @@ div.ui-tooltip {
 .cm-matchhighlight {background-color: #eeeeee}
 
 #label-list {
-    grid-area: label-list;
     color: #777777;
     border-top: 1px solid #eee;
     padding: 5px; display: none;
diff --git a/src/views/index.ejs b/src/views/index.ejs
index f114c9e3a..cfd98145e 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -38,7 +38,7 @@
         </div>
       </div>
 
-      <div class="hide-toggle" style="grid-area: tree-actions;">
+      <div style="grid-area: left-pane; display: flex; flex-direction: column;" class="hide-toggle">
         <div style="display: flex; justify-content: space-around; padding: 10px 0 10px 0; margin: 0 20px 0 20px; border: 1px solid #ccc;">
           <a id="create-top-level-note-button" title="Create new top level note" class="icon-action"
              style="background: url('/images/icons/file-plus.png')"></a>
@@ -54,28 +54,28 @@
         </div>
 
         <input type="file" id="import-upload" style="display: none" />
-      </div>
 
-      <div id="search-box" class="hide-toggle" style="grid-area: search; display: none; padding: 10px; margin-top: 10px;">
-        <div style="display: flex; align-items: center;">
-          <input name="search-text" placeholder="Search text, labels" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
-          <button id="do-search-button" class="btn btn-primary btn-sm" title="Search">Search</button>
+        <div id="search-box" style="display: none; padding: 10px; margin-top: 10px;">
+          <div style="display: flex; align-items: center;">
+            <input name="search-text" placeholder="Search text, labels" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
+            <button id="do-search-button" class="btn btn-primary btn-sm" title="Search">Search</button>
+          </div>
+
+          <div style="display: flex; align-items: center; justify-content: space-evenly; margin-top: 10px;">
+            <button id="reset-search-button" class="btn btn-sm" title="Reset search">Reset search</button>
+
+            <button id="save-search-button" class="btn btn-sm" title="Save search">Save search</button>
+          </div>
         </div>
 
-        <div style="display: flex; align-items: center; justify-content: space-evenly; margin-top: 10px;">
-          <button id="reset-search-button" class="btn btn-sm" title="Reset search">Reset search</button>
-
-          <button id="save-search-button" class="btn btn-sm" title="Save search">Save search</button>
+        <div id="tree" class="hide-toggle" style="overflow: auto; flex-grow: 100; flex-shrink: 100; margin-top: 10px;">
         </div>
-      </div>
 
-      <div id="tree" class="hide-toggle" style="grid-area: tree; overflow: auto;">
-      </div>
+        <div id="parent-list">
+          <p><strong>Note locations:</strong></p>
 
-      <div id="parent-list" class="hide-toggle">
-        <p><strong>Note locations:</strong></p>
-
-        <ul id="parent-list-inner"></ul>
+          <ul id="parent-list-inner"></ul>
+        </div>
       </div>
 
       <div class="hide-toggle" style="grid-area: title;">
@@ -206,12 +206,12 @@
         </div>
 
         <div id="children-overview"></div>
-      </div>
 
-      <div id="label-list">
-        <button class="btn btn-sm show-labels-button">Labels:</button>
+        <div id="label-list">
+          <button class="btn btn-sm show-labels-button">Labels:</button>
 
-        <span id="label-list-inner"></span>
+          <span id="label-list-inner"></span>
+        </div>
       </div>
     </div>