Add border around CSV fields in macro

Add the border around the CSV fields in the macro file itself so that
we have a consistent UI.

2 files changed, 76 insertions, 69 deletions

diff --git a/uploader/templates/genotypes/add-genotypes-records-csv.html b/uploader/templates/genotypes/add-genotypes-records-csv.html
index 6ebc005..250df67 100644
--- a/uploader/templates/genotypes/add-genotypes-records-csv.html
+++ b/uploader/templates/genotypes/add-genotypes-records-csv.html
@@ -10,10 +10,12 @@
   <p>You can add new genotype records here.</p>
 </div>
 
-<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()}}
+{{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</div>
   <div class="form-group">
     <div class="non-resumable-elements">
       <div class="row mb-3">
diff --git a/uploader/templates/macro-csv-fields.html b/uploader/templates/macro-csv-fields.html
index b58a6d0..7015712 100644
--- a/uploader/templates/macro-csv-fields.html
+++ b/uploader/templates/macro-csv-fields.html
@@ -1,80 +1,85 @@
 {%macro display_csv_fields()%}
-<div class="form-group">
-  <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 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">CSV Details</div>
+  <div class="form-group">
+    <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>
 
-<div class="form-group">
-  <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 class="form-group">
+    <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>
 
-<div class="form-group">
-  <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 class="form-group">
+    <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>
 </div>
 {%endmacro%}