Restructure Inspect form into logical sections

IDs and locations at the top, then location-related actions (including
a new “navigate to this problem” button), then status and category
inputs (since these can have an effect on how we display the rest of
the form), then any status/category-related inputs, and finally inputs
for internal details like priority and traffic management.

10 files changed, 142 insertions, 88 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm
index 34392782b..cca2568f2 100644
--- a/perllib/FixMyStreet/App/Controller/Report.pm
+++ b/perllib/FixMyStreet/App/Controller/Report.pm
@@ -317,7 +317,7 @@ sub inspect : Private {
         my $update_text;
 
         if ($permissions->{report_inspect}) {
-            foreach (qw/detailed_location detailed_information traffic_information/) {
+            foreach (qw/detailed_information traffic_information/) {
                 $problem->set_extra_metadata( $_ => $c->get_param($_) );
             }
 
diff --git a/t/app/controller/report_inspect.t b/t/app/controller/report_inspect.t
index 3aea08eec..690a01ca1 100644
--- a/t/app/controller/report_inspect.t
+++ b/t/app/controller/report_inspect.t
@@ -46,10 +46,10 @@ FixMyStreet::override_config {
     };
 
     subtest "test basic inspect submission" => sub {
-        $mech->submit_form_ok({ button => 'save', with_fields => { traffic_information => 'Lots', state => 'Planned' } });
+        $mech->submit_form_ok({ button => 'save', with_fields => { traffic_information => 'Yes', state => 'Planned' } });
         $report->discard_changes;
         is $report->state, 'planned', 'report state changed';
-        is $report->get_extra_metadata('traffic_information'), 'Lots', 'report data changed';
+        is $report->get_extra_metadata('traffic_information'), 'Yes', 'report data changed';
     };
 
     subtest "test inspect & instruct submission" => sub {
@@ -94,7 +94,7 @@ FixMyStreet::override_config {
             $mech->contains_or_lacks($test->{priority}, 'Priority');
             $mech->contains_or_lacks($test->{priority}, 'High');
             $mech->contains_or_lacks($test->{category}, 'Category');
-            $mech->contains_or_lacks($test->{detailed}, 'Detailed problem information');
+            $mech->contains_or_lacks($test->{detailed}, 'Extra details');
             $mech->submit_form_ok({
                 button => 'save',
                 with_fields => {
diff --git a/templates/web/base/report/_inspect.html b/templates/web/base/report/_inspect.html
index 31a8cd9ad..a4501aebd 100644
--- a/templates/web/base/report/_inspect.html
+++ b/templates/web/base/report/_inspect.html
@@ -2,48 +2,37 @@
 [% permissions = c.user.permissions(c, problem.bodies_str) %]
 [% second_column = BLOCK -%]
   <div id="side-report-secondary">
-    <div class="problem-inspector-fields clearfix">
-      [% INCLUDE 'errors.html' %]
+    [% INCLUDE 'errors.html' %]
 
-      <form id="report_inspect_form" method="post" action="[% c.uri_for( '/report', problem.id, 'inspect' ) %]">
-        <p class="left">
-          <label for="problem_id">[% loc('Report ID:') %]</label>
-          <input type="text" readonly id="problem_id" value="[% problem.id %]">
-        </p>
+    <form id="report_inspect_form" method="post" action="[% c.uri_for( '/report', problem.id, 'inspect' ) %]">
 
-[% IF permissions.report_edit_priority OR permissions.report_inspect %]
-        <p class="right">
-          <label for="problem_priority">[% loc('Priority:') %]</label>
-          <select name="priority" id="problem_priority">
-            <option value="" [% 'selected' UNLESS problem.response_priority_id %]>-</option>
-            [% FOREACH priority IN problem.response_priorities %]
-              <option value="[% priority.id %]" [% 'selected' IF problem.response_priority_id == priority.id %] [% 'disabled' IF priority.deleted %]>[% priority.name %]</option>
-            [% END %]
-          </select>
+      <div class="inspect-section">
+        <p>
+          <strong>[% loc('Report ID:') %]</strong>
+          [% problem.id %]
         </p>
-[% END %]
-
-[% IF permissions.report_inspect %]
-        <p class="left">
-          <label for="state">[% loc('State:') %]</label>
-            [%# XXX this is duplicated from admin/report_edit.html, should be refactored %]
-          <select name="state" id="state">
-            [% FOREACH group IN state_groups %]
-              <optgroup label="[% group.0 %]">
-                [% FOREACH state IN group.1 %]
-                  <option [% 'selected ' IF state == problem.state %] value="[% state %]">[% state_pretty.$state %]</option>
-                [% END %]
-              </optgroup>
-            [% END %]
-          </select>
+        <p>
+          [% SET local_coords = problem.local_coords; %]
+          <strong>[% loc('Easting/Northing:') %]</strong>
+          <span id="problem_easting">[% local_coords.0 IF local_coords %]</span>,
+          <span id="problem_northing">[% local_coords.1 IF local_coords %]</span>
+          <input type="hidden" name="longitude" value="[% problem.longitude %]">
+          <input type="hidden" name="latitude" value="[% problem.latitude %]">
+        </p>
+        <p>
+          <a href="https://www.google.com/maps/dir/Current+Location/[% problem.latitude %],[% problem.longitude %]" class="btn btn-block btn--navigate">[% loc('Navigate to this problem') %]</a>
         </p>
-[% END %]
+        <p>
+          <a href="#" class="btn btn-block btn--geolocate" id="geolocate_link">[% loc('Set to my current location') %]</a>
+        </p>
+      </div>
 
-[% IF permissions.report_edit_category OR permissions.report_inspect %]
-        <p class="right">
-          <label for="category">[% loc('Category:') %]</label>
+    [% IF permissions.report_edit_category OR permissions.report_inspect %]
+      <div class="inspect-section">
+        <p>
+          <label for="category">[% loc('Category') %]</label>
             [%# XXX this is duplicated from admin/report_edit.html, should be refactored %]
-          <select name="category" id="category">
+          <select name="category" id="category" class="form-control">
             [% IF NOT problem.category OR NOT categories.grep(problem.category).size %]
             <optgroup label="[% loc('Existing category') %]">
               <option selected value="[% problem.category | html %]">[% (problem.category OR '-') | html %]</option>
@@ -58,47 +47,69 @@
             [% END %]
           </select>
         </p>
-[% END %]
 
+        [% IF permissions.report_inspect %]
         <p>
-          [% SET local_coords = problem.local_coords; %]
-          <strong>[% loc('Easting/Northing:') %]</strong>
-          <span id="problem_easting">[% local_coords.0 IF local_coords %]</span>,
-          <span id="problem_northing">[% local_coords.1 IF local_coords %]</span>
-          <input type="hidden" name="longitude" value="[% problem.longitude %]">
-          <input type="hidden" name="latitude" value="[% problem.latitude %]">
-        </p>
-        <p style="clear:both;">
-          <a href="#" id="geolocate_link">[% loc('Use my current location') %]</a>,
-          [% loc('or drag the pin on the map') %] &raquo;
+          <label for="state">[% loc('State') %]</label>
+            [%# XXX this is duplicated from admin/report_edit.html, should be refactored %]
+          <select name="state" id="state" class="form-control">
+            [% FOREACH group IN state_groups %]
+              <optgroup label="[% group.0 %]">
+                [% FOREACH state IN group.1 %]
+                  <option [% 'selected ' IF state == problem.state %] value="[% state %]">[% state_pretty.$state %]</option>
+                [% END %]
+              </optgroup>
+            [% END %]
+          </select>
         </p>
+        [% END %]
+      </div>
+    [% END %]
 
-[% IF permissions.report_inspect %]
+      <div class="inspect-section">
+        [% IF permissions.report_edit_priority OR permissions.report_inspect %]
         <p>
-          <label for="detailed_information">[% loc('Detailed problem location:') %]</label>
-          <textarea rows="2" name="detailed_location">[% problem.get_extra_metadata('detailed_location') | html %]</textarea>
+          <label for="problem_priority">[% loc('Priority') %]</label>
+          <select name="priority" id="problem_priority" class="form-control">
+            <option value="" [% 'selected' UNLESS problem.response_priority_id %]>-</option>
+            [% FOREACH priority IN problem.response_priorities %]
+              <option value="[% priority.id %]" [% 'selected' IF problem.response_priority_id == priority.id %] [% 'disabled' IF priority.deleted %]>[% priority.name %]</option>
+            [% END %]
+          </select>
         </p>
+        [% END %]
+
+        [% IF permissions.report_inspect %]
         <p>
-          <label for="detailed_information">[% loc('Detailed problem information:') %]</label>
-          <textarea rows="2" name="detailed_information">[% problem.get_extra_metadata('detailed_information') | html %]</textarea>
+          <label for="traffic_information">[% loc('Traffic management required?') %]</label>
+          [% traffic_info = problem.get_extra_metadata('traffic_information') %]
+          <select id="traffic_information" name="traffic_information" class="form-control">
+            <option value=""[% ' selected' IF NOT traffic_info %]>-</option>
+            <option[% ' selected' IF traffic_info == "Yes" %]>Yes</option>
+            <option[% ' selected' IF traffic_info == "No" %]>No</option>
+          </select>
         </p>
         <p>
-          <label for="traffic_information">[% loc('Traffic management information:') %]</label>
-          <textarea rows="2" name="traffic_information">[% problem.get_extra_metadata('traffic_information') | html %]</textarea>
+          <label for="detailed_information">[% loc('Extra details') %]</label>
+          <textarea rows="2" name="detailed_information" class="form-control">[% problem.get_extra_metadata('detailed_information') | html %]</textarea>
         </p>
-[% END %]
+        [% END %]
 
         <p>
           <input type="hidden" name="token" value="[% csrf_token %]">
           <a href="[% c.uri_for( '/report', problem.id ) %]" class="btn">[% loc('Cancel') %]</a>
           <input type="submit" value="[% loc('Save changes') %]" name="save" />
         </p>
-[% IF permissions.report_inspect %]
+      </div>
+
+    [% IF permissions.report_inspect %]
+      <div class="inspect-section">
         [% UNLESS problem.get_extra_metadata('inspected') %]
+          [%# TODO: Integrate this textarea into the main form, for simpler UX %]
           <p>
             <label for="public_update">[% loc('Public update:') %]</label>
             [% INCLUDE 'admin/response_templates_select.html' for='public_update' %]
-            <textarea rows="2" name="public_update" id="public_update" required>[% public_update | html %]</textarea>
+            <textarea rows="2" name="public_update" id="public_update" class="form-control" required>[% public_update | html %]</textarea>
           </p>
           <p>
             <input type="submit" value="[% loc('Save changes + send') %]" name="save_inspected" />
@@ -112,8 +123,9 @@
             [% END %]
           </p>
         [% END %]
-[% END %]
-      </form>
-    </div>
+      </div>
+    [% END %]
+
+    </form>
   </div>
 [%- END %]
diff --git a/web/cobrands/fixmystreet/images/crosshairs.png b/web/cobrands/fixmystreet/images/crosshairs.png
new file mode 100644
index 000000000..e3f216814
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/crosshairs.png
diff --git a/web/cobrands/fixmystreet/images/crosshairs.svg b/web/cobrands/fixmystreet/images/crosshairs.svg
new file mode 100644
index 000000000..80b5172c6
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/crosshairs.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-crosshairs</title><path d="M13.013 8.48c-.242 2.344-2.117 4.204-4.475 4.445V9.977H7.534v2.953c-2.375-.225-4.268-2.095-4.512-4.45h3.005v-.997H3.02C3.246 5.113 5.146 3.227 7.533 3v2.986h1.004V3.003c2.37.243 4.25 2.12 4.478 4.48h-2.97v.998h2.967zm1.008-.997c-.232-2.91-2.558-5.232-5.482-5.48V0H7.534v2.002c-2.942.233-5.285 2.56-5.52 5.48H0v1h2.017c.25 2.904 2.587 5.214 5.517 5.446V16h1.004v-2.074c2.912-.247 5.232-2.55 5.48-5.445H16v-.997h-1.98z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/crosshairs@2x.png b/web/cobrands/fixmystreet/images/crosshairs@2x.png
new file mode 100644
index 000000000..c7caa518a
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/crosshairs@2x.png
diff --git a/web/cobrands/fixmystreet/images/navigate.png b/web/cobrands/fixmystreet/images/navigate.png
new file mode 100644
index 000000000..c37331e0d
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/navigate.png
diff --git a/web/cobrands/fixmystreet/images/navigate.svg b/web/cobrands/fixmystreet/images/navigate.svg
new file mode 100644
index 000000000..a00b08825
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/navigate.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-navigate</title><path d="M15.348.002c-.072.007-.142.026-.206.057L.342 7.057c-.216.103-.35.324-.342.562.008.24.158.45.38.538l5.356 2.106 2.106 5.356c.088.222.3.372.538.38.238.008.46-.126.562-.342l7-14.8c.092-.194.074-.423-.05-.6-.122-.177-.33-.274-.544-.256zm-2.82 2.62L6.055 9.095 2.11 7.546 12.53 2.62zm.857.836l-4.937 10.43-1.55-3.942 6.487-6.488z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/navigate@2x.png b/web/cobrands/fixmystreet/images/navigate@2x.png
new file mode 100644
index 000000000..1ea3659eb
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/navigate@2x.png
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 7462682ee..60f992410 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -398,30 +398,6 @@ select.form-control {
   margin:1em 0;
 }
 
-.problem-inspector-fields {
-  select {
-    height: 2.4em; // match text inputs
-    -webkit-appearance: menulist-button; // so it's the right height in Safari
-  }
-
-  p.left,
-  p.right {
-    width: 46%;
-
-    label {
-        margin-top: 0;
-    }
-  }
-
-  p.left {
-    float: #{$left};
-  }
-
-  p.right {
-    float: #{$right};
-  }
-}
-
 
 // form errors
 div.form-error,
@@ -750,6 +726,13 @@ input.final-submit {
   float: $right;
 }
 
+// TODO: Sort out this a/a:visited/a.btn hideousness
+.btn-block,
+a.btn-block {
+  display: block;
+  text-align: center;
+}
+
 .btn--facebook {
     @include button-reset(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff);
 
@@ -780,6 +763,42 @@ input.final-submit {
     }
 }
 
+.btn--navigate,
+.btn--geolocate {
+    &:before {
+        content: "";
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background: transparent url(/cobrands/fixmystreet/images/navigate.png) no-repeat 0 0;
+        background-size: 16px 16px;
+        margin-#{$right}: 0.5em;
+        vertical-align: -0.1em; // vertically centre icon in button
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/navigate@2.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/navigate.svg), none;
+        }
+    }
+}
+
+.btn--geolocate {
+    &:before {
+        background-image: url(/cobrands/fixmystreet/images/crosshairs.png);
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/crosshairs@2.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/crosshairs.svg), none;
+        }
+    }
+}
+
 .btn--block {
     display: block;
     width: auto;
@@ -1463,6 +1482,27 @@ label .muted {
   }
 }
 
+.inspect-section {
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  padding-top: 1.5em;
+  margin-top: 1.5em;
+
+  &:first-child {
+    border-top: none;
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  & > :first-child,
+  & > :first-child > :first-child {
+    margin-top: 0;
+  }
+}
+
+.inspect-section--hidden {
+  display: none;
+}
+
 
 table.nicetable {
   width:100%;