Update styling: Display traits in a tabular-like form

Issue:
https://github.com/genenetwork/gn-gemtext-threads/blob/main/topics/gn1-migration-to-gn2/partial-correlations.gmi

* Display the trait details in a tabular-life form without using a table.

1 files changed, 75 insertions, 19 deletions

diff --git a/wqflask/wqflask/static/new/css/partial_correlations.css b/wqflask/wqflask/static/new/css/partial_correlations.css
index a4f45ace..8ff5eae7 100644
--- a/wqflask/wqflask/static/new/css/partial_correlations.css
+++ b/wqflask/wqflask/static/new/css/partial_correlations.css
@@ -20,39 +20,95 @@
     grid-column-end: 3;
 }
 
-.label-element-combo {
-    width: 100%;
-    display: grid;
+td, th {
+    border: 1px solid;
+    text-align: left;
+    padding: 0.2em 0.5em 0.2em 0.7em;
+}
+
+tr:nth-of-type(2n) {
+    background: #F9F9F9;
+}
+
+thead tr {
+    background: #336699;
+    line-height: 1.5em;
 }
 
 .with-trait {
     margin-left: 0.7em;
+    position: relative;
+    display: grid;
+    width: 100%;
+    grid-column-gap: 1em;
+    grid-template-columns: 1em 1fr;
     text-align: left;
 }
 
-.with-trait .label-element {
-    width: 90%;
-    grid-column-start: 2;
-    grid-column-end: 3
+.with-trait:nth-of-type(2n) {
+    background: #E5E5FF;
 }
 
 .with-trait .selector-element {
-    width: 1em;
-    grid-column-start: 1;
-    grid-column-end: 2
+    grid-column: 1 / 2;
+    grid-row: 1 / 1;
 }
 
-td, th {
-    border: 1px solid;
-    text-align: left;
-    padding: 0.2em 0.5em 0.2em 0.7em;
+.with-trait:first-of-type {
+    padding-top: 2.5em;
 }
 
-tr:nth-of-type(2n) {
-    background: #F9F9F9;
+.with-trait:first-of-type label *:before{
+    position: absolute;
+    top: 0px;
+    
+    text-transform: capitalize;
+    font-weight: bolder;
+    content: attr(data-title);
+    background: #336699; /*#FFCCCC;*/
+    color: #FFFFFF;
+    padding: 0.5em;
 }
 
-thead tr {
-    background: #336699;
-    line-height: 1.5em;
+.with-trait .label-element {
+    display: grid;
+    grid-column-gap: 0.5em;
+    grid-template-columns: 4fr 2fr 2fr 9fr 2fr 1fr 2fr;
+    grid-column: 2 / 2;
+    grid-row: 1 / 1;
+}
+
+.with-trait .label-element .trait-dataset {
+    grid-column: 1;
+    grid-row: 1 / 1;
+}
+
+.with-trait .label-element .trait-name {
+    grid-column: 2;
+    grid-row: 1 / 1;
+}
+
+.with-trait .label-element .trait-symbol {
+    grid-column: 3;
+    grid-row: 1 / 1;
+}
+
+.with-trait .label-element .trait-description {
+    grid-column: 4;
+    grid-row: 1 / 1;
+}
+
+.with-trait .label-element .trait-location {
+    grid-column: 5;
+    grid-row: 1 / 1;
+}
+
+.with-trait .label-element .trait-mean-expr {
+    grid-column: 6;
+    grid-row: 1 / 1;
+}
+
+.with-trait .label-element .trait-max-lrs {
+    grid-column: 7;
+    grid-row: 1 / 1;
 }