Finished the formating of the table for blocks.

This closes #13.
Uauy-Lab · May 27, 2020 · 84f395d · 84f395d
1 parent ec01848
commit 84f395d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 25 deletions.
diff --git a/app/assets/stylesheets/haplotype_plot.scss b/app/assets/stylesheets/haplotype_plot.scss
@@ -43,7 +43,6 @@
 
 div.navigation{    
     width: 100%;
-    // height: 13%;
 }
 
 div.navigation a{    
@@ -67,8 +66,7 @@ div.navigation a:hover{
 
 .haplotype-wrapper {
   display: flex;  
-  flex-flow: row wrap;
-  font-weight: bold;
+  flex-flow: column wrap;
   text-align: center;
 }
 
@@ -77,23 +75,23 @@ div.navigation a:hover{
   flex: 1 100%;
 }
 .haplotype-control{
-  background-color: blue;
   width: 100%;
 }
 
 .haplotype-plot{
-  background-color: red;
-  width: 50%;
+  flex: 1;
+  width: 95%;
 }
 
 .haplotype-table{
-  background-color: green;
-  width: 50%;
-
+  /*background-color: green;*/
+  flex: 1;
+  width: 100%;
   table{
-    width:100%;
+    width:95%;
     table-layout: fixed;
     color: #000;
+    max-height: 75%;
   }
 
 }
@@ -105,19 +103,25 @@ div.navigation a:hover{
 }
 .tbl-header{
   background-color: rgba(0,0,0,0.6);
+  th{
+    text-align: right;
+    font-weight: 500;
+    font-size: 12px;
+    color: #FFF;
+  }
 
  }
 .row-selected{
   background-color: #000000;
   color: #f5f5f5;
 }
 .tbl-content{
-  height:calc(100%/4);
+  height:500px;
   overflow-x: scroll;
   margin-top: 0px;
   border: 1px solid rgba(0,0,0,0.3);
   td{
-    text-align: left;
+    text-align: right;
     vertical-align:middle;
     font-weight: 300;
     font-size: 12px;
@@ -137,9 +141,4 @@ div.navigation a:hover{
 
 
 
-th{
-  text-align: left;
-  font-weight: 500;
-  font-size: 12px;
-  color: #FFF;
-}
+
diff --git a/app/javascript/packs/haplotype_set.js b/app/javascript/packs/haplotype_set.js
@@ -63,10 +63,10 @@ class  HaplotypePlot{
 	get width(){
   		//return this.opt.width;
 
-  		var element = this.main_div.node();
+  		var element = this.svg_div.node();
 
-  		//console.log(element);
-  		//console.log(element.getBoundingClientRect());
+  		console.log(element);
+  		console.log(element.getBoundingClientRect());
   		return element.getBoundingClientRect().width;
   	}
 

diff --git a/app/javascript/packs/haplotype_table.js b/app/javascript/packs/haplotype_table.js
@@ -16,15 +16,14 @@ class HaplotypeTable{
 
 	renderTable(div){
 		this.div = div;
-		this.table_head = this.div.append("table");
-		//this.table_head.classed("tbl-header", true);
+
+		this.table_head = this.div.append("div").classed("tbl-header", true).append("table");
 		this.head = this.table_head.append('thead').append('tr')
    		.selectAll('th')
    		.data(this.columns).enter()
    		.append('th')
    		.text(d => d.header);
-   		this.table_body = this.div.append("table")
-   		//this.table_body.classed("tbl-content", true);
+   		this.table_body = this.div.append("div").classed("tbl-content", true).append("table")
    		this.body = this.table_body.append("tbody");
 
 	}