fixes for some scaling and margins on the engine ui

ICRAR · May 21, 2021 · dd0370d · dd0370d
1 parent b41544f
commit dd0370d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/daliuge-engine/dlg/manager/web/session.html b/daliuge-engine/dlg/manager/web/session.html
@@ -54,8 +54,8 @@
 			<li>Session: {{sessionId}}</li>
 		</ol>
 	</div>
-	<div class="container" style="margin-top:80px;">
-		<div style="overflow: auto; max-height: 600px;">
+	<div id="listContainer" class="container">
+		<div>
 		<table id="pg-list" class="table table-striped table-condensed" >
 			<thead>
 				<tr>
@@ -85,7 +85,8 @@
 	d3.select('#pg-list').remove();
 	d3.select('#pg-graph').remove();
 
-	const width = 1000;
+	const width = $('#pg-progress-bar').innerWidth();
+	console.log(width)
 	var graph_update_handler = function(oids, dropSpecs) {};
 
 	var status_update_handler = function(statuses)
@@ -140,8 +141,11 @@
 	d3.select('#pg-list').remove()
 	d3.select('#pg-progress-bar').remove();
 
+	const heightValue = 300;
+const widthValue = 600;
 	// Set up zoom support
 	var svg = d3.select("svg");
+
 	var inner = svg.select("g");
 	var zoom = d3.behavior.zoom().on(
 			"zoom",

diff --git a/daliuge-engine/dlg/manager/web/static/css/session.css b/daliuge-engine/dlg/manager/web/static/css/session.css
@@ -235,4 +235,34 @@ svg {
 
 #graphName{
   padding:0;
+}
+
+#listContainer{
+  position: absolute;
+  top:80px; 
+  bottom:0px; 
+  right:0px; 
+  left:0px;
+}
+
+#listContainer div{
+  overflow: auto; 
+  height: 100%;
+}
+
+#pg-graph{
+  position: absolute;
+  top:80px; 
+  bottom:0px; 
+  right:0px; 
+  left:0px;
+}
+
+#pg-progress-bar{
+  position: absolute;
+  top:80px; 
+  bottom:0px; 
+  right:0px; 
+  left:0px;
+  padding-right:20px;
 }