From cf22ab18bb1c064ac65b0bf20753b2ad45b76fd4 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Mon, 20 Dec 2021 11:50:36 +0300
Subject: Improve UI elements

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

* Force results area to use up the entire width of the page
* Set background colour and line-height of header row
* Add some padding to the cells
* Reorganise layout
* Set up appropriate classes for .with-trait items
---
 .../static/new/css/partial_correlations.css        | 30 +++++++++++++++++-----
 .../wqflask/templates/partial_correlations.html    | 12 +++++----
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/wqflask/wqflask/static/new/css/partial_correlations.css b/wqflask/wqflask/static/new/css/partial_correlations.css
index 41dd04df..a4f45ace 100644
--- a/wqflask/wqflask/static/new/css/partial_correlations.css
+++ b/wqflask/wqflask/static/new/css/partial_correlations.css
@@ -15,26 +15,44 @@
     grid-column-end: 3;
 }
 
+#part-corr-success {
+    grid-column-start: 1;
+    grid-column-end: 3;
+}
+
 .label-element-combo {
     width: 100%;
     display: grid;
 }
 
-.with-trait > label {
-    width: 80%;
-    grid-column-start: 2;
+.with-trait {
+    margin-left: 0.7em;
+    text-align: left;
 }
 
-.with-trait > input {
-    width: 20%;
+.with-trait .label-element {
+    width: 90%;
     grid-column-start: 2;
+    grid-column-end: 3
+}
+
+.with-trait .selector-element {
+    width: 1em;
+    grid-column-start: 1;
+    grid-column-end: 2
 }
 
 td, th {
     border: 1px solid;
     text-align: left;
+    padding: 0.2em 0.5em 0.2em 0.7em;
 }
 
 tr:nth-of-type(2n) {
-    background: #DDDDDD;
+    background: #F9F9F9;
+}
+
+thead tr {
+    background: #336699;
+    line-height: 1.5em;
 }
diff --git a/wqflask/wqflask/templates/partial_correlations.html b/wqflask/wqflask/templates/partial_correlations.html
index 215ba32e..800222ba 100644
--- a/wqflask/wqflask/templates/partial_correlations.html
+++ b/wqflask/wqflask/templates/partial_correlations.html
@@ -29,8 +29,9 @@
       <input type="radio"
 	     name="primary_trait"
 	     value="{{trait['name']}}:::{{trait['dataset']}}:::{{trait['symbol']}}:::{{trait['description']}}:::{{trait['data_hmac']}}"
-	     id="trait_{{trait['data_hmac']}}" />
-      <label for="trait_{{trait['data_hmac']}}">
+	     id="trait_{{trait['data_hmac']}}"
+	     class="selector-element" />
+      <label for="trait_{{trait['data_hmac']}}" class="label-element">
 	{{trait["name"]}} - {{trait["symbol"]}} - {{trait["description"]}}
       </label>
     </div>
@@ -46,12 +47,13 @@
 
     <p>Select a maximum of three (3) control traits (Z)</p>
     {%for trait in traits_list:%}
-    <div class="label-element-combo">
+    <div class="label-element-combo with-trait">
       <input type="checkbox"
 	     name="control_traits[]"
 	     value="{{trait['name']}}:::{{trait['dataset']}}:::{{trait['symbol']}}:::{{trait['description']}}:::{{trait['data_hmac']}}"
-	     id="trait_{{trait['data_hmac']}}" />
-      <label for="trait_{{trait['data_hmac']}}">
+	     id="trait_{{trait['data_hmac']}}"
+	     class="selector-element" />
+      <label for="trait_{{trait['data_hmac']}}" class="label-element">
 	{{trait["name"]}} - {{trait["symbol"]}} - {{trait["description"]}}
       </label>
     </div>
-- 
cgit v1.2.3