Converted show_trait_calculate_correlations.html to use CSS instead of styling in the template

* wqflask/wqflask/static/new/css/show_trait.css - Added styling for elements in show_trait_calculate_correlations.html and changed a few existing class names to be more reasonable
* wqflask/wqflask/templates/show_trait.html - Changed the class name for the main div
* wqflask/wqflask/templates/show_trait_calculate_correlations.html - Substituted direct styling with CSS and changing some styling to make the correlation method descriptions keep a reasonable width and position
* wqflask/wqflask/templates/show_trait_statistics.html - Changed some class names to be better

4 files changed, 202 insertions, 162 deletions

diff --git a/wqflask/wqflask/static/new/css/show_trait.css b/wqflask/wqflask/static/new/css/show_trait.css
index 68aa34e2..f20b840e 100644
--- a/wqflask/wqflask/static/new/css/show_trait.css
+++ b/wqflask/wqflask/static/new/css/show_trait.css
@@ -1,17 +1,17 @@
 tr .outlier {
-    background-color: #ffff99;
+  background-color: #ffff99;
 }
 
 table.dataTable tbody tr.selected {
-    background-color: #ffee99;
+  background-color: #ffee99;
 }
 
 #bar_chart_container {
-    overflow-x:scroll;
+  overflow-x:scroll;
 }
 
 div.sample_group {
-    overflow: auto; # needed because it contains float dataTable wrapper
+  overflow: auto; # needed because it contains float dataTable wrapper
 }
 
 .js-plotly-plot .plotly .modebar {
@@ -58,7 +58,7 @@ table.dataTable.cell-border tbody tr td:first-child {
   top: 2px;
 }
 
-.trait_page_main_div {
+.showtrait-main-div {
   min-width: 700px;
 }
 
@@ -83,11 +83,12 @@ table.dataTable tbody td.column_name-Value, table.dataTable tbody td.column_name
   text-align: right;
 }
 
-div.btn_toolbar {
+div.btn-toolbar {
   margin-bottom:15px;
 }
 
-div.stats_form_div {
+/* div containing the form options for each segment of the trait page - correlations, statistics, mapping, etc */
+div.section-form-div {
   padding: 20px;
 }
 
@@ -95,6 +96,46 @@ table.left-float {
   float: left;
 }
 
-div.scatterplot_btn_div {
+div.scatterplot-btn-div {
   margin-bottom:40px;
+}
+
+div.correlation-main {
+  min-width: 1200px;
+}
+
+div.correlation-options {
+  min-width: 700px;
+}
+
+.min-expr-field {
+  width: 70px;
+}
+
+span.p-range-container {
+  display: inline;
+}
+
+div.p-range-slider {
+  width: 200px;
+  margin-left: 15px;
+}
+
+span.p-range-lower {
+  margin-top: 5px;
+  font: 400 12px Arial;
+  color: #888; 
+  display: inline-block;
+}
+
+span.p-range-upper {
+  font: 400 12px Arial;
+  color: #888;
+  display: inline-block;
+  margin: 5px 0px 0px 170px;
+}
+
+.corr-location {
+  width: 50px;
+  display: inline;
 }
\ No newline at end of file
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index 3d34b331..599cef42 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 trait_page_main_div">
+        <div class="container showtrait-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">
diff --git a/wqflask/wqflask/templates/show_trait_calculate_correlations.html b/wqflask/wqflask/templates/show_trait_calculate_correlations.html
index 9420c9c6..00fdfc21 100644
--- a/wqflask/wqflask/templates/show_trait_calculate_correlations.html
+++ b/wqflask/wqflask/templates/show_trait_calculate_correlations.html
@@ -1,149 +1,148 @@
-<div>
-  <div class="col-xs-6" style="min-width: 800px;">
-    <div style="padding: 20px" class="form-horizontal">
-        
-        <div class="form-group">
-            <label for="corr_type" class="col-xs-2 control-label">Method</label>
-            <div class="col-xs-3 controls">
-                <select name="corr_type" class="form-control">
-                    <option value="sample">Sample r</option>
-                    <option value="lit">Literature r</option>
-                    <option value="tissue">Tissue r</option>
-                </select>
-            </div>
-        </div>
-        
-        <div class="form-group">
-            <label for="corr_dataset" class="col-xs-2 control-label">Database</label>
-            <div class="col-xs-10 controls">
-                <select name="corr_dataset" class="form-control">
-                    {% for tissue in corr_tools.dataset_menu %}
-                        {% if tissue.tissue %}
-                            <optgroup label="{{ tissue.tissue }} ------">
-                        {% endif %}
-                        {% for dataset in tissue.datasets %}
-                            <option value="{{ dataset[1] }}" 
-                            {% if corr_tools.dataset_menu_selected == dataset[1] %}     
-                                selected           
-                            {% endif %}>          
-                              {{ dataset[0] }}
-                            </option>
-                        {% endfor %}
-                        {% if tissue.tissue %}
-                            </optgroup>
-                        {% endif %}
-                    {% endfor %}
-                </select>
-            </div>
-        </div>
-        
-        <div class="form-group">
-            <label for="corr_return_results" class="col-xs-2 control-label">Return</label>
-            <div class="col-xs-4 controls">
-                <select name="corr_return_results" class="form-control">
-                    {% for return_result in corr_tools.return_results_menu %}
-                        <option value="{{ return_result }}" 
-                        {% if corr_tools.return_results_menu_selected == return_result %}
-                            selected
-                        {% endif %}>
-                        Top {{ return_result }}
-                        </option>
-                    {% endfor %}
-                </select>
-            </div>
-        </div>
-        
-        <div class="form-group">
-            <label for="corr_samples_group" class="col-xs-2 control-label">Samples</label>
-            <div class="col-xs-4 controls">
-                <select name="corr_samples_group" class="form-control">
-                    {% for group, pretty_group in sample_group_types.items() %}
-                        <option value="{{ group }}">{{ pretty_group }}</option>
-                    {% endfor %}
-                </select>
-            </div>
-        </div>
-            
-        <div id="corr_sample_method" class="form-group">
-            <label for="corr_sample_method" class="col-xs-2 control-label">Type</label>
-            <div class="col-xs-4 controls">
-                <select name="corr_sample_method" class="form-control">
-                    <option value="pearson">Pearson</option>
-                    <option value="spearman">Spearman Rank</option>
-                    <option value="bicor">Biweight Midcorrelation</option>
-                </select>
-            </div>
-        </div>
-        {% if dataset.type != "Publish" %}
-        <div class="form-group">
-            <label class="col-xs-2 control-label">Min Expr</label>
-            <div class="col-xs-4 controls">
-                <input name="min_expr" value="" type="text" class="form-control" style="width: 70px;">
-            </div>
-        </div>
-        <div class="form-group">
-            <label class="col-xs-2 control-label">Location</label>
-            <div class="col-xs-5 controls">
-                <span>
-                Chr: <input name="loc_chr" value="" type="text" class="form-control" style="width: 50px; display: inline;">&nbsp;&nbsp;&nbsp;
-                Mb: <input name="min_loc_mb" value="" type="text" class="form-control" style="width: 50px; display: inline;"> &nbsp;to&nbsp; <input name="max_loc_mb" value="" type="text" class="form-control" style="width: 50px; display: inline;">
-                </span>
-                <br>
-            </div>
-        </div>
-        {% endif %}
-        <div class="form-group">
-            <label class="col-xs-2 control-label">Range</label>
-            <div class="col-xs-5 controls">
-                <input name="p_range_lower" value="" type="hidden">
-                <input name="p_range_upper" value="" type="hidden">
-                <span style="display: inline;">
-                <div id="p_range_slider" style="width: 200px;"></div>
-                <span style="font: 400 12px Arial; color: #888; display: inline; margin: 25px 0; width: 20px;" id="p_range_lower"></span>
-                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-                <span style="font: 400 12px Arial; color: #888; display: inline; margin: 15px 0; width: 20px;" id="p_range_upper"></span>
-                </span>
-            </div>
-        </div>
-        
-        <div class="form-group">
-            <label for="corr_sample_method" class="col-xs-2 control-label"></label>
-            <div class="col-xs-3 controls">
-                <input type="button" class="btn corr_compute submit_special btn-success" data-url="/corr_compute" title="Compute Correlation" value="Compute">
-            </div>
-        </div>
+<div class="row correlation-main">
+    <div class="col-xs-3 correlation-options">
+      <div class="form-horizontal section-form-div">
+
+          <div class="form-group">
+              <label for="corr_type" class="col-xs-2 control-label">Method</label>
+              <div class="col-xs-3 controls">
+                  <select name="corr_type" class="form-control">
+                      <option value="sample">Sample r</option>
+                      <option value="lit">Literature r</option>
+                      <option value="tissue">Tissue r</option>
+                  </select>
+              </div>
+          </div>
+
+          <div class="form-group">
+              <label for="corr_dataset" class="col-xs-2 control-label">Database</label>
+              <div class="col-xs-10 controls">
+                  <select name="corr_dataset" class="form-control">
+                      {% for tissue in corr_tools.dataset_menu %}
+                          {% if tissue.tissue %}
+                              <optgroup label="{{ tissue.tissue }} ------">
+                          {% endif %}
+                          {% for dataset in tissue.datasets %}
+                              <option value="{{ dataset[1] }}"
+                              {% if corr_tools.dataset_menu_selected == dataset[1] %}
+                                  selected
+                              {% endif %}>
+                                {{ dataset[0] }}
+                              </option>
+                          {% endfor %}
+                          {% if tissue.tissue %}
+                              </optgroup>
+                          {% endif %}
+                      {% endfor %}
+                  </select>
+              </div>
+          </div>
+
+          <div class="form-group">
+              <label for="corr_return_results" class="col-xs-2 control-label">Return</label>
+              <div class="col-xs-4 controls">
+                  <select name="corr_return_results" class="form-control">
+                      {% for return_result in corr_tools.return_results_menu %}
+                          <option value="{{ return_result }}"
+                          {% if corr_tools.return_results_menu_selected == return_result %}
+                              selected
+                          {% endif %}>
+                          Top {{ return_result }}
+                          </option>
+                      {% endfor %}
+                  </select>
+              </div>
+          </div>
+
+          <div class="form-group">
+              <label for="corr_samples_group" class="col-xs-2 control-label">Samples</label>
+              <div class="col-xs-4 controls">
+                  <select name="corr_samples_group" class="form-control">
+                      {% for group, pretty_group in sample_group_types.items() %}
+                          <option value="{{ group }}">{{ pretty_group }}</option>
+                      {% endfor %}
+                  </select>
+              </div>
+          </div>
+
+          <div id="corr_sample_method" class="form-group">
+              <label for="corr_sample_method" class="col-xs-2 control-label">Type</label>
+              <div class="col-xs-4 controls">
+                  <select name="corr_sample_method" class="form-control">
+                      <option value="pearson">Pearson</option>
+                      <option value="spearman">Spearman Rank</option>
+                      <option value="bicor">Biweight Midcorrelation</option>
+                  </select>
+              </div>
+          </div>
+          {% if dataset.type != "Publish" %}
+          <div class="form-group">
+              <label class="col-xs-2 control-label">Min Expr</label>
+              <div class="col-xs-4 controls">
+                  <input name="min_expr" value="" type="text" class="form-control min-expr-field">
+              </div>
+          </div>
+          <div class="form-group">
+              <label class="col-xs-2 control-label">Location</label>
+              <div class="col-xs-6 controls">
+                  <span>
+                  Chr: <input name="loc_chr" value="" type="text" class="form-control corr-location">&nbsp;&nbsp;&nbsp;
+                  Mb: <input name="min_loc_mb" value="" type="text" class="form-control corr-location"> &nbsp;to&nbsp; <input name="max_loc_mb" value="" type="text" class="form-control corr-location">
+                  </span>
+                  <br>
+              </div>
+          </div>
+          {% endif %}
+          <div class="form-group">
+              <label class="col-xs-2 control-label">Range</label>
+              <div class="col-xs-5 controls">
+                  <input name="p_range_lower" value="" type="hidden">
+                  <input name="p_range_upper" value="" type="hidden">
+                  <span class="p-range-container">
+                  <div id="p_range_slider" class="p-range-slider"></div>
+                  <span id="p_range_lower" class="p-range-lower"></span>
+                  <span id="p_range_upper" class="p-range-upper"></span>
+                  </span>
+              </div>
+          </div>
+
+          <div class="form-group">
+              <label for="corr_sample_method" class="col-xs-2 control-label"></label>
+              <div class="col-xs-3 controls">
+                  <input type="button" class="btn corr_compute submit_special btn-success" data-url="/corr_compute" title="Compute Correlation" value="Compute">
+              </div>
+          </div>
+      </div>
     </div>
-  </div>
-  <div>
-    <span id="sample_r_desc" class="correlation_desc fs12">
-        The <a href="http://genenetwork.org/correlationAnnotation.html#genetic_r">Sample Correlation</a>
-        is computed
-        between trait data and any
-        other traits in the sample database selected above. Use
-        <a href="http://www.genenetwork.org/glossary.html#Correlations">Spearman
-        Rank</a>
-        when the sample size is small (&lt;20) or when there are influential outliers.
-    </span>
-    <span id="lit_r_desc" style="display: none;" class="correlation_desc fs12">
-        The <a href="http://genenetwork.org/correlationAnnotation.html#literatureCorr">Literature Correlation</a>
-        (Lit r) between
-        this gene and all other genes is computed<br>
-        using the <a href="https://grits.eecs.utk.edu/sgo/sgo.html">
-        Semantic Gene Organizer</a>
-        and human, rat, and mouse data from PubMed.
-        Values are ranked by Lit r, but Sample r and Tissue r are also displayed.<br>
-        <a href="http://genenetwork.org/glossary.html#Literature">More on using Lit r</a>
-    </span>
-    <span id="tissue_r_desc" style="display: none;" class="correlation_desc fs12">
-        The <a href="http://genenetwork.org/webqtl/main.py?FormID=tissueCorrelation">Tissue Correlation</a>
-        (Tissue r)
-        estimates the similarity of expression of two genes
-        or transcripts across different cells, tissues, or organs
-        (<a href="http://genenetwork.org/correlationAnnotation.html#tissueCorr">glossary</a>).
-        Tissue correlations
-        are generated by analyzing expression in multiple samples usually taken from single cases.<br>
-        <strong>Pearson</strong> and <strong>Spearman Rank</strong> correlations have been
-        computed for all pairs of genes using data from mouse samples.<br>
-    </span>
-  </div>
-</div>
\ No newline at end of file
+    <div class="col-xs-4">
+      <span id="sample_r_desc" class="correlation_desc">
+          The <a href="http://genenetwork.org/correlationAnnotation.html#genetic_r">Sample Correlation</a>
+          is computed
+          between trait data and any
+          other traits in the sample database selected above. Use
+          <a href="http://www.genenetwork.org/glossary.html#Correlations">Spearman
+          Rank</a>
+          when the sample size is small (&lt;20) or when there are influential outliers.
+      </span>
+      <span id="lit_r_desc" style="display: none;" class="correlation_desc">
+          The <a href="http://genenetwork.org/correlationAnnotation.html#literatureCorr">Literature Correlation</a>
+          (Lit r) between
+          this gene and all other genes is computed<br>
+          using the <a href="https://grits.eecs.utk.edu/sgo/sgo.html">
+          Semantic Gene Organizer</a>
+          and human, rat, and mouse data from PubMed.
+          Values are ranked by Lit r, but Sample r and Tissue r are also displayed.<br>
+          <a href="http://genenetwork.org/glossary.html#Literature">More on using Lit r</a>
+      </span>
+      <span id="tissue_r_desc" style="display: none;" class="correlation_desc">
+          The <a href="http://genenetwork.org/webqtl/main.py?FormID=tissueCorrelation">Tissue Correlation</a>
+          (Tissue r)
+          estimates the similarity of expression of two genes
+          or transcripts across different cells, tissues, or organs
+          (<a href="http://genenetwork.org/correlationAnnotation.html#tissueCorr">glossary</a>).
+          Tissue correlations
+          are generated by analyzing expression in multiple samples usually taken from single cases.<br>
+          <strong>Pearson</strong> and <strong>Spearman Rank</strong> correlations have been
+          computed for all pairs of genes using data from mouse samples.<br>
+      </span>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/wqflask/wqflask/templates/show_trait_statistics.html b/wqflask/wqflask/templates/show_trait_statistics.html
index 7f50b7bc..4f347d4e 100644
--- a/wqflask/wqflask/templates/show_trait_statistics.html
+++ b/wqflask/wqflask/templates/show_trait_statistics.html
@@ -27,12 +27,12 @@
         </ul>
         <div class="tab-content">
             <div class="tab-pane active" id="stats_tab">
-                <div class="form-horizontal stats_form_div">
+                <div class="form-horizontal section-form-div">
                         <table id="stats_table" style="width: {{ stats_table_width }}px;" class="table table-hover table-striped table-bordered left-float"></table>
                 </div>
             </div>
             <div class="tab-pane" id="histogram_tab">
-                <div class="form-horizontal stats_form_div">
+                <div class="form-horizontal section-form-div">
                     {% if sample_groups|length != 1 %}
                     Select Group:
                     <select class="histogram_samples_group">
@@ -49,7 +49,7 @@
             </div>
             {% if num_values < 256 %}
             <div class="tab-pane" id="bar_chart_tab">
-                <div class="form-horizontal stats_form_div">
+                <div class="form-horizontal section-form-div">
                     {% if sample_groups|length != 1 %}
                     Select Group:
                     <select class="bar_chart_samples_group">
@@ -84,7 +84,7 @@
             </div>
             {% endif %}
             <div class="tab-pane" id="probability_plot">
-                <div class="form-horizontal padding-20">
+                <div class="form-horizontal section-form-div">
                     {% if sample_groups|length != 1 %}
                     Select Group:
                     <select class="prob_plot_samples_group">
@@ -117,7 +117,7 @@
                 </div>
             </div>
             <div class="tab-pane" id="scatterplot_matrix">
-                <div class="btn-group margin-b-40">
+                <div class="btn-group scatterplot-btn-div">
                     <button type="button" class="btn btn-default" id="select_compare_trait">
                         <i class="icon-th-large"></i> Select Traits
                     </button>