Making tree box extandable vertically.

css/index.css

@@ -118,7 +118,25 @@ a:before {
 #tree-and-controls
 {
     position:relative;
-    height: 70vh !important;
+    height: 70vh;
+    min-height: 400px;
+    resize: vertical !important;
+}
+.resizer:hover
+{
+    background-color: grey;
+}
+.resizer
+{
+    background-color: #8884;
+    width: 100%;
+    height: 5px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    cursor: row-resize;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
 }
 
 .tree-controls{
@@ -128,7 +146,7 @@ a:before {
 }
 .tree-controls-right-bottom{
     right:0px;
-    bottom:1em;
+    bottom:2em;
 }
 .tree-controls-right-top{
     right:0px;

index.html

@@ -219,7 +219,8 @@ <h1 id="pageTitle">EDAM ontology</h1>
                     </div>
                 </div>
                 <div class="tooltip"></div>
-            </div>
+                <div id ="handle" class="resizer"></div>
+            </div> 
         </div>
         <div class="col-xs-12 col-lg-4" id="edamAccordion">
             <div id="history-separator" class="panel-separator temp">

js/index.js

@@ -64,6 +64,28 @@ window.onload = function() {
     }else{
         browser.current_branch(branch);
     }
+    var treeElement = document.getElementById("tree-and-controls");
+    treeElement.style.height = localStorage.getItem("tree-and-controls-height");
+    var resizer = document.getElementById("handle");
+    resizer.addEventListener("mousedown", initDrag, false);
+    var startY, startHeight;
+    function initDrag(e) {
+        startY = e.clientY;
+        startHeight = parseInt(
+        document.defaultView.getComputedStyle(treeElement).height,
+        10
+        );
+        document.documentElement.addEventListener("mousemove", doDrag, false);
+        document.documentElement.addEventListener("mouseup", stopDrag, false);
+    }
+    function doDrag(e) {
+        treeElement.style.height = startHeight + e.clientY - startY + "px";
+    }
+    function stopDrag(e) {
+        document.documentElement.removeEventListener("mousemove", doDrag, false);
+        document.documentElement.removeEventListener("mouseup", stopDrag, false);
+        localStorage.setItem("tree-and-controls-height", treeElement.style.height);
+    }
     $("input[name='show-detail']").prop("checked" , (localStorage.getItem("show-detail")||"true") == "true");
     $("input[name='show-community-usage']").prop("checked" , (localStorage.getItem("show-community-usage")||"false") == "true");
 };