aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFrederick Muriuki Muriithi2022-01-03 11:05:11 +0300
committerzsloan2022-01-29 00:42:44 -0600
commitcd2e1760751bbffb729c0d8df85e65f1641f93fa (patch)
treeb6d67c405906103a04b6601918e24467d49c6ebc
parentddd8e18cb236d6131e9f12a56d4f869649466a09 (diff)
downloadgenenetwork2-cd2e1760751bbffb729c0d8df85e65f1641f93fa.tar.gz
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.
-rw-r--r--wqflask/wqflask/static/new/css/partial_correlations.css94
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;
}