From 8eb63f5d5091eb16fd68fe3de01e18501db9a2cc Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Mon, 27 Jan 2025 10:21:43 -0600
Subject: Use horizontal-form which @robw seems to prefer.

---
 uploader/templates/phenotypes/edit-phenotype.html | 157 +++++++++++++---------
 1 file changed, 90 insertions(+), 67 deletions(-)

diff --git a/uploader/templates/phenotypes/edit-phenotype.html b/uploader/templates/phenotypes/edit-phenotype.html
index 5fbd220..0f267e4 100644
--- a/uploader/templates/phenotypes/edit-phenotype.html
+++ b/uploader/templates/phenotypes/edit-phenotype.html
@@ -114,7 +114,7 @@
 
 <div class="row">
   <h3 class="subheading">phenotype data</h3>
-  <form id="frm-edit-phenotype-data">
+  <form id="frm-edit-phenotype-data" class="form-horizontal">
     <div style="max-height: 23.37em;overflow-y: scroll;">
     <table class="table table-striped table-responsive table-form-table">
       <thead style="position: sticky; top: 0;">
@@ -159,113 +159,136 @@
     </table>
     </div>
     <div class="form-group">
-      <input type="submit"
-             name="submit"
-             class="btn btn-primary not-implemented"
-             value="update data" />
+      <div class="col-sm-offset-2 col-sm-10">
+        <input type="submit"
+               name="submit"
+               class="btn btn-primary not-implemented"
+               value="update data" />
+      </div>
     </div>
   </form>
 </div>
 
+
 <div class="row">
   <h3 class="subheading">publication information</h3>
   <p>Use the form below to update the publication information for this
     phenotype.</p>
   <form id="frm-edit-phenotype-pub-data"
+        class="form-horizontal"
         method="POST"
         action="#">
     <div class="form-group">
-      <label for="txt-pubmed-id" class="form-label">Pubmed ID</label>
-      <input id="txt-pubmed-id" name="pubmed-id" type="text"
-             class="form-control" />
-      <span class="form-text text-muted">
-        Enter your publication's PubMed ID.
-      </span>
+      <label for="txt-pubmed-id" class="control-label col-sm-2">Pubmed ID</label>
+      <div class="col-sm-10">
+        <input id="txt-pubmed-id" name="pubmed-id" type="text"
+               class="form-control" />
+        <span class="form-text text-muted">
+          Enter your publication's PubMed ID.</span>
+      </div>
     </div>
 
     <div class="form-group">
-      <label for="txt-publication-authors" class="form-label">Authors</label>
-      <input id="txt-publication-authors" name="publication-authors"
-             type="text" class="form-control" />
-      <span class="form-text text-muted">
-        Enter the authors.</span>
+      <label for="txt-publication-authors" class="control-label col-sm-2">Authors</label>
+      <div class="col-sm-10">
+        <input id="txt-publication-authors" name="publication-authors"
+               type="text" class="form-control" />
+        <span class="form-text text-muted">
+          Enter the authors.</span>
+      </div>
     </div>
 
     <div class="form-group">
-      <label for="txt-publication-title" class="form-label">
+      <label for="txt-publication-title" class="control-label col-sm-2">
         Publication Title</label>
-      <input id="txt-publication-title" name="publication-title" type="text"
-             class="form-control" />
-      <span class="form-text text-muted">
-        Enter your publication's title.</span>
+      <div class="col-sm-10">
+        <input id="txt-publication-title" name="publication-title" type="text"
+               class="form-control" />
+        <span class="form-text text-muted">
+          Enter your publication's title.</span>
+      </div>
     </div>
 
     <div class="form-group">
-      <label for="txt-publication-abstract" class="form-label">
+      <label for="txt-publication-abstract" class="control-label col-sm-2">
         Publication Abstract</label>
-      <textarea id="txt-publication-abstract" name="publication-abstract"
-                class="form-control" rows="10"></textarea>
-      <span class="form-text text-muted">
-        Enter the abstract for your publication.</span>
+      <div class="col-sm-10">
+        <textarea id="txt-publication-abstract" name="publication-abstract"
+                  class="form-control" rows="10"></textarea>
+        <span class="form-text text-muted">
+          Enter the abstract for your publication.</span>
+      </div>
     </div>
 
     <div class="form-group">
-      <label for="txt-publication-journal" class="form-label">Journal</label>
-      <input id="txt-publication-journal" name="journal" type="text"
-             class="form-control" />
-      <span class="form-text text-muted">
-        Enter the name of the journal where your work was published.</span>
+      <label for="txt-publication-journal" class="control-label col-sm-2">Journal</label>
+      <div class="col-sm-10">
+        <input id="txt-publication-journal" name="journal" type="text"
+               class="form-control" />
+        <span class="form-text text-muted">
+          Enter the name of the journal where your work was published.</span>
+      </div>
     </div>
 
     <div class="form-group">
-      <label for="txt-publication-volume" class="form-label">Volume</label>
-      <input id="txt-publication-volume" name="publication-volume" type="text"
-             class="form-control" />
-      <span class="form-text text-muted">
-        Enter the volume in the following format &hellip;</span>
+      <label for="txt-publication-volume" class="control-label col-sm-2">Volume</label>
+      <div class="col-sm-10">
+        <input id="txt-publication-volume" name="publication-volume" type="text"
+               class="form-control" />
+        <span class="form-text text-muted">
+          Enter the volume in the following format &hellip;</span>
+      </div>
     </div>
 
     <div class="form-group">
-      <label for="txt-publication-pages" class="form-label">Pages</label>
-      <input id="txt-publication-pages" name="publication-pages" type="text"
-             class="form-control" />
-      <span class="form-text text-muted">
-        Enter the journal volume where your work was published.</span>
+      <label for="txt-publication-pages" class="control-label col-sm-2">Pages</label>
+      <div class="col-sm-10">
+        <input id="txt-publication-pages" name="publication-pages" type="text"
+               class="form-control" />
+        <span class="form-text text-muted">
+          Enter the journal volume where your work was published.</span>
+      </div>
     </div>
 
     <div class="form-group">
-      <label for="select-publication-month" class="form-label">
+      <label for="select-publication-month" class="control-label col-sm-2">
         Publication Month</label>
-      <select id="select-publication-month" name="publication-month"
-              class="form-control">
-        {%for month in monthnames%}
-        <option value="{{month | lower}}"
-                {%if current_month | lower == month | lower%}
-                selected="selected"
-                {%endif%}>{{month | capitalize}}</option>
-        {%endfor%}
-      </select>
-      <span class="form-text text-muted">
-        Select the month when the work was published.
-        <span class="text-danger">
-          This cannot be before, say 1600 and cannot be in the future!</span></span>
+      <div class="col-sm-10">
+        <select id="select-publication-month" name="publication-month"
+                class="form-control">
+          {%for month in monthnames%}
+          <option value="{{month | lower}}"
+                  {%if current_month | lower == month | lower%}
+                  selected="selected"
+                  {%endif%}>{{month | capitalize}}</option>
+          {%endfor%}
+        </select>
+        <span class="form-text text-muted">
+          Select the month when the work was published.
+          <span class="text-danger">
+            This cannot be before, say 1600 and cannot be in the future!</span></span>
+      </div>
     </div>
 
     <div class="form-group">
-      <label for="txt-publication-year" class="form-label">Publication Year</label>
-      <input id="txt-publication-year" name="publication-year" type="text"
-             class="form-control" value="{{current_year}}" />
-      <span class="form-text text-muted">
-        Enter the year your work was published.
-        <span class="text-danger">
-          This cannot be before, say 1600 and cannot be in the future!</span>
-      </span>
+      <label for="txt-publication-year" class="control-label col-sm-2">Publication Year</label>
+      <div class="col-sm-10">
+        <input id="txt-publication-year" name="publication-year" type="text"
+               class="form-control" value="{{current_year}}" />
+        <span class="form-text text-muted">
+          Enter the year your work was published.
+          <span class="text-danger">
+            This cannot be before, say 1600 and cannot be in the future!</span>
+        </span>
+      </div>
     </div>
     <div class="form-group">
-      <input type="submit"
-             name="submit"
-             class="btn btn-primary not-implemented"
-             value="update publication" />
+      <div class="col-sm-offset-2 col-sm-10">
+        <input type="submit"
+               name="submit"
+               class="btn btn-primary not-implemented"
+               value="update publication" />
+      </div>
     </div>
   </form>
 </div>
-- 
cgit v1.2.3