Restructuring html layout to fix nexting issues causing menu to displ…

…ay under table. Closes #619
sandialabs · Feb 1, 2017 · b6b8e3b · b6b8e3b
1 parent 8d854aa
commit b6b8e3b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 91 deletions.
diff --git a/web-server/plugins/slycat-timeseries-model/js/ui.js b/web-server/plugins/slycat-timeseries-model/js/ui.js
@@ -15,60 +15,14 @@ define("slycat-timeseries-model", ["slycat-server-root", "slycat-bookmark-manage
 // Setup the resizing layout ...
 var bodyLayout = $("#timeseries-model").layout({
   applyDefaultStyles: false,
-  north:
-  {
-    initClosed : true,
-    resizeWhileDragging : false,
-    // onresize: function()
-    // {
-    //   console.log('resized bodyLayout north');
-    // },
-  },
-  center:
-  {
-    resizeWhileDragging : false,
-    // onresize: function()
-    // {
-    //   console.log('resized bodyLayout center');
-    // },
-  },
-  south:
-  {
-    size: $(window).height() / 3,
-    //size: $("body").height() / 3,
-    resizeWhileDragging : false,
-    onresize: function()
-    {
-      $("#table").table("resize_canvas");
-      //console.log('resized bodyLayout south');
-    },
-  },
-});
-
-var contentPaneLayout = $("#content-pane").layout({
   north :
   {
     size: 28,
     resizeWhileDragging : false,
-    // onresize: function()
-    // {
-    //   console.log('resized contentPaneLayout north');
-    // },
-  },
-  center :
-  {
-    resizeWhileDragging : false,
-    // onresize: function()
-    // {
-    //   console.log('resized contentPaneLayout center');
-    // },
   },
-});
-
-var modelPaneLayout = $("#model-pane").layout({
   west :
   {
-    size : $("#model-pane").width() / 2,
+    size : $("#timeseries-model").width() / 2,
     resizeWhileDragging : false,
     onresize: function()
     {
@@ -89,6 +43,15 @@ var modelPaneLayout = $("#model-pane").layout({
     resizeWhileDragging: false,
     onresize: function() { $("#legend").legend("option", {width: $("#legend-pane").width(), height: $("#legend-pane").height()}); },
   },
+  south:
+  {
+    size: $("#timeseries-model").height() / 3,
+    resizeWhileDragging : false,
+    onresize: function()
+    {
+      $("#table").table("resize_canvas");
+    },
+  },
 });
 
 //////////////////////////////////////////////////////////////////////////////////////////

diff --git a/web-server/plugins/slycat-timeseries-model/ui.html b/web-server/plugins/slycat-timeseries-model/ui.html
@@ -32,53 +32,55 @@
 
 <div id="timeseries-model" style="-webkit-flex:1; flex:1;">
   <slycat-job-checker></slycat-job-checker>
-  <div id="content-pane" class="ui-layout-center">
-	  <div id="cluster-pane" class="ui-layout-north">
-	  	<div class="center bootstrap-styles" id="controls">
-	  		<div id="general-controls" class="btn-group btn-group-xs"></div>
-	  		<div id="color-switcher" class="btn-group btn-group-xs"></div>
-	  	</div>
-	    <div class="load-status"></div>
-	  </div>
-	  <div id="model-pane" class="ui-layout-center">
-	    <div id="dendrogram-pane" class="ui-layout-west">
-	      <div id="dendrogram-sparkline-backdrop"></div>
-	      <div class="load-status"></div>
-	      <svg id="dendrogram-viewer" width="100%" height="100%">
-	        <defs>
-	          <linearGradient id="subtree-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-	            <stop offset="0%" stop-color="#7767b0" stop-opacity="1" />
-	            <stop offset="100%" stop-color="#ffffff" stop-opacity="1" />
-	          </linearGradient>
-	        </defs>
-	      </svg>
-	    </div>
-	    <div id="waveform-pane" class="ui-layout-center">
-	      <div class="load-status"></div>
-	      <svg id="waveform-viewer" width="100%" height="100%" style="position: absolute;">
-	      </svg>
-	      <div id="waveform-progress">
-	        <input class="waveformPie" value="1" />
-	      </div>
-        <div id="waveform-selection-progress">
-          <input class="waveformPie" value="1" />
-        </div>
-	      <div id="waveform-selector-progress-wrapper">
-	      	<div id="waveform-selector-progress">
-	        	<input class="waveformPie" value="1" />
-            Please wait while we prepare the ability to select waveforms...
-          </div>
-  		  </div>
-	    </div>
-	    <div id="legend-pane" class="ui-layout-east">
-	      <div class="load-status"></div>
-	      <div id="legend"></div>
-	    </div>
+
+  <div id="cluster-pane" class="ui-layout-north">
+  	<div class="center bootstrap-styles" id="controls">
+  		<div id="general-controls" class="btn-group btn-group-xs"></div>
+  		<div id="color-switcher" class="btn-group btn-group-xs"></div>
+  	</div>
+    <div class="load-status"></div>
+  </div>
+
+	<div id="dendrogram-pane" class="ui-layout-west">
+    <div id="dendrogram-sparkline-backdrop"></div>
+    <div class="load-status"></div>
+    <svg id="dendrogram-viewer" width="100%" height="100%">
+      <defs>
+        <linearGradient id="subtree-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stop-color="#7767b0" stop-opacity="1" />
+          <stop offset="100%" stop-color="#ffffff" stop-opacity="1" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+
+  <div id="waveform-pane" class="ui-layout-center">
+    <div class="load-status"></div>
+    <svg id="waveform-viewer" width="100%" height="100%" style="position: absolute;">
+    </svg>
+    <div id="waveform-progress">
+      <input class="waveformPie" value="1" />
+    </div>
+    <div id="waveform-selection-progress">
+      <input class="waveformPie" value="1" />
+    </div>
+    <div id="waveform-selector-progress-wrapper">
+    	<div id="waveform-selector-progress">
+      	<input class="waveformPie" value="1" />
+        Please wait while we prepare the ability to select waveforms...
+      </div>
 	  </div>
-	</div>
-	<div id="table-pane" class="ui-layout-south" style="overflow: auto">
+  </div>
+
+  <div id="legend-pane" class="ui-layout-east">
+    <div class="load-status"></div>
+    <div id="legend"></div>
+  </div>
+
+  <div id="table-pane" class="ui-layout-south" style="overflow: auto">
 	  <div class="load-status"></div>
 	  <div id="table">
 	  </div>
 	</div>
+
 </div>