diff --git a/css/index.css b/css/index.css index 461b7463..32c8ebdf 100644 --- a/css/index.css +++ b/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; diff --git a/index.html b/index.html index 6972ccf9..68b32bd6 100644 --- a/index.html +++ b/index.html @@ -219,7 +219,8 @@

EDAM ontology

- +
+
diff --git a/js/index.js b/js/index.js index 08909e09..933ed6fe 100644 --- a/js/index.js +++ b/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"); };