Update html templates to use bootstrap for styling

1 files changed, 168 insertions, 155 deletions

diff --git a/qc_app/templates/rqtl2/select-probeset-dataset.html b/qc_app/templates/rqtl2/select-probeset-dataset.html
index c5acb72..26f52ed 100644
--- a/qc_app/templates/rqtl2/select-probeset-dataset.html
+++ b/qc_app/templates/rqtl2/select-probeset-dataset.html
@@ -6,173 +6,186 @@
 {%block contents%}
 <h2 class="heading">Phenotype(ProbeSet) Dataset</h2>
 
-<div class="explainer">
+<div class="row">
   <p>The R/qtl2 bundle you uploaded contains (a) "<strong>pheno</strong>"
     file(s). This data needs to be organised under a dataset.</p>
   <p>This page gives you the ability to do that.</p>
 </div>
 
 {%if datasets | length > 0%}
-<form method="POST"
-      action="{{url_for('upload.rqtl2.select_probeset_dataset',
-	      species_id=species.SpeciesId, population_id=population.Id)}}"
-      id="frm:select-probeset-dataset">
-  <legend class="heading">Select from existing ProbeSet datasets</legend>
-  {{flash_messages("error-rqtl2")}}
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-  <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
-  <input type="hidden" name="probe-study-id" value="{{probe_study.Id}}" />
-
-  <fieldset>
-    <label for="select:probe-dataset">Dataset</label>
-    <select id="select:probe-dataset"
-	    name="probe-dataset-id"
-	    required="required"
-	    {%if datasets | length == 0%}disabled="disabled"{%endif%}>
-      <option value="">Select a dataset</option>
-      {%for dataset in datasets%}
-      <option value={{dataset.Id}}>
-	{{dataset.Name}}
-	{%if dataset.FullName%}
-	 -- ({{dataset.FullName}})
-	{%endif%}
-      </option>
-      {%endfor%}
-    </select>
-
-    <span class="form-col-2">Select from existing ProbeSet datasets.</span>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="select dataset"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
+<div class="row">
+  <form method="POST"
+        action="{{url_for('upload.rqtl2.select_probeset_dataset',
+	        species_id=species.SpeciesId, population_id=population.Id)}}"
+        id="frm:select-probeset-dataset">
+    <legend class="heading">Select from existing ProbeSet datasets</legend>
+    {{flash_messages("error-rqtl2")}}
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
+    <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
+    <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
+    <input type="hidden" name="probe-study-id" value="{{probe_study.Id}}" />
+
+    <div class="form-group">
+      <label class="form-label" for="select:probe-dataset">Dataset</label>
+      <select id="select:probe-dataset"
+	      name="probe-dataset-id"
+	      required="required"
+	      {%if datasets | length == 0%}disabled="disabled"{%endif%}
+              class="form-control"
+              aria-describedby="help-probe-dataset">
+        <option value="">Select a dataset</option>
+        {%for dataset in datasets%}
+        <option value={{dataset.Id}}>
+	  {{dataset.Name}}
+	  {%if dataset.FullName%}
+	  -- ({{dataset.FullName}})
+	  {%endif%}
+        </option>
+        {%endfor%}
+      </select>
+
+      <span id="help-probe-dataset" class="form-text text-muted">
+        Select from existing ProbeSet datasets.</span>
+    </div>
+
+    <button type="submit" class="btn btn-primary" />select dataset</button>
 </form>
+</div>
 
-<p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
+<div class="row">
+  <p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
+</div>
 {%endif%}
 
-<div class="explainer">
+<div class="row">
   <p>Create an entirely new ProbeSet dataset for your data.</p>
 </div>
 
-<form method="POST"
-      action="{{url_for('upload.rqtl2.create_probeset_dataset',
-	      species_id=species.SpeciesId, population_id=population.Id)}}"
-      id="frm:create-probeset-dataset">
-  <legend class="heading">Create a new ProbeSet dataset</legend>
-  {{flash_messages("error-rqtl2-create-probeset-dataset")}}
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-  <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
-  <input type="hidden" name="probe-study-id" value="{{probe_study.Id}}" />
-
-  <fieldset>
-    <label for="select:average">averaging method</label>
-    <select id="select:average"
-	    name="averageid"
-	    required="required">
-      <option value="">Select averaging method</option>
-      {%for avgmethod in avgmethods%}
-      <option value="{{avgmethod.Id}}">
-	{{avgmethod.Name}}
-	{%if avgmethod.Normalization%}
-	({{avgmethod.Normalization}})
-	{%endif%}
-      </option>
-      {%endfor%}
-    </select>
-
-    <span class="form-col-2">
-      Select the averaging method used for your data.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:datasetname">Name</label>
-    <input type="text" id="txt:datasetname" name="datasetname"
-	   required="required"
-	   maxlength="40"
-	   title="Name of the dataset, e.g 'BXDMicroArray_ProbeSet_June03'. (Required)" />
-
-    <span class="form-col-2">
-      Provide a name for the dataset e.g. "BXDMicroArray_ProbeSet_June03". This
-      is mandatory <strong>MUST</strong> be provided.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:datasetfullname">Full Name</label>
-    <input type="text" id="txt:datasetfullname" name="datasetfullname"
-	   required="required"
-	   maxlength="100"
-	   title="A longer name for the dataset, e.g. 'UTHSC Brain mRNA U74Av2 (Jun03) MAS5'. (Required)" />
-
-    <span class="form-col-2">
-      Provide a longer, more descriptive name for the dataset e.g.
-      "UTHSC Brain mRNA U74Av2 (Jun03) MAS5". This is mandatory and
-      <strong>MUST</strong> be provided.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:datasetshortname">Short Name</label>
-    <input type="text" id="txt:datasetshortname" name="datasetshortname"
-	   maxlength="100"
-	   title="An abbreviated name for the dataset, e.g 'Br_U_0603_M'. (Optional)" />
-
-    <span class="form-col-2">
-      Provide a longer, more descriptive name for the dataset e.g. "Br_U_0603_M".
-      This is optional.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <input type="checkbox" id="chk:public" name="datasetpublic"
-	   checked="checked"
-	   title="Whether or not the dataset is accessible by the general public." />
-    <label for="chk:datasetpublic">Public?</label>
-
-    <span class="form-col-2">
-      Check to specify that the dataset will be publicly available. Uncheck to
-      limit access to the dataset.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="select:datasetdatascale">Data Scale</label>
-    <select id="select:datasetdatascale"
-	    name="datasetdatascale"
-	    required="required">
-      <option value="log2" selected="selected">log2</option>
-      <option value="z_score">z_score</option>
-      <option value="log2_ratio">log2_ratio</option>
-      <option value="linear">linear</option>
-      <option value="linear_positive">linear_positive</option>
-    </select>
-
-    <span class="form-col-2">
-      Select from a list of scaling methods.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="create dataset"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+<div class="row">
+  <form method="POST"
+        action="{{url_for('upload.rqtl2.create_probeset_dataset',
+	        species_id=species.SpeciesId, population_id=population.Id)}}"
+        id="frm:create-probeset-dataset">
+    <legend class="heading">Create a new ProbeSet dataset</legend>
+    {{flash_messages("error-rqtl2-create-probeset-dataset")}}
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
+    <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
+    <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
+    <input type="hidden" name="probe-study-id" value="{{probe_study.Id}}" />
+
+    <div class="form-group">
+      <label class="form-label" for="select:average">averaging method</label>
+      <select id="select:average"
+	      name="averageid"
+	      required="required"
+              class="form-control"
+              aria-describedby="help-average">
+        <option value="">Select averaging method</option>
+        {%for avgmethod in avgmethods%}
+        <option value="{{avgmethod.Id}}">
+	  {{avgmethod.Name}}
+	  {%if avgmethod.Normalization%}
+	  ({{avgmethod.Normalization}})
+	  {%endif%}
+        </option>
+        {%endfor%}
+      </select>
+
+      <span id="help-average" class="form-text text-muted">
+        Select the averaging method used for your data.
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="txt:datasetname">Name</label>
+      <input type="text" id="txt:datasetname" name="datasetname"
+	     required="required"
+	     maxlength="40"
+	     title="Name of the dataset, e.g 'BXDMicroArray_ProbeSet_June03'. (Required)"
+             class="form-control"
+             aria-describedby="help-dataset-name" />
+
+      <span id="help-dataset-name" class="form-text text-muted">
+        Provide a name for the dataset e.g. "BXDMicroArray_ProbeSet_June03". This
+        is mandatory <strong>MUST</strong> be provided.
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="txt:datasetfullname">Full Name</label>
+      <input type="text" id="txt:datasetfullname" name="datasetfullname"
+	     required="required"
+	     maxlength="100"
+	     title="A longer name for the dataset, e.g. 'UTHSC Brain mRNA U74Av2 (Jun03) MAS5'. (Required)"
+             class="form-control"
+             aria-describedby="help-dataset-fullname" />
+
+      <span id="help-dataset-fullname" class="form-text text-muted">
+        Provide a longer, more descriptive name for the dataset e.g.
+        "UTHSC Brain mRNA U74Av2 (Jun03) MAS5". This is mandatory and
+        <strong>MUST</strong> be provided.
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="txt:datasetshortname">Short Name</label>
+      <input type="text" id="txt:datasetshortname" name="datasetshortname"
+	     maxlength="100"
+	     title="An abbreviated name for the dataset, e.g 'Br_U_0603_M'. (Optional)"
+             class="form-control"
+             aria-describedby="help-dataset-shortname" />
+
+      <span id="help-dataset-shortname" class="form-text text-muted">
+        Provide a longer, more descriptive name for the dataset e.g. "Br_U_0603_M".
+        This is optional.
+      </span>
+    </div>
+
+    <div class="form-check">
+      <input type="checkbox" id="chk:public" name="datasetpublic"
+	     checked="checked"
+	     title="Whether or not the dataset is accessible by the general public."
+             class="form-check-input"
+             aria-describedby="help-public" />
+      <label class="form-check-label" for="chk:datasetpublic">Public?</label>
+
+      <span id="help-public" class="form-text text-muted">
+        Check to specify that the dataset will be publicly available. Uncheck to
+        limit access to the dataset.
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="select:datasetdatascale">Data Scale</label>
+      <select id="select:datasetdatascale"
+	      name="datasetdatascale"
+	      required="required"
+              class="form-control"
+              aria-describedby="help-dataset-datascale">
+        <option value="log2" selected="selected">log2</option>
+        <option value="z_score">z_score</option>
+        <option value="log2_ratio">log2_ratio</option>
+        <option value="linear">linear</option>
+        <option value="linear_positive">linear_positive</option>
+      </select>
+
+      <span id="help-dataset-datascale" class="form-text text-muted">
+        Select from a list of scaling methods.
+      </span>
+    </div>
+
+    <button type="submit" class="btn btn-primary">create dataset</button>
+  </form>
+</div>
 
 {%endblock%}