diff options
| author | Frederick Muriuki Muriithi | 2021-12-20 11:50:36 +0300 |
|---|---|---|
| committer | zsloan | 2022-01-29 00:42:44 -0600 |
| commit | 81355831321642f09f2dc606f0670e6b7ded79c9 (patch) | |
| tree | 955b1bae19ffffe2875a7b3195dd5f6c6ca48440 | |
| parent | 53985f5ac92d31f38748d101c9bb1574b11e5f73 (diff) | |
| download | genenetwork2-81355831321642f09f2dc606f0670e6b7ded79c9.tar.gz | |
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
| -rw-r--r-- | wqflask/wqflask/static/new/css/partial_correlations.css | 30 | ||||
| -rw-r--r-- | wqflask/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> |