[Zurich] 2-column layout for printed reports

 - Involves a not-as-bad-as-it-looks refactoring of the HTML markup for
    report_edit.html and report_edit-sdm.html, with some actual indentation
    so you can tell what's going on, and definition lists to give the
    label/content pairs more logical structure.
 - Also replaces .report-edit-action with .print-only and .screen-only
    which are less semantic, but much more obvious to newcomers.
 - Allows SDMs to enlarge images on report edit page
 - Displays category in report edit form on screen as well as in print

See mysociety/FixMyStreet-Commercial#677

2 files changed, 241 insertions, 197 deletions

diff --git a/templates/web/zurich/admin/report_edit-sdm.html b/templates/web/zurich/admin/report_edit-sdm.html
index d71519539..aeb28e3a7 100644
--- a/templates/web/zurich/admin/report_edit-sdm.html
+++ b/templates/web/zurich/admin/report_edit-sdm.html
@@ -1,4 +1,5 @@
 [%
+    PROCESS "report/photo-js.html";
     PROCESS "maps/zurich.html";
     PROCESS 'admin/header.html'
         title = tprintf(loc('Editing problem %d'), problem.id ),
@@ -15,101 +16,116 @@
 
 <div class="admin-report-edit admin-report-edit--details">
 
-<ul class="no-bullets">
-<li>&raquo; <a href="[% c.uri_for_email( '/report', problem.id ) %]">[% loc('View report on site' )%]</a></li>
-
-<li>&raquo; <a href="http://webgis.intra.stzh.ch/AV_Online/Direct.asp?Map=AV&Search=Koord&West=[% problem.local_coords.0 %]&Nord=[% problem.local_coords.1 %]&B=300" target="_blank">Standort in AV-Online anzeigen</a></li>
-
-<li><span class="mock-label">[% loc('Details:') %]</span> [% problem.detail | html %]
-[% IF problem.extra.original_detail %]
-<br>[%
-    SET safe = problem.extra.original_detail | html;
-    tprintf( loc('originally entered: &ldquo;%s&rdquo;'), safe )
-%]
-[% END %]
-</li>
-
-<li><span class="mock-label">[% loc('Category:') %]</span> [% problem.category | html %] </li>
-<li><span class="mock-label">[% loc('State:') %]</span> [% states.${problem.state} %]</li>
-
-<li>
-    <strong>[% PROCESS format_date this_date=problem.created %] [% problem.created.hms %]</strong>
-    <br>
-    [% problem.local_coords.join(',') %]
-    <input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% problem.latitude %]">
-    <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% problem.longitude %]">
-    <br>
-    [% IF problem.used_map %]
-      [% loc('Used map') %]
-    [% ELSE %]
-      [% loc("Didn't use map") %]
-    [% END %]
-    <br>
-    [%
+<dl>
+
+    <dd class="screen-only">&raquo; <a href="[% c.uri_for_email( '/report', problem.id ) %]">[% loc('View report on site' )%]</a></dd>
+
+    <dd class="screen-only">&raquo; <a href="http://webgis.intra.stzh.ch/AV_Online/Direct.asp?Map=AV&Search=Koord&West=[% problem.local_coords.0 %]&Nord=[% problem.local_coords.1 %]&B=300" target="_blank">Standort in AV-Online anzeigen</a></dd>
+
+    <dt><span class="mock-label">[% loc('Details:') %]</span></dt>
+    <dd>[% problem.detail | html %]</dd>
+  [% IF problem.extra.original_detail %]
+    <dd>[%
+      SET safe = problem.extra.original_detail | html;
+      tprintf( loc('originally entered: &ldquo;%s&rdquo;'), safe )
+    %]</dd>
+  [% END %]
+
+    <dt class="print-only">[% loc('Reported:') %] <!-- Meldedatum --></dt>
+    <dd class="screen-no-space-after">
+        <strong>[% PROCESS format_date this_date=problem.created %] [% problem.created.hms %]</strong>
+    </dd>
+    <dt class="print-only">[% loc('Coordinates:') %] <!-- Koordinaten --></dt>
+    <dd class="screen-no-space-after print-no-space-after">
+        [% problem.local_coords.join(',') %]
+        <input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% problem.latitude %]">
+        <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% problem.longitude %]">
+    </dd>
+    <dd class="screen-no-space-after print-no-space-after">
+      [% IF problem.used_map %]
+        [% loc('Used map') %]
+      [% ELSE %]
+        [% loc("Didn't use map") %]
+      [% END %]
+    </dd>
+    <dd>[%
         SET safe = problem.postcode | html;
         tprintf( loc('originally entered: &ldquo;%s&rdquo;'), safe )
-    %]
-</li>
-
-<li>
-    <strong>[% IF problem.name %][% problem.name | html %][% ELSE %][% loc('(No name)') %][% END %]</strong>
-    <br>
-    [% problem.user.email | html %]
-    [% IF NOT problem.extra.email_confirmed %]<span class="error">[% loc('Unconfirmed') %]</span>[% END %]
-    <br>
-    [% IF problem.user.phone %][% problem.user.phone | html %][% ELSE %]<em>[% loc('(No phone number)') %]</em>[% END %]
-</li>
-
-<li>
-    <label class="admin-label--inline">[% loc('Time spent (in minutes):') %]</label> [% problem.get_time_spent %]
-</li>
-
-[% IF problem.photo %]
-[% FOR photo IN problem.get_photoset(c).images %]
-<li>
-    <img alt="Photo of this report" src="[% c.cobrand.base_url %]/photo/[% photo.0 %].temp.jpeg">
-</li>
-[% END %]
-[% END %]
-</ul>
+    %]</dd>
+
+    <dt class="print-only">[% loc('Reported by:') %] <!-- Meldende Person --></dt>
+    <dd>
+        <strong>[% IF problem.name %][% problem.name | html %][% ELSE %][% loc('(No name)') %][% END %]</strong>
+        <input type='hidden' name='name' id='name' value='[% problem.name | html %]'>
+        <br>
+        [% problem.user.email | html %]
+        [% IF NOT problem.extra.email_confirmed %]<span class="error">[% loc('Unconfirmed') %]</span>[% END %]
+        <input type='hidden' id='email' name='email' value='[% problem.user.email | html %]'>
+        <br>
+        [% IF problem.user.phone %][% problem.user.phone | html %][% ELSE %]<em>[% loc('(No phone number)') %]</em>[% END %]
+    </dd>
+
+    <dt>[% loc('Category:') %] <!-- Kategorie --></dt>
+    <dd>[% problem.category | html %]</dd>
+
+    <dt class="print-only">[% loc('State:') %] <!-- Status --></dt>
+    <dd class="print-only">[% states.${problem.state} %]</dd>
+
+    <dt>[% loc('Time spent (in minutes):') %]</dt>
+    <dd>[% problem.get_time_spent %]</dd>
+
+    <dd>
+    [% status_message %]
+    </dd>
+
+  [% IF problem.photo %]
+    <dd>
+      [% FOR photo IN problem.get_photoset(c).images %]
+        <div class="update-img">
+            <a href="[% c.cobrand.base_url %]/photo/[% photo.0 %].fulltemp.jpeg" rel="fancy">
+                <img alt="Photo of this report" src="[% c.cobrand.base_url %]/photo/[% photo.0 %].temp.jpeg">
+                <span>zoom</span>
+            </a>
+        </div>
+      [% END %]
+     </dd>
+  [% END %]
+
+</dl>
 
 </div>
 
 <div class="admin-report-edit admin-report-edit--interact">
 
-[% status_message %]
-
-<p align="right"><input type="submit" name="send_back" value="[% loc('Not for my subdivision') %]"></p>
-<p align="right"><input type="submit" name="not_contactable" value="[% loc('Customer not contactable') %]"></p>
-
-<ul class="no-bullets">
-<li><label for="new_internal_note">[% loc('New internal note:') %]</label>
-<textarea name='new_internal_note' id='new_internal_note' cols=60 rows=4></textarea></li>
-
-<li><label for="status_update">[% loc('New note to DM:') %]</label>
-<textarea name='status_update' id='status_update' cols=60 rows=4></textarea></li>
+<p align="right" class="screen-only"><input type="submit" name="send_back" value="[% loc('Not for my subdivision') %]"></p>
+<p align="right" class="screen-only"><input type="submit" name="not_contactable" value="[% loc('Customer not contactable') %]"></p>
+
+<ul class="no-bullets screen-only">
+    <li>
+        <label for="new_internal_note">[% loc('New internal note:') %]</label>
+        <textarea name='new_internal_note' id='new_internal_note' cols=60 rows=4></textarea>
+    </li>
+    <li>
+        <label for="status_update">[% loc('New note to DM:') %]</label>
+        <textarea name='status_update' id='status_update' cols=60 rows=4></textarea>
+    </li>
 </ul>
 
-<p class="report-edit-action">
-<label class="admin-label--inline" for="time_spent">[% loc('Time spent (in minutes):') %]</label>
-<input type="text" name="time_spent" id="form_time_spent" style="width: 4em" value="0">
-<script>
-    $(function () {
-        $('#form_time_spent').spinner({
-            spin: function (e, ui) {
-                if (ui.value < 0) { return false }
-            }
+<p class="screen-only">
+    <label for="time_spent">[% loc('Time spent (in minutes):') %]</label>
+    <input type="text" name="time_spent" id="form_time_spent" style="width: 4em" value="0">
+    <script>
+        $(function () {
+            $('#form_time_spent').spinner({
+                spin: function (e, ui) {
+                    if (ui.value < 0) { return false }
+                }
+            });
         });
-        setTimeout(function(){
-          $('.message-updated').slideUp(250, function(){
-            $(this).remove();
-          });
-        }, 5000);
-    });
-</script>
+    </script>
 </p>
 
-<p class="cf">
+<p class="cf screen-only">
     <input style="float:left" type="submit" name="Submit changes" value="[% loc('Submit changes') %]" >
     <input style="float:right" type="submit" name="no_more_updates" value="[% loc('No further updates') %]">
 </p>
diff --git a/templates/web/zurich/admin/report_edit.html b/templates/web/zurich/admin/report_edit.html
index 78ac0d32d..093f9064b 100644
--- a/templates/web/zurich/admin/report_edit.html
+++ b/templates/web/zurich/admin/report_edit.html
@@ -18,95 +18,108 @@
 
 <div class="admin-report-edit admin-report-edit--details">
 
-<ul class="no-bullets">
-<li class="report-edit-action">&raquo; <a href="[% c.uri_for_email( '/report', problem.id ) %]">[% loc('View report on site' )%]</a></li>
+<dl>
+    <dd class="screen-only">&raquo; <a href="[% c.uri_for_email( '/report', problem.id ) %]">[% loc('View report on site' )%]</a></dd>
 
-<li class="report-edit-action">&raquo; <a href="http://webgis.intra.stzh.ch/AV_Online/Direct.asp?Map=AV&Search=Koord&West=[% problem.local_coords.0 %]&Nord=[% problem.local_coords.1 %]&B=300" target="_blank">Standort in AV-Online anzeigen</a></li>
+    <dd class="screen-only">&raquo; <a href="http://webgis.intra.stzh.ch/AV_Online/Direct.asp?Map=AV&Search=Koord&West=[% problem.local_coords.0 %]&Nord=[% problem.local_coords.1 %]&B=300" target="_blank">Standort in AV-Online anzeigen</a></dd>
 
-[% IF c.cobrand.problem_is_closed(problem) %]
-    <li><span class="mock-label">[% loc('Details:') %]</span> [% problem.detail | html %]
+  [% IF c.cobrand.problem_is_closed(problem) %]
+    <dt><span class="mock-label">[% loc('Details:') %]</span></dt>
+    <dd>[% problem.detail | html %]</dd>
     [% IF problem.extra.original_detail %]
-    <br>[%
-        SET detail_safe = problem.extra.original_detail | html;
-        tprintf( loc('originally entered: &ldquo;%s&rdquo;'), detail_safe )
-    %]
+      <dd>[%
+          SET detail_safe = problem.extra.original_detail | html;
+          tprintf( loc('originally entered: &ldquo;%s&rdquo;'), detail_safe )
+      %]</dd>
     [% END %]
-    </li>
-[% ELSE %]
-    <li><label for='title'>[% loc('Subject:') %]</label> <input size=60 type='text' id='title' name='title' value='[% problem.title | html %]'></li>
-    <li><label for='detail'>[% loc('Details:') %]</label>
-    <textarea name='detail' id='detail' cols=60 rows=4>[% problem.detail | html %]</textarea>
-    [% IF problem.extra.original_detail %]
-    [%
-        SET detail_safe = problem.extra.original_detail | html;
-        tprintf( loc('originally entered: &ldquo;%s&rdquo;'), detail_safe )
-    %]
-    [% END %]
-    </li>
-[% END %]
+  [% ELSE %]
 
-[%# repeated as static in this column %]
-<li><span class="mock-label">[% loc('Category:') %]</span> [% problem.category | html %] </li>
+    <dt><label for='title'>[% loc('Subject:') %]</label></dt>
+    <dd class="screen-only"><input size=60 type='text' id='title' name='title' value='[% problem.title | html %]'></dd>
+    <dd class="print-only">[% problem.title | html %]</dd>
 
-<li>
-    <strong>[% PROCESS format_date this_date=problem.created %] [% problem.created.hms %]</strong>
-    <br>
-    [% problem.local_coords.join(',') %]
-    <input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% problem.latitude %]">
-    <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% problem.longitude %]">
-    <br>
-    [% IF problem.used_map %]
-      [% loc('Used map') %]
-    [% ELSE %]
-      [% loc("Didn't use map") %]
+    <dt><label for='detail'>[% loc('Details:') %]</label></dt>
+    <dd class="screen-only"><textarea name='detail' id='detail' cols=60 rows=4>[% problem.detail | html %]</textarea></dd>
+    <dd class="print-only">[% problem.detail | html %]</dd>
+
+    [% IF problem.extra.original_detail %]
+      <dd>[%
+          SET detail_safe = problem.extra.original_detail | html;
+          tprintf( loc('originally entered: &ldquo;%s&rdquo;'), detail_safe )
+      %]</dd>
     [% END %]
-    <br>
-    [%
+  [% END %]
+
+    <dt class="print-only">[% loc('Reported:') %] <!-- Meldedatum --></dt>
+    <dd class="screen-no-space-after">
+        <strong>[% PROCESS format_date this_date=problem.created %] [% problem.created.hms %]</strong>
+    </dd>
+    <dt class="print-only">[% loc('Coordinates:') %] <!-- Koordinaten --></dt>
+    <dd class="screen-no-space-after print-no-space-after">
+        [% problem.local_coords.join(',') %]
+        <input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% problem.latitude %]">
+        <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% problem.longitude %]">
+    </dd>
+    <dd class="screen-no-space-after print-no-space-after">
+      [% IF problem.used_map %]
+        [% loc('Used map') %]
+      [% ELSE %]
+        [% loc("Didn't use map") %]
+      [% END %]
+    </dd>
+    <dd>[%
         SET safe = problem.postcode | html;
         tprintf( loc('originally entered: &ldquo;%s&rdquo;'), safe )
-    %]
-</li>
+    %]</dd>
 
-[% SET fields = problem.get_extra_fields; IF fields.size %]
-<li>
-    [% FOR f IN fields %]
-    <strong>[% f.description %]</strong> [% f.value %]
-    <br>
+    [% SET fields = problem.get_extra_fields; IF fields.size %]
+    <dd>
+        [% FOR f IN fields %]
+        <strong>[% f.description %]</strong> [% f.value %]
+        <br>
+        [% END %]
+    </dd>
     [% END %]
-</li>
-[% END %]
 
-<li>
-    <strong>[% IF problem.name %][% problem.name | html %][% ELSE %][% loc('(No name)') %][% END %]</strong>
-    <input type='hidden' name='name' id='name' value='[% problem.name | html %]'>
-    <br>
-    [% problem.user.email | html %]
-    [% IF NOT problem.extra.email_confirmed %]<span class="error">[% loc('Unconfirmed') %]</span>[% END %]
-    <input type='hidden' id='email' name='email' value='[% problem.user.email | html %]'>
+    <dt class="print-only">[% loc('Reported by:') %] <!-- Meldende Person --></dt>
+    <dd>
+        <strong>[% IF problem.name %][% problem.name | html %][% ELSE %][% loc('(No name)') %][% END %]</strong>
+        <input type='hidden' name='name' id='name' value='[% problem.name | html %]'>
+        <br>
+        [% problem.user.email | html %]
+        [% IF NOT problem.extra.email_confirmed %]<span class="error">[% loc('Unconfirmed') %]</span>[% END %]
+        <input type='hidden' id='email' name='email' value='[% problem.user.email | html %]'>
+        <br>
+        [% IF problem.user.phone %][% problem.user.phone | html %][% ELSE %]<em>[% loc('(No phone number)') %]</em>[% END %]
+    </dd>
+
+    <dt>[% loc('Category:') %] <!-- Kategorie --></dt>
+    <dd>[% problem.category | html %]</dd>
+
+    <dt class="print-only">[% loc('State:') %] <!-- Status --></dt>
+    <dd class="print-only">[% states_trans.${problem.state} %]</dd>
+
+    <dt>[% loc('Time spent (in minutes):') %]</dt>
+    <dd>[% problem.get_time_spent %]</dd>
+
+  [% IF problem.photo %]
+    <dd>
+      [% FOR photo IN problem.get_photoset(c).images %]
+        <div class="update-img">
+            <a href="[% c.cobrand.base_url %]/photo/[% photo.0 %].fulltemp.jpeg" rel="fancy">
+                <img alt="Photo of this report" src="[% c.cobrand.base_url %]/photo/[% photo.0 %].temp.jpeg">
+                <span>zoom</span>
+            </a>
+        </div>
+        <input type="submit" name="rotate_photo_[% loop.index %]" value="[% loc('Rotate Left') %]" class="screen-only">
+        <input type="submit" name="rotate_photo_[% loop.index %]" value="[% loc('Rotate Right') %]" class="screen-only">
+      [% END %]
     <br>
-    [% IF problem.user.phone %][% problem.user.phone | html %][% ELSE %]<em>[% loc('(No phone number)') %]</em>[% END %]
-</li>
-
-<li>
-    <label class="admin-label--inline">[% loc('Time spent (in minutes):') %]</label> [% problem.get_time_spent %]
-</li>
-
-[% IF problem.photo %]
-<li>
-[% FOR photo IN problem.get_photoset(c).images %]
-<div class="update-img">
-    <a href="[% c.cobrand.base_url %]/photo/[% photo.0 %].fulltemp.jpeg" rel="fancy">
-        <img alt="Photo of this report" src="[% c.cobrand.base_url %]/photo/[% photo.0 %].temp.jpeg">
-    <span>zoom</span></a>
-</div>
-<input type="submit" name="rotate_photo_[% loop.index %]" value="[% loc('Rotate Left') %]" class="report-edit-action">
-<input type="submit" name="rotate_photo_[% loop.index %]" value="[% loc('Rotate Right') %]" class="report-edit-action">
-[% END %]
-<br>
-<input type="checkbox" id="publish_photo" name="publish_photo" value="1"[% ' checked' IF problem.extra.publish_photo %]  class="report-edit-action">
-<label class="inline report-edit-action" for="publish_photo">[% loc("Publish photo") %]</label></li>
-[% END %]
-</ul>
+    <input type="checkbox" id="publish_photo" name="publish_photo" value="1"[% ' checked' IF problem.extra.publish_photo %]  class="screen-only">
+    <label class="inline screen-only" for="publish_photo">[% loc("Publish photo") %]</label></li>
+  [% END %]
+
+</dl>
 
 </div>
 
@@ -114,35 +127,58 @@
 
 [% status_message %]
 
-<p>
-    <span class="mock-label">[% loc('State:') %]</span>
-    <select name="state"  id="state">
-        <option value="">--</option>
-    [% FOREACH s IN states %]
-        <option [% 'selected ' IF s.state == pstate %] value="[% s.state %]">[% s.trans %]</option>
-    [% END %]
-    </select>
-</p>
+<dl>
+
+    <dt class="screen-only">
+        <label for="new_internal_note">[% loc('New internal note:') %]</label>
+    </dt>
+    <dd class="screen-only">
+        <textarea name='new_internal_note' id='new_internal_note' cols=60 rows=4>[% new_internal_note | html %]</textarea>
+    </dd>
+
+    <dt class="screen-only">
+        <label for="time_spent">[% loc('Time spent (in minutes):') %]</label>
+    </dt>
+    <dd class="screen-only">
+      <input type="text" name="time_spent" id="form_time_spent" style="width: 4em" value="0">
+    </dd>
+
+    <dt class="screen-only">
+        <span class="mock-label">[% loc('State:') %]</span>
+    </dt>
+    <dd class="screen-only">
+        <select name="state"  id="state">
+            <option value="">--</option>
+          [% FOREACH s IN states %]
+            <option [% 'selected ' IF s.state == pstate %] value="[% s.state %]">[% s.trans %]</option>
+          [% END %]
+        </select>
+    </dd>
 
-[% IF problem.state == 'confirmed' %]
-<ul class="no-bullets">
+</dl>
 
-  <li class="assignation report-edit-action" id="assignation__category">
-    <label for="category">[% loc('Assign to category:') %]</label>
-    <select name="category" id="category" class="assignation__select">
-            <option value="">--</option>
-        [% FOREACH cat IN categories %]
-            <option value="[% cat %]">[% cat %]</option>
-        [% END %]
-    </select>
-  </li>
+<ul class="no-bullets screen-only">
+
+[% IF problem.state == 'confirmed' %]
+    <li class="assignation">
+        <div id="assignation__category">
+            <label for="category">[% loc('Assign to different category:') %]</label>
+            <select name="category" id="category">
+                <option value="">--</option>
+              [% FOREACH cat IN categories %]
+                <option value="[% cat %]">[% cat %]</option>
+              [% END %]
+            </select>
+        </div>
+    </li>
 
   [% list = FOR body IN bodies %]
     [%- NEXT UNLESS body.parent.id == c.user.from_body.id %]
     <option value="[% body.id %]"[% IF body.id == problem.bodies_str %] selected[% END %]>[% body.name %]</option>
   [% END %]
+
   [% IF admin_type != 'super' AND list %]
-    <li class="assignation report-edit-action" id="assignation__subdivision">
+    <li class="assignation" id="assignation__subdivision">
         <label for="body_subdivision">[% loc('Assign to subdivision:') %]</label>
         <select name="body_subdivision" id="body_subdivision" class="assignation__select">
             <option value="">--</option>
@@ -151,15 +187,15 @@
     </li>
   [% END %]
 
-</ul>
 [% END %]
+</ul>
 
 [%# 3rd party messages sent for Extern/Wunsch states %]
 [% SWITCH pstate %]
     [% CASE ['closed','investigating'] %]
-    <ul class="no-bullets assignation report-edit-action" id="assignation__external">
-    <li>
-        <label for="body_external">
+    <ul class="no-bullets screen-only">
+    <li class="assignation" id="assignation__external">
+    <label for="body_external">
           [% IF pstate == 'closed' %]
             [% loc('Assign to external body:') %]
           [% ELSE %]
@@ -190,7 +226,7 @@
 [%# Public response field shown for Ruckmeldung ausstehend states
   # (e.g. various pstates) %]
 [% IF problem.state == 'planned' %]
-    <ul class="no-bullets report-edit-action">
+    <ul class="no-bullets screen-only">
         <li id="status_update_container"><label for="status_update">
         [% SWITCH pstate %]
             [% CASE ['hidden', 'investigating', 'partial'] %][%# Hidden/Wish/Not contactable %]
@@ -207,17 +243,7 @@
     </ul>
 [% END %]
 
-<p class="report-edit-action">
-    <label for="new_internal_note">[% loc('New internal note:') %]</label>
-    <textarea name='new_internal_note' id='new_internal_note' cols=60 rows=4>[% new_internal_note | html %]</textarea>
-</p>
-
-<p class="report-edit-action">
-    <label class="admin-label--inline" for="time_spent">[% loc('Time spent (in minutes):') %]</label>
-    <input type="text" name="time_spent" id="form_time_spent" style="width: 4em" value="0">
-</p>
-
-<p align="right" class="report-edit-action">
+<p align="right" class="screen-only">
   [% IF show_publish_response %]
     [%# While we call this 'publish_response', the response will not actually
       # be "published" for these cases: Wish / Hidden / Not contactable (for these,
@@ -260,7 +286,9 @@ $(function(){
         });
     }, 5000);
 
-    $('.assignation__select').change(function(){
+    // When the user changes a select box, this bit of code
+    // makes the labels for the other two select boxes grey.
+    $('.assignation__select, .assignation select').change(function(){
         if (this.value == "") {
             $('.assignation').css('color', '#000');
         } else {