From 2b782327281dc9ca586d1303a44418f8d42f76dd Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 13 Oct 2020 16:32:11 -0500
Subject: Changed styling in show_trait.html to use CSS instead

* wqflask/wqflask/static/new/css/main.css - Added CSS for min-height in table cells with checkboxes, since this would apply to all tables throughout the site
* wqflask/wqflask/static/new/css/show_trait.css - Added CSS for styling that was previous in show_trait.html
* wqflask/wqflask/templates/show_trait.html - Replaced directly styling with classes
---
 wqflask/wqflask/static/new/css/main.css       |  4 ++
 wqflask/wqflask/static/new/css/show_trait.css | 32 ++++++++++++-
 wqflask/wqflask/templates/show_trait.html     | 69 ++++++++++-----------------
 3 files changed, 61 insertions(+), 44 deletions(-)

(limited to 'wqflask')

diff --git a/wqflask/wqflask/static/new/css/main.css b/wqflask/wqflask/static/new/css/main.css
index 097cd997..d5fb8a61 100644
--- a/wqflask/wqflask/static/new/css/main.css
+++ b/wqflask/wqflask/static/new/css/main.css
@@ -33,4 +33,8 @@
     .collapsing {
         overflow: hidden!important;
     }
+}
+
+.checkbox {
+    min-height: 20px;
 }
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/css/show_trait.css b/wqflask/wqflask/static/new/css/show_trait.css
index 92deab20..a9e85ee7 100644
--- a/wqflask/wqflask/static/new/css/show_trait.css
+++ b/wqflask/wqflask/static/new/css/show_trait.css
@@ -35,8 +35,13 @@ table.dataTable thead th, table.dataTable tfoot {
   padding: 4px 18px 4px 10px;
 }
 
+/* Header for a column with a numeric value that should be right-aligned */
+table.dataTable thead th div.numeric_header {
+  text-align: right;
+}
+
 table.dataTable tbody td {
-  padding: 4px 15px 2px 10px;
+  padding: 2px 15px 0px 10px;
 }
 
 table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
@@ -51,4 +56,29 @@ table.dataTable.cell-border tbody tr td:first-child {
 .glyphicon {
   position: relative;
   top: 2px;
+}
+
+.trait_page_main_div {
+  min-width: 700px;
+}
+
+table.dataTable tbody td.column_name-Checkbox {
+  padding: 3px 0px 0px 9px;
+  text-align: center;
+}
+
+table.dataTable tbody td.column_name-Index {
+  padding: 2px 4px 0px 2px;
+  text-align: right;
+}
+
+/* the column with +/- in it that appears in the table when there's an SE column */
+table.dataTable tbody td.column_name-PlusMinus {
+  padding-left: 2px;
+  padding-right: 2px;
+  text-align: center;
+}
+
+table.dataTable tbody td.column_name-Value, table.dataTable tbody td.column_name-SE, table.dataTable tbody td.column_name-num_cases {
+  text-align: right;
 }
\ No newline at end of file
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index ea881917..3d34b331 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -37,7 +37,7 @@
         <input type="hidden" name="covariates" value="">
         <input type="hidden" name="transform" value="">
 
-        <div class="container" style="min-width: 700px;">
+        <div class="container trait_page_main_div">
             <div class="panel-group" id="accordion">
                 <div class="panel panel-default">
                     <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" aria-expanded="true">
@@ -237,30 +237,22 @@
                     if (data.outlier) {
                       $(row).addClass("outlier");
                     }
-                    $('td', row).eq(0).attr("align", "center");
-                    $('td', row).eq(0).attr("style", "padding: 2px 0px 0px 2px;");
+                    $('td', row).eq(0).addClass("column_name-Checkbox")
                     $('td', row).eq(1).addClass("column_name-Index")
-                    $('td', row).eq(1).attr("align", "right");
-                    $('td', row).eq(1).attr("style", "padding: 2px 4px 0px 2px;");
                     $('td', row).eq(2).addClass("column_name-Sample")
                     $('td', row).eq(3).addClass("column_name-Value")
-                    $('td', row).eq(3).attr("style", "text-align: right; padding-top: 2px; padding-bottom: 0px;");
                     {% if sample_groups[0].se_exists() %}
-                    $('td', row).eq(4).attr("align", "center");
-                    $('td', row).eq(4).attr("style", "padding-left: 2px; padding-right: 2px;");
-                    $('td', row).eq(5).addClass("column_name-SE")
-                    $('td', row).eq(5).attr("style", "text-align: right; padding-top: 2px; padding-bottom: 0px;");
+                    $('td', row).eq(4).addClass("column_name-PlusMinus")
+                    $('td', row).eq(5).addClass("column_name-SE value_column")
                     {% if has_num_cases %}
                     $('td', row).eq(6).addClass("column_name-num_cases")
-                    $('td', row).eq(6).attr("style", "text-align: right; padding-top: 2px; padding-bottom: 0px;");
                     {% endif %} {% else %} {% if has_num_cases %}
                     $('td', row).eq(4).addClass("column_name-num_cases")
-                    $('td', row).eq(4).attr("style", "text-align: right; padding-top: 2px; padding-bottom: 0px;");
                     {% endif %} {% endif %}
                     {% if sample_groups[0].attributes|length > 0 %}
                     {% for attribute in sample_groups[0].attributes|sort() %}
                     $('td', row).eq(attribute_start_pos + {{ loop.index }}).addClass("column_name-{{ sample_groups[0].attributes[attribute].name }}")
-                    $('td', row).eq(attribute_start_pos + {{ loop.index }}).attr("style", "text-align: {{ sample_groups[0].attributes[attribute].alignment }}; padding-top: 2px; padding-bottom: 0px;")
+                    $('td', row).eq(attribute_start_pos + {{ loop.index }}).attr("style", "text-align: {{ sample_groups[0].attributes[attribute].alignment }};")
                     {% endfor %}
                     {% endif %}
                   },
@@ -271,7 +263,7 @@
                       'orderDataType': "dom-checkbox",
                       'searchable' : false,
                       'render': function(data, type, row, meta) {
-                        return '<input type="checkbox" name="searchResult" style="min-height: 20px;" class="checkbox edit_sample_checkbox" value="">'
+                        return '<input type="checkbox" name="searchResult" class="checkbox edit_sample_checkbox" value="">'
                       }
                     },
                     {
@@ -289,15 +281,15 @@
                       }
                     },
                     {
-                      'title': "<div style='text-align: right;'>Value</div>",
+                      'title': "<div class='numeric_header'>Value</div>",
                       'orderDataType': "dom-input",
                       'type': "cust-txt",
                       'data': null,
                       'render': function(data, type, row, meta) {
                         if (data.value == null) {
-                          return '<input type="text" data-value="x" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_value" value="x" size=6 maxlength=6>'
+                          return '<input type="text" data-value="x" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" class="trait_value_input edit_sample_value" value="x" size=6 maxlength=6>'
                         } else {
-                          return '<input type="text" data-value="' + data.value.toFixed(3) + '" data-qnorm="' + js_data['qnorm_values'][0][parseInt(data.this_id) - 1] + '" data-zscore="' + js_data['zscore_values'][0][parseInt(data.this_id) - 1] + '" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_value" value="' + data.value.toFixed(3) + '" size=6 maxlength=6>'
+                          return '<input type="text" data-value="' + data.value.toFixed(3) + '" data-qnorm="' + js_data['qnorm_values'][0][parseInt(data.this_id) - 1] + '" data-zscore="' + js_data['zscore_values'][0][parseInt(data.this_id) - 1] + '" name="value:' + data.name + '" class="trait_value_input edit_sample_value" value="' + data.value.toFixed(3) + '" size=6 maxlength=6>'
                         }
                       }
                     }{% if sample_groups[0].se_exists() %},
@@ -311,28 +303,28 @@
                       }
                     },
                     {
-                      'title': "<div style='text-align: right;'>SE</div>",
+                      'title': "<div class='numeric_header'>SE</div>",
                       'orderDataType': "dom-input",
                       'type': "cust-txt",
                       'data': null,
                       'render': function(data, type, row, meta) {
                         if (data.variance == null) {
-                          return '<input type="text" data-value="x" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_se" value="x" size=6 maxlength=6>'
+                          return '<input type="text" data-value="x" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" class="trait_value_input edit_sample_se" value="x" size=6 maxlength=6>'
                         } else {
-                          return '<input type="text" data-value="' + data.variance.toFixed(3) + '" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_se" value="' + data.variance.toFixed(3) + '" size=6 maxlength=6>'
+                          return '<input type="text" data-value="' + data.variance.toFixed(3) + '" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" class="trait_value_input edit_sample_se" value="' + data.variance.toFixed(3) + '" size=6 maxlength=6>'
                         }
                       }
                     }{% endif %}{% if has_num_cases %},
                     {
-                      'title': "<div style='text-align: right;'>N</div>",
+                      'title': "<div class='numeric_header'>N</div>",
                       'orderDataType': "dom-input",
                       'type': "cust-txt",
                       'data': null,
                       'render': function(data, type, row, meta) {
                         if (data.num_cases == null || data.num_cases == undefined) {
-                          return '<input type="text" data-value="x" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_num_cases" value="x" size=4 maxlength=4>'
+                          return '<input type="text" data-value="x" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" class="trait_value_input edit_sample_num_cases" value="x" size=4 maxlength=4>'
                         } else {
-                          return '<input type="text" data-value="' + data.num_cases + '" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_num_cases" value="' + data.num_cases + '" size=4 maxlength=4>'
+                          return '<input type="text" data-value="' + data.num_cases + '" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" class="trait_value_input edit_sample_num_cases" value="' + data.num_cases + '" size=4 maxlength=4>'
                         }
                       }
                     }{% endif %}{% if sample_groups[0].attributes|length > 0 %}{% for attribute in sample_groups[0].attributes|sort() %},
@@ -387,25 +379,16 @@
                     if (data.outlier) {
                       $(row).addClass("outlier");
                     }
-                    $('td', row).eq(0).attr("align", "center");
-                    $('td', row).eq(0).attr("style", "padding: 2px 0px 0px 2px;");
                     $('td', row).eq(1).addClass("column_name-Index")
-                    $('td', row).eq(1).attr("align", "right");
-                    $('td', row).eq(1).attr("style", "padding: 2px 4px 0px 2px;");
                     $('td', row).eq(2).addClass("column_name-Sample")
                     $('td', row).eq(3).addClass("column_name-Value")
-                    $('td', row).eq(3).attr("style", "text-align: right; padding-top: 2px; padding-bottom: 0px;");
                     {% if sample_groups[1].se_exists() %}
-                    $('td', row).eq(4).attr("align", "center");
-                    $('td', row).eq(4).attr("style", "padding-left: 2px; padding-right: 2px;");
+                    $('td', row).eq(4).addClass("column_name-PlusMinus")
                     $('td', row).eq(5).addClass("column_name-SE")
-                    $('td', row).eq(5).attr("style", "text-align: right; padding-top: 2px; padding-bottom: 0px;");
                     {% if has_num_cases %}
                     $('td', row).eq(6).addClass("column_name-num_cases")
-                    $('td', row).eq(6).attr("style", "text-align: right; padding-top: 2px; padding-bottom: 0px;");
                     {% endif %} {% else %} {% if has_num_cases %}
                     $('td', row).eq(4).addClass("column_name-num_cases")
-                    $('td', row).eq(4).attr("style", "text-align: right; padding-top: 2px; padding-bottom: 0px;");
                     {% endif %} {% endif %}
                     {% if sample_groups[1].attributes|length > 0 %}
                     {% for attribute in sample_groups[1].attributes|sort() %}
@@ -421,7 +404,7 @@
                       'orderDataType': "dom-checkbox",
                       'searchable' : false,
                       'render': function(data, type, row, meta) {
-                        return '<input type="checkbox" name="searchResult" style="min-height: 20px;" class="checkbox edit_sample_checkbox" value="">'
+                        return '<input type="checkbox" name="searchResult" class="checkbox edit_sample_checkbox" value="">'
                       }
                     },
                     {
@@ -439,15 +422,15 @@
                       }
                     },
                     {
-                      'title': "<div style='text-align: right;'>Value</div>",
+                      'title': "<div class='numeric_header'>Value</div>",
                       'orderDataType': "dom-input",
                       'type': "cust-txt",
                       'data': null,
                       'render': function(data, type, row, meta) {
                         if (data.value == null) {
-                          return '<input type="text" data-value="x" data-qnorm="x" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_value" value="x" size=6 maxlength=6>'
+                          return '<input type="text" data-value="x" data-qnorm="x" name="value:' + data.name + '" class="trait_value_input edit_sample_value" value="x" size=6 maxlength=6>'
                         } else {
-                          return '<input type="text" data-value="' + data.value.toFixed(3) + '" data-qnorm="' + js_data['qnorm_values'][1][parseInt(data.this_id)] + '" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_value" value="' + data.value.toFixed(3) + '" size=6 maxlength=6>'
+                          return '<input type="text" data-value="' + data.value.toFixed(3) + '" data-qnorm="' + js_data['qnorm_values'][1][parseInt(data.this_id)] + '" name="value:' + data.name + '" class="trait_value_input edit_sample_value" value="' + data.value.toFixed(3) + '" size=6 maxlength=6>'
                         }
                       }
                     }{% if sample_groups[1].se_exists() %},
@@ -461,28 +444,28 @@
                       }
                     },
                     {
-                      'title': "<div style='text-align: right;'>SE</div>",
+                      'title': "<div class='numeric_header'>SE</div>",
                       'orderDataType': "dom-input",
                       'type': "cust-txt",
                       'data': null,
                       'render': function(data, type, row, meta) {
                         if (data.variance == null) {
-                          return '<input type="text" data-value="x" data-qnorm="x" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_se" value="x" size=6 maxlength=6>'
+                          return '<input type="text" data-value="x" data-qnorm="x" name="value:' + data.name + '" class="trait_value_input edit_sample_se" value="x" size=6 maxlength=6>'
                         } else {
-                          return '<input type="text" data-value="' + data.variance.toFixed(3) + '" data-qnorm="x" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_se" value="' + data.variance.toFixed(3) + '" size=6 maxlength=6>'
+                          return '<input type="text" data-value="' + data.variance.toFixed(3) + '" data-qnorm="x" name="value:' + data.name + '" class="trait_value_input edit_sample_se" value="' + data.variance.toFixed(3) + '" size=6 maxlength=6>'
                         }
                       }
                     }{% endif %}{% if has_num_cases %},
                     {
-                      'title': "<div style='text-align: right;'>N</div>",
+                      'title': "<div class='numeric_header'>N</div>",
                       'orderDataType': "dom-input",
                       'type': "cust-txt",
                       'data': null,
                       'render': function(data, type, row, meta) {
                         if (data.num_cases == null) {
-                          return '<input type="text" data-value="x" data-qnorm="x" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_num_cases" value="x" size=4 maxlength=4>'
+                          return '<input type="text" data-value="x" data-qnorm="x" name="value:' + data.name + '" class="trait_value_input edit_sample_num_cases" value="x" size=4 maxlength=4>'
                         } else {
-                          return '<input type="text" data-value="' + data.num_cases + '" data-qnorm="x" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_num_cases" value="' + data.num_cases + '" size=4 maxlength=4>'
+                          return '<input type="text" data-value="' + data.num_cases + '" data-qnorm="x" name="value:' + data.name + '" class="trait_value_input edit_sample_num_cases" value="' + data.num_cases + '" size=4 maxlength=4>'
                         }
                       }
                     }{% endif %}{% if sample_groups[1].attributes|length > 0 %}{% for attribute in sample_groups[1].attributes|sort() %},
-- 
cgit v1.2.3