Implement improvements suggested by @acenteno.

1 files changed, 29 insertions, 19 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%}