Make correlation and mapping CSS for trait page the same

3 files changed, 40 insertions, 49 deletions

diff --git a/wqflask/wqflask/static/new/css/show_trait.css b/wqflask/wqflask/static/new/css/show_trait.css
index f20271b7..577bb5dd 100644
--- a/wqflask/wqflask/static/new/css/show_trait.css
+++ b/wqflask/wqflask/static/new/css/show_trait.css
@@ -122,14 +122,6 @@ div.scatterplot-btn-div {
   margin-bottom:40px;
 }
 
-div.correlation-main {
-  min-width: 1200px;
-}
-
-div.correlation-options {
-  min-width: 700px;
-}
-
 .min-expr-field {
   width: 70px;
 }
@@ -171,17 +163,17 @@ div.normalize-div {
   margin-top:10px;
 }
 
-div.mapping-main {
+div.main {
   display: block;
 }
 
-div.mapping-options {
+div.options {
   float: left;
   width: 600px;
   padding-top: 0px;
 }
 
-div.mapping-descriptions {
+div.descriptions {
   float: left;
   width: 500px;
   min-width: 20%;
diff --git a/wqflask/wqflask/templates/show_trait_calculate_correlations.html b/wqflask/wqflask/templates/show_trait_calculate_correlations.html
index 33100484..0899b6a4 100644
--- a/wqflask/wqflask/templates/show_trait_calculate_correlations.html
+++ b/wqflask/wqflask/templates/show_trait_calculate_correlations.html
@@ -1,5 +1,5 @@
-<div class="row correlation-main">
-    <div class="col-xs-3 correlation-options">
+<div class="main">
+    <div class="col-xs-3 options">
       <div class="form-horizontal section-form-div">
 
         <div class="form-group">
@@ -129,38 +129,37 @@
           </div>
       </div>
     </div>
-    <div class="col-xs-4">
-      <div class="section-form-div">
-        <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="{{ url_for('glossary_blueprint.glossary') }}#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 <span class="broken_link" href="https://grits.eecs.utk.edu/sgo/sgo.html">
-            Semantic Gene Organizer</span>
-            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 class="descriptions">
+        <div class="section-form-div">
+            <dl>
+                <dt class="map-method-text">Sample Correlation</dt>
+                <dd>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="{{ url_for('glossary_blueprint.glossary') }}#Correlations">Spearman
+                    Rank</a>
+                    when the sample size is small (&lt;20) or when there are influential outliers.</dd>
+                <dt class="map-method-text">Literature Correlation</dt>
+                <dd>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 <span class="broken_link" href="https://grits.eecs.utk.edu/sgo/sgo.html">
+                    Semantic Gene Organizer</span>
+                    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></dd>
+                <dt class="map-method-text">Tissue Correlation</dt>
+                <dd>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></dd>
+            </dl>
+        </div>
     </div>
   </div>
diff --git a/wqflask/wqflask/templates/show_trait_mapping_tools.html b/wqflask/wqflask/templates/show_trait_mapping_tools.html
index b8220297..f1ed8922 100755
--- a/wqflask/wqflask/templates/show_trait_mapping_tools.html
+++ b/wqflask/wqflask/templates/show_trait_mapping_tools.html
@@ -1,6 +1,6 @@
-<div class="mapping-main">
+<div class="main">
     {% if dataset.group.mapping_names|length > 0 %}
-    <div class="mapping-options">
+    <div class="options">
         <div class="tabbable"> <!-- Only required for left/right tabs -->
 
             <ul class="nav nav-pills">
@@ -404,7 +404,7 @@
             </div>
         </div>
     </div>
-    <div class="mapping-descriptions">
+    <div class="descriptions">
         <div class="section-form-div">
             <dl>
                 {% for mapping_method in dataset.group.mapping_names %}