Implement improvements suggested by @acenteno.

1 files changed, 44 insertions, 28 deletions

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%}