Update html templates to use bootstrap for styling

1 files changed, 128 insertions, 120 deletions

diff --git a/qc_app/templates/rqtl2/select-geno-dataset.html b/qc_app/templates/rqtl2/select-geno-dataset.html
index f092dbc..873f9c3 100644
--- a/qc_app/templates/rqtl2/select-geno-dataset.html
+++ b/qc_app/templates/rqtl2/select-geno-dataset.html
@@ -6,131 +6,139 @@
 {%block contents%}
 <h2 class="heading">Select Genotypes Dataset</h2>
 
-<div class="explainer">
+<div class="row">
   <p>Your R/qtl2 files bundle contains a "geno" specification. You will
     therefore need to select from one of the existing Genotype datasets or
     create a new one.</p>
   <p>This is the dataset where your data will be organised under.</p>
 </div>
 
-<form id="frm-upload-rqtl2-bundle"
-      action="{{url_for('upload.rqtl2.select_geno_dataset',
-	      species_id=species.SpeciesId,
-	      population_id=population.InbredSetId)}}"
-      method="POST"
-      enctype="multipart/form-data">
-  <legend class="heading">select from existing genotype datasets</legend>
-
-  <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}}" />
-
-  {{flash_messages("error-rqtl2-select-geno-dataset")}}
-
-  <fieldset>
-    <legend>Datasets</legend>
-    <label for="select:geno-datasets">Dataset</label>
-    <select id="select:geno-datasets"
-	    name="geno-dataset-id"
-	    required="required"
-	    {%if datasets | length == 0%}
-	    disabled="disabled"
-	    {%endif%}>
-      <option value="">Select dataset</option>
-      {%for dset in datasets%}
-      <option value="{{dset['Id']}}">{{dset["Name"]}} ({{dset["FullName"]}})</option>
-      {%endfor%}
-    </select>
-    <span class="form-col-2">
-      Select from the existing genotype datasets for species
-      {{species.SpeciesName}} ({{species.FullName}}).
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="select dataset"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
-
-<p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
-
-<form id="frm-upload-rqtl2-bundle"
-      action="{{url_for('upload.rqtl2.create_geno_dataset',
-	      species_id=species.SpeciesId,
-	      population_id=population.InbredSetId)}}"
-      method="POST"
-      enctype="multipart/form-data">
-  <legend class="heading">create a new genotype dataset</legend>
-
-  <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}}" />
-
-  {{flash_messages("error-rqtl2-create-geno-dataset")}}
-
-  <fieldset>
-    <label for="txt:dataset-name">Name</label>
-    <input type="text"
-	   id="txt:dataset-name"
-	   name="dataset-name"
-	   maxlength="100"
-	   required="required" />
-    <span class="form-col-2">
-      Provide the new name for the genotype dataset, e.g. "BXDGeno"
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:dataset-fullname">Full Name</label>
-    <input type="text"
-	   id="txt:dataset-fullname"
-	   name="dataset-fullname"
-	   required="required"
-	   maxlength="100" />
-
-    <span class="form-col-2">
-      Provide a longer name that better describes the genotype dataset, e.g.
-      "BXD Genotypes"
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:dataset-shortname">Short Name</label>
-    <input type="text"
-	   id="txt:dataset-shortname"
-	   name="dataset-shortname"
-	   maxlength="100" />
-
-    <span class="form-col-2">
-      Provide a short name for the genotype dataset. This is optional. If not
-      provided, we'll default to the same value as the "Name" above.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <input type="checkbox"
-	   id="chk:dataset-public"
-	   name="dataset-public"
-	   checked="checked" />
-    <label for="chk:dataset-public">Public?</label>
-
-    <span class="form-col-2">
-      Specify whether the dataset will be available publicly. Check to make the
-      dataset publicly available and uncheck to limit who can access the dataset.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="create new dataset"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+<div class="row">
+  <form id="frm-upload-rqtl2-bundle"
+        action="{{url_for('upload.rqtl2.select_geno_dataset',
+	        species_id=species.SpeciesId,
+	        population_id=population.InbredSetId)}}"
+        method="POST"
+        enctype="multipart/form-data">
+    <legend class="heading">select from existing genotype datasets</legend>
+
+    <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}}" />
+
+    {{flash_messages("error-rqtl2-select-geno-dataset")}}
+
+    <div class="form-group">
+      <legend>Datasets</legend>
+      <label for="select:geno-datasets" class="form-label">Dataset</label>
+      <select id="select:geno-datasets"
+	      name="geno-dataset-id"
+	      required="required"
+	      {%if datasets | length == 0%}
+	      disabled="disabled"
+	      {%endif%}
+              class="form-control"
+              aria-describedby="help-geno-dataset-select-dataset">
+        <option value="">Select dataset</option>
+        {%for dset in datasets%}
+        <option value="{{dset['Id']}}">{{dset["Name"]}} ({{dset["FullName"]}})</option>
+        {%endfor%}
+      </select>
+      <span id="help-geno-dataset-select-dataset" class="form-text text-muted">
+        Select from the existing genotype datasets for species
+        {{species.SpeciesName}} ({{species.FullName}}).
+      </span>
+    </div>
+
+    <button type="submit" class="btn btn-primary">select dataset</button>
+  </form>
+</div>
+
+<div class="row">
+  <p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
+</div>
+
+<div class="row">
+  <form id="frm-upload-rqtl2-bundle"
+        action="{{url_for('upload.rqtl2.create_geno_dataset',
+	        species_id=species.SpeciesId,
+	        population_id=population.InbredSetId)}}"
+        method="POST"
+        enctype="multipart/form-data">
+    <legend class="heading">create a new genotype dataset</legend>
+
+    <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}}" />
+
+    {{flash_messages("error-rqtl2-create-geno-dataset")}}
+
+    <div class="form-group">
+      <label for="txt:dataset-name" class="form-label">Name</label>
+      <input type="text"
+	     id="txt:dataset-name"
+	     name="dataset-name"
+	     maxlength="100"
+	     required="required"
+             class="form-control"
+             aria-describedby="help-geno-dataset-name" />
+      <span id="help-geno-dataset-name" class="form-text text-muted">
+        Provide the new name for the genotype dataset, e.g. "BXDGeno"
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label for="txt:dataset-fullname" class="form-label">Full Name</label>
+      <input type="text"
+	     id="txt:dataset-fullname"
+	     name="dataset-fullname"
+	     required="required"
+	     maxlength="100"
+             class="form-control"
+             aria-describedby="help-geno-dataset-fullname" />
+
+      <span id="help-geno-dataset-fullname" class="form-text text-muted">
+        Provide a longer name that better describes the genotype dataset, e.g.
+        "BXD Genotypes"
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label for="txt:dataset-shortname" class="form-label">Short Name</label>
+      <input type="text"
+	     id="txt:dataset-shortname"
+	     name="dataset-shortname"
+	     maxlength="100"
+             class="form-control"
+             aria-describedby="help-geno-dataset-shortname" />
+
+      <span id="help-geno-dataset-shortname" class="form-text text-muted">
+        Provide a short name for the genotype dataset. This is optional. If not
+        provided, we'll default to the same value as the "Name" above.
+      </span>
+    </div>
+
+    <div class="form-group">
+      <input type="checkbox"
+	     id="chk:dataset-public"
+	     name="dataset-public"
+	     checked="checked"
+             class="form-check"
+             aria-describedby="help-geno-datasent-public" />
+      <label for="chk:dataset-public" class="form-check-label">Public?</label>
+
+      <span id="help-geno-dataset-public" class="form-text text-muted">
+        Specify whether the dataset will be available publicly. Check to make the
+        dataset publicly available and uncheck to limit who can access the dataset.
+      </span>
+    </div>
+
+    <button type="submit" class="btn btn-primary">create new dataset</button>
+  </form>
+</div>
 
 {%endblock%}