Implement improvements suggested by @acenteno.

2 files changed, 73 insertions, 47 deletions

diff --git a/uploader/templates/populations/macro-select-population.html b/uploader/templates/populations/macro-select-population.html
index b7ff088..c223776 100644
--- a/uploader/templates/populations/macro-select-population.html
+++ b/uploader/templates/populations/macro-select-population.html
@@ -1,28 +1,41 @@
+{%from "macro-step-indicator.html" import step_indicator%}
+
 {%macro select_population_form(form_action, species, populations)%}
 <form method="GET" action="{{form_action}}" class="form-horizontal">
 
+  <h2>{{step_indicator("2")}} What population do you want to work with?</h2>
+
   {%if populations | length != 0%}
 
-  <label class="control-label">What population will you be working with?</label>
-  <table id="tbl-select-population" class="table compact stripe"
-         data-populations-list='{{populations | tojson}}'>
-    <thead>
-      <tr>
-        <th></th>
-        <th>Population</th>
-      </tr>
-    </thead>
-
-    <tbody></tbody>
-  </table>
-
-  <div>
-    <label class="control-label">
-      <input type="radio" name="population_id" value="CREATE-POPULATION" />
+  <p class="form-text">Search for, and select the population from the table
+    below and click "Continue"</p>
+
+  <div class="radio">
+    <label class="control-label" for="rdo-cant-find-population">
+      <input type="radio" id="rdo-cant-find-population"
+             name="population_id" value="CREATE-POPULATION" />
       I cannot find the population I want &mdash; create it!
     </label>
   </div>
 
+  <div class="col-sm-offset-10 col-sm-2">
+    <input type="submit" value="continue" class="btn btn-primary" />
+  </div>
+
+  <div style="margin-top:3em;">
+    <table id="tbl-select-population" class="table compact stripe"
+           data-populations-list='{{populations | tojson}}'>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Population</th>
+        </tr>
+      </thead>
+
+      <tbody></tbody>
+    </table>
+  </div>
+
   {%else%}
   <p class="form-text">
     There are no populations currently defined for {{species['FullName']}}
@@ -31,8 +44,5 @@
   <input type="hidden" name="population_id" value="CREATE-POPULATION" />
   {%endif%}
 
-  <div class="col-sm-offset-2 col-sm-10">
-    <input type="submit" value="continue" class="btn btn-primary" />
-  </div>
 </form>
 {%endmacro%}
diff --git a/uploader/templates/species/macro-select-species.html b/uploader/templates/species/macro-select-species.html
index c0a1357..3714ae4 100644
--- a/uploader/templates/species/macro-select-species.html
+++ b/uploader/templates/species/macro-select-species.html
@@ -1,43 +1,59 @@
+{%from "macro-step-indicator.html" import step_indicator%}
+
 {%macro select_species_form(form_action, species)%}
 <form method="GET" action="{{form_action}}" class="form-horizontal">
 
+  <h2>{{step_indicator("1")}} What species do you want to work with?</h2>
+
   {%if species | length != 0%}
 
-  <label class="control-label">What species do you want to work with?</label>
-  <table id="tbl-select-species" class="table compact stripe"
-         data-species-list='{{species | tojson}}'>
-    <div class="">
-      <thead>
-        <tr>
-          <th></th>
-          <th>Species Name</th>
-        </tr>
-      </thead>
-
-      <tbody></tbody>
-  </table>
-
-  <div class="form-group">
-    <label class="control-label" for="rdo-cant-find-species">
-      <input id="rdo-cant-find-species" type="radio" name="species_id" value="CREATE-SPECIES" />
-      I cannot find the species I want &mdash; create it!</label>
+  <p class="form-text">Search for, and select the species from the table below
+    and click "Continue"</p>
+
+  <div class="radio">
+    <label for="rdo-cant-find-species"
+           style="font-weight: 1;">
+      <input id="rdo-cant-find-species" type="radio" name="species_id"
+             value="CREATE-SPECIES" />
+      I could not find the species I want (create it).
+    </label>
+  </div>
+
+  <div class="col-sm-offset-10 col-sm-2">
+    <input type="submit"
+           class="btn btn-primary"
+           value="continue" />
   </div>
 
-  {%else%}
+  <div style="margin-top:3em;">
+    <table id="tbl-select-species" class="table compact stripe"
+           data-species-list='{{species | tojson}}'>
+      <div class="">
+        <thead>
+          <tr>
+            <th></th>
+            <th>Species Name</th>
+          </tr>
+        </thead>
+
+        <tbody></tbody>
+    </table>
+    </div>
+
+    {%else%}
 
-  <div class="form-group">
     <label class="control-label" for="rdo-cant-find-species">
-      <input id="rdo-cant-find-species" type="radio" name="species_id" value="CREATE-SPECIES" />
+      <input id="rdo-cant-find-species" type="radio" name="species_id"
+             value="CREATE-SPECIES" />
       There are no species to select from. Create the first one.</label>
-  </div>
 
-  {%endif%}
+    <div class="col-sm-offset-10 col-sm-2">
+      <input type="submit"
+             class="btn btn-primary col-sm-offset-1"
+             value="continue" />
+    </div>
 
-  <div class="form-group">
-    <input type="submit"
-           class="btn btn-primary col-sm-offset-1"
-           value="continue" />
-  </div>
+    {%endif%}
 
 </form>
 {%endmacro%}