Updated wgcna_setup to use Bootstrap error messages and form styling.

1 files changed, 45 insertions, 21 deletions

diff --git a/wqflask/wqflask/templates/wgcna_setup.html b/wqflask/wqflask/templates/wgcna_setup.html
index 49181938..8ab8c4a0 100644
--- a/wqflask/wqflask/templates/wgcna_setup.html
+++ b/wqflask/wqflask/templates/wgcna_setup.html
@@ -2,27 +2,51 @@
 {% block title %}WCGNA analysis{% endblock %}
 
 {% block content %} <!-- Start of body -->
-<form action="/wgcna_results" method="post">
-  <div class="container">
-
-    <h1>WGCNA analysis parameters</h1>
-    {% if request.form['trait_list'].split(",")|length <= 4 %}
-
-      <h2 style="color: #ff0000;">ERROR: Too few phenotypes as input</h2>
-      Please make sure you select enough phenotypes / genes to perform WGCNA, 
-      your collection needs to contain at least 4 different phenotypes. You provided {{request.form['trait_list'].split(',')|length}} phenotypes as input
+<h1> WGCNA analysis parameters</h1>
+<div class="container">
+		{% if request.form['trait_list'].split(",")|length <= 4 %}
 
+		<div class="alert alert-danger" role="alert">
+				<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+				<span class="sr-only">Error:</span>
+				<h2>
+						Too few phenotypes as input
+				</h2>
+				Please make sure you select enough phenotypes / genes to perform WGCNA, your collection needs to contain at least 4 different phenotypes. You provided {{request.form['trait_list'].split(',')|length}} phenotypes as input
+		</div>
     {% else %}
-    <input type="hidden" name="trait_list" id="trait_list" value= "{{request.form['trait_list']}}">
-    <table>
-      <tr><td>Soft threshold:</td><td><input type="text" class="form-inline" name="SoftThresholds" id="SoftThresholds" value="1,2,3,4,5,6,7,8,9"></td></tr>
-      <tr><td>Minimum module size:</td><td><input type="text" class="form-inline" name="MinModuleSize" id="MinModuleSize" value="30"></td></tr>
-      <tr><td>TOMtype:</td><td><input type="text" class="form-inline" name="TOMtype" id="TOMtype" value="unsigned"></td></tr>
-      <tr><td>mergeCutHeight:</td><td><input type="text" class="form-inline" name="mergeCutHeight" id="mergeCutHeight" value="0.25"></td></tr>
-    </table>
-    <input type="submit" class="btn btn-primary" value="Run WGCNA using these settings" />
-    {% endif %}
-  </div>
-</form>
+ 		<form action="/wgcna_results" method="post" class="form-horizontal">
+				<input type="hidden" name="trait_list" id="trait_list" value= "{{request.form['trait_list']}}">
+				<div class="form-group">			
+					<label for="SoftThresholds"> Soft threshold: </label>
+					<div class="col-sm-10">
+						<input type="text" class="form-inline" name="SoftThresholds" id="SoftThresholds" value="1,2,3,4,5,6,7,8,9">
+					</div>
+				</div>
+				<div class="form-group">			
+					<label for="MinModuleSize"> Minimum module size: </label>
+					<div class="col-sm-10">
+						<input type="text" class="form-inline" name="MinModuleSize" id="MinModuleSize" value="30">
+					</div>
+				</div>
+				<div class="form-group">			
+					<label for="TOMtype"> TOMtype: </label>
+					<div class="col-sm-10">
+						<input type="text" class="form-inline" name="TOMtype" id="TOMtype" value="unsigned">
+					</div>
+				</div>			
+				<div class="form-group">			
+					<label for="mergeCutHeight"> mergeCutHeight: </label>
+					<div class="col-sm-10">
+						<input type="text" class="form-inline" name="mergeCutHeight" id="mergeCutHeight" value="0.25">
+					</div>
+				</div>			
+				<div class="form-group">			
+					<div class="col-sm-10">
+						<input type="submit" class="btn btn-primary" value="Run WGCNA using these settings" />
+					</div>
+				</div>			
+		</form>		
+		{% endif %}
+</div>
 {% endblock %}
-