Update html templates to use bootstrap for styling

1 files changed, 113 insertions, 101 deletions

diff --git a/qc_app/templates/index.html b/qc_app/templates/index.html
index 06d1e87..0d301f5 100644
--- a/qc_app/templates/index.html
+++ b/qc_app/templates/index.html
@@ -5,118 +5,130 @@
 {%block title%}Data Upload{%endblock%}
 
 {%block contents%}
-<h1 class="heading">data upload</h1>
-
-<div class="explainer">
-  <p>Each of the sections below gives you a different option for data upload.
-    Please read the documentation for each section carefully to understand what
-    each section is about.</p>
+<div class="row">
+  <h1 class="heading">data upload</h1>
+
+  <div class="explainer">
+    <p>Each of the sections below gives you a different option for data upload.
+      Please read the documentation for each section carefully to understand what
+      each section is about.</p>
+  </div>
 </div>
 
-<h2 class="heading">R/qtl2 Bundles</h2>
-
-<div class="explainer">
-  <p>This feature combines and extends the two upload methods below. Instead of
-    uploading one item at a time, the R/qtl2 bundle you upload can contain both
-    the genotypes data (samples/individuals/cases and their data) and the
-    expression data.</p>
-  <p>The R/qtl2 bundle, additionally, can contain extra metadata, that neither
-    of the methods below can handle.</p>
-
-  <a href={{url_for("upload.rqtl2.select_species")}}
-     title="Upload a zip bundle of R/qtl2 files">
-    <button class="btn btn-primary">upload R/qtl2 bundle</button></a>
+<div class="row">
+  <h2 class="heading">R/qtl2 Bundles</h2>
+
+  <div class="explainer">
+    <p>This feature combines and extends the two upload methods below. Instead of
+      uploading one item at a time, the R/qtl2 bundle you upload can contain both
+      the genotypes data (samples/individuals/cases and their data) and the
+      expression data.</p>
+    <p>The R/qtl2 bundle, additionally, can contain extra metadata, that neither
+      of the methods below can handle.</p>
+
+    <a href={{url_for("upload.rqtl2.select_species")}}
+       title="Upload a zip bundle of R/qtl2 files">
+      <button class="btn btn-primary">upload R/qtl2 bundle</button></a>
+  </div>
 </div>
 
-<h2 class="heading">Expression Data</h2>
-
-<div class="explainer">
-  <p>This feature enables you to upload expression data. It expects the data to
-    be in <strong>tab-separated values (TSV)</strong> files. The data should be
-    a simple matrix of <em>phenotype × sample</em>, i.e. The first column is a
-    list of the <em>phenotypes</em> and the first row is a list of
-    <em>samples/cases</em>.</p>
-
-  <p>If you haven't done so please go to this page to learn the requirements for
-    file formats and helpful suggestions to enter your data in a fast and easy
-    way.</p>
-
-  <ol>
-    <li><strong>PLEASE REVIEW YOUR DATA.</strong>Make sure your data complies
-      with our system requirements. (
-      <a href="{{url_for('entry.data_review')}}#data-concerns"
-	 title="Details for the data expectations.">Help</a>
-      )</li>
-    <li><strong>UPLOAD YOUR DATA FOR DATA VERIFICATION.</strong> We accept
-      <strong>.csv</strong>, <strong>.txt</strong> and <strong>.zip</strong>
-      files (<a href="{{url_for('entry.data_review')}}#file-types"
-	 title="Details for the data expectations.">Help</a>)</li>
-  </ol>
-</div>
 
-<form action="{{url_for('entry.upload_file')}}"
-      method="POST"
-      enctype="multipart/form-data"
-      id="frm-upload-expression-data">
-  <legend class="heading">upload expression data</legend>
-  {{flash_messages("error-expr-data")}}
-
-  <fieldset>
-    <label for="select_species01">Species</label>
-    <select id="select_species01"
-	    name="speciesid"
-	    required="required">
-      <option value="">Select species</option>
-      {%for aspecies in species%}
-      <option value="{{aspecies.SpeciesId}}">{{aspecies.MenuName}}</option>
-      {%endfor%}
-    </select>
-  </fieldset>
-
-  <fieldset>
-    <legend>file type</legend>
-
-    <input type="radio" name="filetype" value="average" id="filetype_average"
-	   required="required" class="form-col-1" />
-    <label for="filetype_average" class="form-col-2">average</label>
-
-    <input type="radio" name="filetype" value="standard-error"
-	   id="filetype_standard_error" required="required"
-	   class="form-col-1" />
-    <label for="filetype_standard_error" class="form-col-2">
-      standard error
-    </label>
-  </fieldset>
-
-  <fieldset>
-    <span id="no-file-error" class="alert-danger" style="display: none;">
-      No file selected
-    </span>
-    <label for="file_upload" class="form-col-1">select file</label>
-    <input type="file" name="qc_text_file" id="file_upload"
-	   accept="text/plain, text/tab-separated-values, application/zip"
-	   class="form-col-2"/>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit" value="upload file" class="btn btn-primary form-col-2" />
-  </fieldset>
+<div class="row">
+  <h2 class="heading">Expression Data</h2>
+
+  <div class="explainer">
+    <p>This feature enables you to upload expression data. It expects the data to
+      be in <strong>tab-separated values (TSV)</strong> files. The data should be
+      a simple matrix of <em>phenotype × sample</em>, i.e. The first column is a
+      list of the <em>phenotypes</em> and the first row is a list of
+      <em>samples/cases</em>.</p>
+
+    <p>If you haven't done so please go to this page to learn the requirements for
+      file formats and helpful suggestions to enter your data in a fast and easy
+      way.</p>
+
+    <ol>
+      <li><strong>PLEASE REVIEW YOUR DATA.</strong>Make sure your data complies
+        with our system requirements. (
+        <a href="{{url_for('entry.data_review')}}#data-concerns"
+	   title="Details for the data expectations.">Help</a>
+        )</li>
+      <li><strong>UPLOAD YOUR DATA FOR DATA VERIFICATION.</strong> We accept
+        <strong>.csv</strong>, <strong>.txt</strong> and <strong>.zip</strong>
+        files (<a href="{{url_for('entry.data_review')}}#file-types"
+	          title="Details for the data expectations.">Help</a>)</li>
+    </ol>
+  </div>
+
+  <form action="{{url_for('entry.upload_file')}}"
+        method="POST"
+        enctype="multipart/form-data"
+        id="frm-upload-expression-data">
+    <legend class="heading">upload expression data</legend>
+    {{flash_messages("error-expr-data")}}
+
+    <div class="form-group">
+      <label for="select_species01" class="form-label">Species</label>
+      <select id="select_species01"
+	      name="speciesid"
+	      required="required"
+              class="form-control">
+        <option value="">Select species</option>
+        {%for aspecies in species%}
+        <option value="{{aspecies.SpeciesId}}">{{aspecies.MenuName}}</option>
+        {%endfor%}
+      </select>
+    </div>
+
+    <div class="form-group">
+      <legend class="heading">file type</legend>
+
+      <div class="form-check">
+        <input type="radio" name="filetype" value="average" id="filetype_average"
+	       required="required" class="form-check-input" />
+        <label for="filetype_average" class="form-check-label">average</label>
+      </div>
+
+      <div class="form-check">
+        <input type="radio" name="filetype" value="standard-error"
+	       id="filetype_standard_error" required="required"
+	       class="form-check-input" />
+        <label for="filetype_standard_error" class="form-check-label">
+          standard error
+        </label>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <span id="no-file-error" class="alert-danger" style="display: none;">
+        No file selected
+      </span>
+      <label for="file_upload" class="form-label">select file</label>
+      <input type="file" name="qc_text_file" id="file_upload"
+	     accept="text/plain, text/tab-separated-values, application/zip"
+	     class="form-control"/>
+    </div>
+
+    <button type="submit" class="btn btn-primary" />upload file</button>
 </form>
 
 {{upload_progress_indicator()}}
+</div>
 
-<h2 class="heading">samples/cases</h2>
+<div class="row">
+  <h2 class="heading">samples/cases</h2>
 
-<div class="explainer">
-  <p>For the expression data above, you need the samples/cases in your file to
-    already exist in the GeneNetwork database. If there are any samples that do
-    not already exist the upload of the expression data will fail.</p>
-  <p>This section gives you the opportunity to upload any missing samples</p>
-</div>
+  <div class="explainer">
+    <p>For the expression data above, you need the samples/cases in your file to
+      already exist in the GeneNetwork database. If there are any samples that do
+      not already exist the upload of the expression data will fail.</p>
+    <p>This section gives you the opportunity to upload any missing samples</p>
+  </div>
 
-<a href={{url_for("samples.select_species")}}
-   title="Upload samples/cases/individuals for your data">
-  upload Samples/Cases</a>
+  <a href={{url_for("samples.select_species")}}
+     title="Upload samples/cases/individuals for your data"
+     class="btn btn-primary">upload Samples/Cases</a>
+</div>
 
 {%endblock%}