Use horizontal-form for UI

Update the macro templates to use the horizontal-form paradigm to fit
in with what Rob likes.

2 files changed, 44 insertions, 39 deletions

diff --git a/uploader/templates/populations/macro-select-population.html b/uploader/templates/populations/macro-select-population.html
index af4fd3a..ef74ac3 100644
--- a/uploader/templates/populations/macro-select-population.html
+++ b/uploader/templates/populations/macro-select-population.html
@@ -1,29 +1,32 @@
 {%macro select_population_form(form_action, populations)%}
-<form method="GET" action="{{form_action}}">
+<form method="GET" action="{{form_action}}" class="form-horizontal">
   <legend>Select Population</legend>
 
   <div class="form-group">
-    <label for="select-population" class="form-label">Select Population</label>
-    <select id="select-population"
-            name="population_id"
-            class="form-control"
-            required="required">
-      <option value="">Select Population</option>
-      {%for family in populations%}
-      <optgroup {%if family[0][1] is not none%}
-                label="{{family[0][1]}}"
-                {%else%}
-                label="Undefined"
-                {%endif%}>
-        {%for population in family[1]%}
-        <option value="{{population.Id}}">{{population.FullName}}</option>
+    <label for="select-population" class="control-label col-sm-2">
+      Population</label>
+    <div class="col-sm-10">
+      <select id="select-population"
+              name="population_id"
+              class="form-control"
+              required="required">
+        <option value="">Select Population</option>
+        {%for family in populations%}
+        <optgroup {%if family[0][1] is not none%}
+                  label="{{family[0][1]}}"
+                  {%else%}
+                  label="Undefined"
+                  {%endif%}>
+          {%for population in family[1]%}
+          <option value="{{population.Id}}">{{population.FullName}}</option>
+          {%endfor%}
+        </optgroup>
         {%endfor%}
-      </optgroup>
-      {%endfor%}
-    </select>
+      </select>
+    </div>
   </div>
 
-  <div class="form-group">
+  <div class="col-sm-offset-2 col-sm-10">
     <input type="submit" value="Select" class="btn btn-primary" />
   </div>
 </form>
diff --git a/uploader/templates/species/macro-select-species.html b/uploader/templates/species/macro-select-species.html
index dd086c0..36ed102 100644
--- a/uploader/templates/species/macro-select-species.html
+++ b/uploader/templates/species/macro-select-species.html
@@ -1,29 +1,31 @@
 {%macro select_species_form(form_action, species)%}
 {%if species | length > 0%}
-<form method="GET" action="{{form_action}}">
+<form method="GET" action="{{form_action}}" class="form-horizontal">
   <div class="form-group">
-    <label for="select-species" class="form-label">Species</label>
-    <select id="select-species"
-            name="species_id"
-            class="form-control"
-            required="required">
-      <option value="">Select Species</option>
-      {%for group in species%}
-      {{group}}
-      <optgroup {%if group[0][1] is not none%}
-                label="{{group[0][1].capitalize()}}"
-                {%else%}
-                label="Undefined"
-                {%endif%}>
-        {%for aspecies in group[1]%}
-        <option value="{{aspecies.SpeciesId}}">{{aspecies.MenuName}}</option>
+    <label for="select-species" class="control-label col-sm-2">Species</label>
+    <div class="col-sm-10">
+      <select id="select-species"
+              name="species_id"
+              class="form-control"
+              required="required">
+        <option value="">Select Species</option>
+        {%for group in species%}
+        {{group}}
+        <optgroup {%if group[0][1] is not none%}
+                  label="{{group[0][1].capitalize()}}"
+                  {%else%}
+                  label="Undefined"
+                  {%endif%}>
+          {%for aspecies in group[1]%}
+          <option value="{{aspecies.SpeciesId}}">{{aspecies.MenuName}}</option>
+          {%endfor%}
+        </optgroup>
         {%endfor%}
-      </optgroup>
-      {%endfor%}
-    </select>
+      </select>
+    </div>
   </div>
 
-  <div class="form-group">
+  <div class="col-sm-offset-2 col-sm-10">
     <input type="submit" value="Select" class="btn btn-primary" />
   </div>
 </form>