Align labels and input elements on one line horizontally.

2 files changed, 100 insertions, 85 deletions

diff --git a/uploader/templates/genotypes/add-genotypes-records-csv.html b/uploader/templates/genotypes/add-genotypes-records-csv.html
index 58dbe81..eb0bfd0 100644
--- a/uploader/templates/genotypes/add-genotypes-records-csv.html
+++ b/uploader/templates/genotypes/add-genotypes-records-csv.html
@@ -8,36 +8,43 @@
   <p>You can add new genotype records here.</p>
 </div>
 
-{{display_csv_fields()}}
+<div class="border rounded p-3 mb-3" role="group" aria-labelledby="file-inputs-group-label">
+  <div id="file-inputs-group-label" class="fw-bold mb-2">File Details</div>
+  {{display_csv_fields()}}
 
-<div class="form-group">
-  <div class="non-resumable-elements">
-    <label for="finput-genotypes-records-file" class="form-label">
-      genotypes records</label>
-    <input id="finput-genotypes-records-file"
-           name="genotypes-records-file"
-           class="form-control"
-           type="file"
-           data-preview-table="tbl-preview-geno-records"
-           required="required"  />
-    <span class="form-text text-muted">
-      Provide a file that contains only the genotypes records,
-      <a href="#docs-file-genotypes-records-csv"
-         title="Documentation of the genotypes records file format.">
-        the documentation for the expected format of the file</a>.</span>
-  </div>
-  {{display_resumable_elements(
-  "resumable-genotypes-records-file",
-  "Genotypes records",
-  '<p>Drag and drop the CSV file here, that contains the genotype records you
-    want to add.</p>
+  <div class="form-group">
+    <div class="non-resumable-elements">
+      <div class="row mb-3">
+        <label for="finput-genotypes-records-file" class="col-sm-2 col-form-label">
+          genotypes records</label>
+        <div class="col-sm-10">
+          <input id="finput-genotypes-records-file"
+                 name="genotypes-records-file"
+                 class="form-control"
+                 type="file"
+                 data-preview-table="tbl-preview-geno-records"
+                 required="required"  />
+        </div>
+        <span class="form-text text-muted">
+          Provide a file that contains only the genotypes records,
+          <a href="#docs-file-genotypes-records-csv"
+             title="Documentation of the genotypes records file format.">
+            the documentation for the expected format of the file</a>.</span>
+      </div>
+    </div>
+    {{display_resumable_elements(
+    "resumable-genotypes-records-file",
+    "Genotypes records",
+    '<p>Drag and drop the CSV file here, that contains the genotype records you
+      want to add.</p>
 
-  <p>Please see the
-    <a href="#docs-file-genotypes-records"
-       title="Documentation of the genotypes records data file format.">
-      "Genotypes records" documentation</a> section below for more
-    information on the expected format of the file provided here.</p>')}}
-  {{display_preview_table("tbl-preview-geno-records", "genotypes records")}}
+    <p>Please see the
+      <a href="#docs-file-genotypes-records"
+         title="Documentation of the genotypes records data file format.">
+        "Genotypes records" documentation</a> section below for more
+      information on the expected format of the file provided here.</p>')}}
+    {{display_preview_table("tbl-preview-geno-records", "genotypes records")}}
+  </div>
 </div>
 
 <div class="">
@@ -130,11 +137,6 @@
 
 <script type="text/javascript">
   $(function(evt) {
-      
-      var preview_tables_to_elements_map = {
-          "#tbl-preview-geno-records": "#finput-genotypes-records-file",
-      };
-
       makeResumableObject(
           form_id="frm-add-genotypes-records",
           file_input_id="finput-genotypes-records-file",
diff --git a/uploader/templates/macro-csv-fields.html b/uploader/templates/macro-csv-fields.html
index d4b0f57..161ba20 100644
--- a/uploader/templates/macro-csv-fields.html
+++ b/uploader/templates/macro-csv-fields.html
@@ -1,68 +1,81 @@
 {%macro display_csv_fields()%}
 <div class="form-group">
-  <label for="txt-file-separator" class="form-label">File Separator</label>
-  <div class="input-group">
-    <input id="txt-file-separator"
-           name="file-separator"
-           type="text"
-           value="&#9;"
-           class="form-control"
-           maxlength="1" />
-    <span class="input-group-btn">
-      <button id="btn-reset-file-separator" class="btn btn-info">Reset Default</button>
+  <div class="row mb-3">
+    <label for="txt-file-separator" class="col-sm-3 col-form-label">
+      File Separator</label>
+    <div class="col-sm-9">
+      <div class="input-group">
+        <input id="txt-file-separator"
+               name="file-separator"
+               type="text"
+               value="&#9;"
+               class="form-control"
+               maxlength="1" />
+        <span class="input-group-btn">
+          <button id="btn-reset-file-separator" class="btn btn-info">Reset Default</button>
+        </span>
+      </div>
+    </div>
+    <span class="form-text text-muted">
+      Provide the character that separates the fields in your file(s). It should
+      be the same character for all files (if more than one is provided).<br />
+      A tab character will be assumed if you leave this field blank. See
+      <a href="#docs-file-separator"
+         title="Documentation for file-separator characters">
+        documentation for more information</a>.
     </span>
   </div>
-  <span class="form-text text-muted">
-    Provide the character that separates the fields in your file(s). It should
-    be the same character for all files (if more than one is provided).<br />
-    A tab character will be assumed if you leave this field blank. See
-    <a href="#docs-file-separator"
-       title="Documentation for file-separator characters">
-      documentation for more information</a>.
-  </span>
 </div>
 
 <div class="form-group">
-  <label for="txt-file-comment-character" class="form-label">File Comment-Characters</label>
-  <div class="input-group">
-    <input id="txt-file-comment-character"
-           name="file-comment-character"
-           type="text"
-           value="#"
-           class="form-control" />
-    <span class="input-group-btn">
-      <button id="btn-reset-file-comment-character" class="btn btn-info">
-        Reset Default</button>
+  <div class="row mb-3">
+    <label for="txt-file-comment-character" class="col-sm-3 col-form-label">File Comment-Characters</label>
+    <div class="col-sm-9">
+      <div class="input-group">
+        <input id="txt-file-comment-character"
+               name="file-comment-character"
+               type="text"
+               value="#"
+               class="form-control" />
+        <span class="input-group-btn">
+          <button id="btn-reset-file-comment-character" class="btn btn-info">
+            Reset Default</button>
+        </span>
+      </div>
+    </div>
+    <span class="form-text text-muted">
+      This specifies that lines that begin with the character(s) provided will be
+      considered comment lines and ignored in their entirety. See
+      <a href="#docs-file-comment-character"
+         title="Documentation for comment characters">
+        documentation for more information</a>.
     </span>
   </div>
-  <span class="form-text text-muted">
-    This specifies that lines that begin with the character(s) provided will be
-    considered comment lines and ignored in their entirety. See
-    <a href="#docs-file-comment-character"
-       title="Documentation for comment characters">
-      documentation for more information</a>.
-  </span>
 </div>
 
 <div class="form-group">
-  <label for="txt-file-na" class="form-label">File "No-Value" Indicators</label>
-  <div class="input-group">
-    <input id="txt-file-na"
-           name="file-na"
-           type="text"
-           value="- NA N/A"
-           class="form-control" />
-    <span class="input-group-btn">
-      <button id="btn-reset-file-na" class="btn btn-info">Reset Default</button>
-    </span>
+  <div class="row mb-3">
+    <label for="txt-file-na" class="col-sm-3 col-form-label">File "No-Value" Indicators</label>
+    <div class="col-sm-9">
+      <div class="input-group">
+        <input id="txt-file-na"
+               name="file-na"
+               type="text"
+               value="- NA N/A"
+               class="form-control" />
+        <span class="input-group-btn">
+          <button id="btn-reset-file-na" class="btn btn-info">Reset Default</button>
+        </span>
+      </div>
+    </div>
+    <span class="form-text text-muted">
+      This specifies strings in your file indicate that there is no value for a
+      particular cell (a cell is where a column and row intersect). Provide a
+      space-separated list of strings if you have more than one way of
+      indicating no values. See
+      <a href="#docs-file-na" title="Documentation for no-value fields">
+        documentation for more information</a>.</span>
   </div>
-  <span class="form-text text-muted">
-    This specifies strings in your file indicate that there is no value for a
-    particular cell (a cell is where a column and row intersect). Provide a
-    space-separated list of strings if you have more than one way of
-    indicating no values. See
-    <a href="#docs-file-na" title="Documentation for no-value fields">
-      documentation for more information</a>.</span>
 </div>
 {%endmacro%}