Update html templates to use bootstrap for styling

1 files changed, 59 insertions, 57 deletions

diff --git a/qc_app/templates/rqtl2/create-tissue-success.html b/qc_app/templates/rqtl2/create-tissue-success.html
index 7ea0c65..5f2c5a0 100644
--- a/qc_app/templates/rqtl2/create-tissue-success.html
+++ b/qc_app/templates/rqtl2/create-tissue-success.html
@@ -6,61 +6,18 @@
 {%block contents%}
 <h2 class="heading">Select Tissue</h2>
 
-<div class="explainer">
+<div class="row">
   <p>You have successfully added a new tissue, organ or biological material with
     the following details:</p>
 </div>
 
-{{flash_all_messages()}}
-
-<form id="frm-create-tissue-display"
-      method="POST"
-      action="#">
-  <legend class="heading">Create Tissue</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}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-  <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
-
-  <fieldset>
-    <label>Name</label>
-    <label>{{tissue.TissueName}}</label>
-  </fieldset>
-
-  <fieldset>
-    <label>Short Name</label>
-    <label>{{tissue.Short_Name}}</label>
-  </fieldset>
-
-  {%if tissue.BIRN_lex_ID%}
-  <fieldset>
-    <label>BIRN Lex ID</label>
-    <label>{{tissue.BIRN_lex_ID}}</label>
-  </fieldset>
-  {%endif%}
-
-  {%if tissue.BIRN_lex_Name%}
-  <fieldset>
-    <label>BIRN Lex Name</label>
-    <label>{{tissue.BIRN_lex_Name}}</label>
-  </fieldset>
-  {%endif%}
-</form>
-
-<div id="action-buttons"
-     style="width:65ch;display:inline-grid;column-gap:5px;">
-
-  <form id="frm-create-tissue-success-continue"
+<div class="row">
+  {{flash_all_messages()}}
+
+  <form id="frm-create-tissue-display"
         method="POST"
-        action="{{url_for('upload.rqtl2.select_dataset_info',
-	        species_id=species.SpeciesId,
-	        population_id=population.InbredSetId)}}"
-        style="display: inline; width: 100%; grid-column: 1 / 2;
-               padding-top: 0.5em; text-align: center; border: none;
-               background-color: inherit;">
+        action="#">
+    <legend class="heading">Create Tissue</legend>
 
     <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
     <input type="hidden" name="population_id"
@@ -69,16 +26,63 @@
     <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
     <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
 
-    <input type="submit"
-	   value="continue"
-	   class="btn btn-primary form-col-2" />
+    <div class="form-group">
+      <label>Name</label>
+      <label>{{tissue.TissueName}}</label>
+    </div>
+
+    <div class="form-group">
+      <label>Short Name</label>
+      <label>{{tissue.Short_Name}}</label>
+    </div>
+
+    {%if tissue.BIRN_lex_ID%}
+    <div class="form-group">
+      <label>BIRN Lex ID</label>
+      <label>{{tissue.BIRN_lex_ID}}</label>
+    </div>
+    {%endif%}
+
+    {%if tissue.BIRN_lex_Name%}
+    <div class="form-group">
+      <label>BIRN Lex Name</label>
+      <label>{{tissue.BIRN_lex_Name}}</label>
+    </div>
+    {%endif%}
   </form>
 
+  <div id="action-buttons"
+       style="width:65ch;display:inline-grid;column-gap:5px;">
+
+    <form id="frm-create-tissue-success-continue"
+          method="POST"
+          action="{{url_for('upload.rqtl2.select_dataset_info',
+	          species_id=species.SpeciesId,
+	          population_id=population.InbredSetId)}}"
+          style="display: inline; width: 100%; grid-column: 1 / 2;
+                 padding-top: 0.5em; text-align: center; border: none;
+                 background-color: inherit;">
+
+      <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}}" />
+
+      <button type="submit" class="btn btn-primary">continue</button>
+    </form>
+  </div>
+</div>
+
+<div class="row">
   <p style="display:inline;width:100%;grid-column:2/3;text-align:center;
             color:#336699;font-weight:bold;">
     OR
   </p>
+</div>
 
+<div class="row">
   <form id="frm-create-tissue-success-select-existing"
         method="POST"
         action="{{url_for('upload.rqtl2.select_tissue',
@@ -94,11 +98,9 @@
     <input type="hidden" name="rqtl2_bundle_file" value="{{rqtl2_bundle_file}}" />
     <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
 
-    <input type="submit"
-	   value="select from existing tissues"
-	   class="btn btn-primary form-col-2" />
+    <button type="submit" class="btn btn-primary">
+      select from existing tissues</button>
   </form>
-
 </div>
 
 {%endblock%}