ui form modifications

1 files changed, 42 insertions, 32 deletions

diff --git a/wqflask/wqflask/templates/ctl_setup.html b/wqflask/wqflask/templates/ctl_setup.html
index a7ad5759..6f32db5e 100644
--- a/wqflask/wqflask/templates/ctl_setup.html
+++ b/wqflask/wqflask/templates/ctl_setup.html
@@ -18,14 +18,16 @@
   The Journal of Open Source Software (2016)<br>
   Published in <a href="http://joss.theoj.org/papers/10.21105/joss.00087"><img src="http://joss.theoj.org/papers/10.21105/joss.00087/status.svg"></a>
   <br><br>
-  {{(request.form['trait_list'].split(',')|length)}} traits as input
-
-  <form action="/ctl_results" method="post" class="form-horizontal">
-    <input type="hidden" name="trait_list" id="trait_list" value= "{{request.form['trait_list']}}">
-    <div class="dropdown">
-      <label for="Strategy">Strategy</label>
-      <div class="col-sm-10">
-        <select  name="strategy" id="strategy">
+
+    <form class="col-md-8" action="/ctl_results" method="post" class="form-horizontal" id="ctl_form">
+
+
+      <input type="hidden" name="trait_list" id="trait_list" value= "{{request.form['trait_list']}}">
+
+      <div class="form-group row">
+      <label for="Strategy" class="col-md-3 col-form-label col-form-label-sm">Strategy</label>
+      <div class="col-md-9">
+        <select  class="form-control col-md-9" name="strategy" id="strategy">
           <option value="Exact">Exact</option>
           <option value="Full">Full</option>
           <option value="Pairwise">Pairwise</option>
@@ -33,10 +35,23 @@
       </div>
     </div>
 
-    <div class="dropdown">
-      <label for="Permutations">Number of permutation (Used when strategy is Full or Pairwise)</label>
-      <div class="col-sm-10">
-        <select  name="nperm" id="nperm">
+
+        <div class="form-group row">
+          <label for="corType" class="col-md-3 col-form-label col-form-label-sm">Types of correlation coefficients:</label>
+          <div class="col-md-9">
+            <select class="form-control  col-md-9" name="parametric" id="parametric">
+            <option value="pearson">pearson</option>
+            <option value="bicor">bicor</option>
+          </select>
+          </div>
+
+        </div>
+
+
+            <div class="form-group row">
+      <label for="Permutations" class="col-md-3 col-form-label col-form-label-sm">Number of permutation (Used when strategy is Full or Pairwise)</label>
+      <div class="col-md-9">
+        <select class="form-control" name="nperm" id="nperm">
           <option value="100">100</option>
           <option value="1000" selected="selected">1000</option>
           <option value="10000">10000</option>
@@ -44,33 +59,28 @@
       </div>
     </div>
 
-    <div class="dropdown">
-      <label for="Coefficient">Type of correlation coefficient</label>
-      <div class="col-sm-10">
-        <select  name="parametric" id="parametric">
-          <option value="False">Spearman</option>
-          <option value="True">Pearson</option>
-        </select>
-      </div>
-    </div>
 
-    <div class="dropdown">
-      <label for="Significance">Significance level</label>
-      <div class="col-sm-10">
-        <select  name="significance" id="significance">
+    <div class="form-group row">
+      <label for="Significance" class="col-md-3 col-form-label col-form-label-sm"> Significance level</label>
+      <div class="col-md-9">
+        <select  class="form-control" name="significance" id="significance">
           <option value="0.1">0.1</option>
           <option value="0.05" selected="selected">0.05</option>
           <option value="0.001">0.001</option>
         </select>
       </div>
+      
     </div>
-    <br>
-    <div class="form-group">
-      <div class="col-sm-10">
-        <input type="submit" class="btn btn-primary" value="Run CTL using these settings" />
-      </div>
-    </div>
-</form>
+
+        <div class="form-group">
+            <div class="text-center">
+                <input type="submit" class="btn btn-primary" value="Run CTL using these settings" />
+            </div>
+        </div>
+
+
+
+    </form>
 {% endif %}
 </div>
 {% endblock %}