mysociety · zarino · Sep 28, 2020 · Sep 15, 2020 · Sep 21, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -50,6 +50,7 @@
         - Rewrite open311-update-reports to share code and improve functionality.
     - UK:
         - Add option for recaptcha. #3050
+        - Display search tips when location search returns no results. #3180
 
 * v3.0.1 (6th May 2020)
     - New features:

diff --git a/perllib/FixMyStreet/TestMech.pm b/perllib/FixMyStreet/TestMech.pm
@@ -340,12 +340,13 @@ arrayref of TEXTs. If none found return empty arrayref.
 sub page_errors {
     my $mech   = shift;
     my $result = scraper {
-        process 'div.form-error, p.form-error, p.error, ul.error li', 'errors[]', 'TEXT';
+        process 'div.form-error, p.form-error, p.error, ul.error li, .search-help__header', 'errors[]', 'TEXT';
     }
     ->scrape( $mech->response );
     my $err = $result->{errors} || [];
     my %seen = ();
     $err = [ grep { not $seen{$_}++ } @$err ];
+    @$err = map { s/^\s+|\s+$//g; $_ } @$err;
     return $err;
 }
 

diff --git a/templates/web/base/around/postcode_form.html b/templates/web/base/around/postcode_form.html
@@ -35,7 +35,7 @@
         %]
         <a href="[% c.uri_for('/around', link_params) | html %]" id="geolocate_link">&hellip; [% loc('or use my location') %]</a>
 
-        [% UNLESS possible_location_matches %]
+        [% UNLESS possible_location_matches OR location_error_pc_lookup %]
             [% INCLUDE 'around/_postcode_form_post.html' %]
         [% END %]
     </div>

diff --git a/templates/web/fixmystreet-uk-councils/around/location_error.html b/templates/web/fixmystreet-uk-councils/around/location_error.html
@@ -0,0 +1 @@
+../../fixmystreet.com/around/location_error.html
diff --git a/templates/web/fixmystreet.com/around/location_error.html b/templates/web/fixmystreet.com/around/location_error.html
@@ -0,0 +1,31 @@
+[% IF location_error_pc_lookup %]
+
+    <div class="search-help">
+        <h2 class="search-help__header" role="alert">
+            [% location_error | safe %]
+        </h2>
+
+        <div class="search-help__tips">
+            <div class="search-help__tips__category">
+                <h3>[% loc('Searching by postcode?') %]</h3>
+                <ul>
+                    <li>[% loc('Check you <strong>haven’t swapped numbers and letters</strong>. <code>O</code>, <code>0</code>, <code>I</code> and <code>1</code> aren’t the same.') %]</li>
+                    <li>[% loc('<strong>Don’t forget the space</strong> in your postcode.') %]</li>
+                    <li>[% loc('<strong>Don’t mix postcodes and street names.</strong>') %]</li>
+                </ul>
+            </div>
+            <div class="search-help__tips__category">
+                <h3>[% loc('Searching by street name?') %]</h3>
+                <ul>
+                    <li>[% loc('<strong>One at a time!</strong> Multiple street names in a single search can confuse us.') %]</li>
+                    <li>[% loc('If you’re <strong>not sure on the spelling</strong>, try another nearby street you <em>are</em> sure about, then trace your way back on our map.') %]</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+[% ELSE %]
+
+    <p class="form-error">[% location_error | safe %]</p>
+
+[% END %]
diff --git a/web/cobrands/bathnes/_colours.scss b/web/cobrands/bathnes/_colours.scss
@@ -42,3 +42,6 @@ $front_main_background: $bathnes-primary;
 
 $menu-image: 'menu-black';
 $header-top-border: false;
+
+$search-help-background: #fff3f3;
+$search-help-header-font-size-desktop: 1.25em;
diff --git a/web/cobrands/bexley/_colours.scss b/web/cobrands/bexley/_colours.scss
@@ -51,3 +51,5 @@ $header-top-border: false;
 $heading-font: Lato, sans-serif;
 $body-font: Lato, sans-serif;
 $meta-font: $body-font;
+
+$search-help-background: #fff3f3;
diff --git a/web/cobrands/borsetshire/_colours.scss b/web/cobrands/borsetshire/_colours.scss
@@ -34,3 +34,7 @@ $mappage-header-height: 5em; // 3em #site-logo plus 1em padding top and bottom
 $body-font: Cabin, "Calibri", "Gill Sans", "Gill Sans MT", sans-serif;
 $meta-font: $body-font;
 $heading-font: $body-font;
+
+$search-help-alignment: left;
+$search-help-background: #fff3f3;
+$search-help-header-font-size-desktop: 1.25em;
diff --git a/web/cobrands/bristol/_colours.scss b/web/cobrands/bristol/_colours.scss
@@ -33,3 +33,9 @@ $header-top-border: false;
 
 $col_click_map: $g1;
 $col_click_map_dark: darken($g1, 10%);
+
+$search-help-alignment: left;
+$search-help-background: #fff3f3;
+$search-help-header-font-weight: normal;
+$search-help-header-font-size-desktop: 1.25em;
+$search-help-margin-desktop: -1em -1em 0 -1em;
diff --git a/web/cobrands/bristol/base.scss b/web/cobrands/bristol/base.scss
@@ -118,3 +118,7 @@ label {
     color: $g7 !important;
     font-weight: bold !important;
 }
+
+b, strong {
+  @extend %bold-font;
+}
diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
@@ -30,3 +30,5 @@ $header-top-border-width: 4px;
 
 // Override the container width to match Bromley' site, which is wider
 $container-max-width: 1200px;
+
+$search-help-header-font-size-desktop: 1.25em;
diff --git a/web/cobrands/buckinghamshire/_colours.scss b/web/cobrands/buckinghamshire/_colours.scss
@@ -55,6 +55,10 @@ $col_click_map_dark: darken($bucks_charcoal, 10%);
 $header-top-border-width: 0;
 $header-top-border: 0;
 
+$search-help-alignment: left;
+$search-help-background: #fff3f3;
+$search-help-header-font-size-desktop: 1.25em;
+
 @mixin bucks-button {
   background-color: $bucks_button_bg;
   border: 0;

diff --git a/web/cobrands/cheshireeast/_colours.scss b/web/cobrands/cheshireeast/_colours.scss
@@ -43,3 +43,8 @@ $header-top-border: false;
 $heading-font: 'Open Sans', sans-serif;
 $body-font: 'Open Sans', sans-serif;
 $meta-font: $body-font;
+
+$search-help-alignment: left;
+$search-help-background: #fff3f3;
+$search-help-header-font-size-desktop: 1.25em;
+$search-help-margin-desktop: 0;
diff --git a/web/cobrands/cheshireeast/base.scss b/web/cobrands/cheshireeast/base.scss
@@ -112,6 +112,10 @@ a#geolocate_link {
   }
 }
 
+.search-help__header {
+    line-height: 1.3;
+}
+
 /* Header/footer */
 
 #site-logo {

diff --git a/web/cobrands/eastherts/_colours.scss b/web/cobrands/eastherts/_colours.scss
@@ -35,3 +35,8 @@ $container-max-width: 70.5em; // match 1128px row width in East Herts template
 $eh-header-height: 84px + 16px + 16px;
 $eh-nav-height: 48px;
 $mappage-header-height: $eh-header-height + $eh-nav-height;
+
+$search-help-alignment: left;
+$search-help-background: #fff3f3;
+$search-help-header-font-size-desktop: 1.25em;
+$search-help-margin-desktop: 0;
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
@@ -176,7 +176,6 @@ svg|g.site-logo__svg {
   border-bottom: none;
 }
 
-
 $mysoc-footer-background-color: #222;
 $mysoc-footer-text-color: #acacac;
 $mysoc-footer-site-name-text-color: #fff;

diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
@@ -172,6 +172,10 @@ a#geolocate_link {
     }
 }
 
+.search-help__header {
+    font-family: inherit;
+}
+
 body.frontpage {
     #site-logo {
         margin: 2em 0;

diff --git a/web/cobrands/greenwich/_colours.scss b/web/cobrands/greenwich/_colours.scss
@@ -24,3 +24,7 @@ $col_big_numbers: $primary;
 $col_click_map: $greenwich_red;
 
 $container-max-width: 990px;
+
+$search-help-alignment: left;
+$search-help-background: #fff3f3;
+$search-help-header-font-size-desktop: 1.25em;
diff --git a/web/cobrands/hackney/_colours.scss b/web/cobrands/hackney/_colours.scss
@@ -42,4 +42,10 @@ $montserrat: 'Montserrat', Arial, sans-serif;
 
 $heading-font: $montserrat;
 $body-font: $montserrat;
-$meta-font: $montserrat;
+$meta-font: $montserrat;
+
+$search-help-alignment: left;
+$search-help-background: #fff3f3;
+$search-help-header-font-size-desktop: 1.25em;
+$search-help-margin: 0 -1em;
+$search-help-margin-desktop: 0 -1em;
diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss
@@ -26,3 +26,6 @@ $mappage-header-height: 173px + 32px;
 $header-top-border: false;
 
 $container-max-width: 60em;
+
+$search-help-background: #fff3f3;
+$search-help-header-font-size-desktop: 1.25em;
diff --git a/web/cobrands/highwaysengland/_colours.scss b/web/cobrands/highwaysengland/_colours.scss
@@ -40,3 +40,9 @@ $mappage-header-height: 5.75em;
 $body-font: "proxima-nova", "Proxima Nova", Montserrat, Arial, sans-serif;
 $heading-font: $body-font;
 $meta-font: $body-font;
+
+$search-help-alignment: left;
+$search-help-background: #fff3f3;
+$search-help-header-font-size-desktop: 1.25em;
+$search-help-margin: 0 -1em;
+$search-help-margin-desktop: 0 -1em;
diff --git a/web/cobrands/hounslow/_colours.scss b/web/cobrands/hounslow/_colours.scss
@@ -38,3 +38,7 @@ $header-top-border: false;
 $heading-font: InfoText, Frutiger, Arial, sans-serif;
 $body-font: Frutiger, Arial, sans-serif;
 $meta-font: $body-font;
+
+$search-help-background: #fff3f3;
+$search-help-header-background: $red;
+$search-help-header-font-size-desktop: 1.25em;
diff --git a/web/cobrands/isleofwight/_colours.scss b/web/cobrands/isleofwight/_colours.scss
@@ -31,3 +31,6 @@ $header-top-border: false;
 $body-font: Helvetica, Arial, sans-serif;
 $heading-font: $body-font;
 $meta-font: $body-font;
+
+$search-help-background: #fff3f3;
+$search-help-header-font-size-desktop: 1.25em;
diff --git a/web/cobrands/lincolnshire/_colours.scss b/web/cobrands/lincolnshire/_colours.scss
@@ -49,3 +49,9 @@ $menu-image: 'menu-black';
 
 $front_main_background: white;
 // $header-top-border: false;
+
+$search-help-alignment: left;
+$search-help-header-color: $lincs-pop;
+$search-help-header-background: transparent;
+$search-help-header-font-size-desktop: 1.25em;
+$search-help-margin-desktop: -2em -2em 0 -2em;
diff --git a/web/cobrands/northamptonshire/_colours.scss b/web/cobrands/northamptonshire/_colours.scss
@@ -30,3 +30,7 @@ $header-top-border: false;
 $heading-font: PraterSansWeb, sans-serif;
 $body-font: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
 $meta-font: $body-font;
+
+$search-help-background: #fff3f3;
+$search-help-header-font-size-desktop: 1.25em;
+$search-help-header-font-family: inherit;
diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss
@@ -42,3 +42,7 @@ $header-top-border: false;
 $form-control-border-color: #525252;
 
 $pin_prefix: '/cobrands/oxfordshire/images/';
+
+$search-help-alignment: left;
+$search-help-background: #fff3f3;
+$search-help-margin-desktop: -2em 0 0 0;
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
@@ -141,6 +141,13 @@ ol.big-numbers {
         margin-bottom: 1em;
         padding-bottom: 5px;
     }
+
+    // Overloaded selector, to override `.content h2`
+    h2.search-help__header {
+        margin-bottom: 0;
+        padding-bottom: 1rem;
+        font-size: 1em;
+    }
 }
 
 dd, p {

diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
@@ -136,6 +136,11 @@ $mappage-header-height: 10em;
     .content h2 {
         font-size: 2em;
     }
+
+    // Overloaded selector, to override `.content h2`
+    h2.search-help__header {
+        font-size: 20px;
+    }
 }
 
 #front_stats {

diff --git a/web/cobrands/peterborough/_colours.scss b/web/cobrands/peterborough/_colours.scss
@@ -44,3 +44,9 @@ $roboto: 'Roboto', Arial, sans-serif;
 $heading-font: $roboto;
 $body-font: $roboto;
 $meta-font: $roboto;
+
+$search-help-alignment: left;
+$search-help-background: #fff3f3;
+$search-help-margin: 1em -1em 0 -1em;
+$search-help-margin-desktop: -2em -1em 0 -1em;
+$search-help-header-font-size-desktop: 1.25em;
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
@@ -2829,3 +2829,4 @@ $nicetable-hover-background: rgba($primary, 0.15) !default;
 @import "_autocomplete";
 @import "_dashboard";
 @import "_top-banner";
+@import "_search-help";
diff --git a/web/cobrands/sass/_search-help.scss b/web/cobrands/sass/_search-help.scss
@@ -0,0 +1,78 @@
+$search-help-alignment: center !default;
+$search-help-background: transparent !default;
+$search-help-color: inherit !default;
+$search-help-margin: -1em -1em 0 -1em !default; // overlap .container padding
+$search-help-margin-desktop: -1em -1em -2em -1em !default; // overlap .content and .tablewrapper padding-bottoms
+$search-help-header-background: #DB3914 !default;
+$search-help-header-color: #fff !default;
+$search-help-header-font-weight: bold !default;
+$search-help-header-font-size: 1em !default;
+$search-help-header-font-size-desktop: $search-help-header-font-size !default;
+$search-help-header-font-family: null !default;
+
+.search-help {
+    margin: $search-help-margin;
+    background: $search-help-background;
+    color: $search-help-color;
+
+    // Override greedy `.tablewrapper > div` styles
+    .tablewrapper > & {
+        display: block;
+        width: auto;
+    }
+
+    @media (min-width: 48em) {
+        margin: $search-help-margin-desktop;
+    }
+}
+
+.search-help__header {
+    margin: 0;
+    text-align: $search-help-alignment;
+    background: $search-help-header-background;
+    color: $search-help-header-color;
+    font-family: $search-help-header-font-family;
+    font-weight: $search-help-header-font-weight;
+    font-size: $search-help-header-font-size;
+    padding: 1em; // IE8
+    padding: 1rem;
+
+    @media (min-width: 48em) {
+        font-size: $search-help-header-font-size-desktop;
+    }
+}
+
+.search-help__tips {
+    overflow: auto; // expand to include margin-bottom on last child
+
+    @media (min-width: 48em) {
+        @include flex-container();
+        @if ( $search-help-alignment == left ) {
+            @include justify-content(flex-start);
+        } @else if ( $search-help-alignment == right ) {
+            @include justify-content(flex-end);
+        } @else {
+            @include justify-content(center);
+            padding: 1em 0;
+        }
+    }
+
+    h3 {
+        margin-top: 0;
+        text-align: $search-help-alignment;
+    }
+}
+
+.search-help__tips__category {
+    margin: 1em;
+
+    @media (min-width: 48em) {
+        max-width: 20em;
+    }
+
+    ul {
+        margin-bottom: 0;
+        font-size: 0.875em;
+        margin-left: 1em;
+    }
+}
diff --git a/web/cobrands/stevenage/_colours.scss b/web/cobrands/stevenage/_colours.scss
@@ -16,3 +16,6 @@ $nav_hover_background_colour: #444;
 $col_click_map: #00BD08;
 
 $container-max-width: 984px; // to match Stevenage header width
+
+$search-help-background: #fff3f3;
+$search-help-margin-desktop: -2em -2em 0 -2em;
diff --git a/web/cobrands/tfl/_colours.scss b/web/cobrands/tfl/_colours.scss
@@ -50,6 +50,11 @@ $col_fixed_label_dark: #4B8304;
 
 $header-top-border: false;
 
+$search-help-alignment: left;
+$search-help-background: $red-light;
+$search-help-header-background: $red;
+$search-help-margin-desktop: -1em -1em 0em -1em;
+
 @mixin tflbutton {
   background: $beck-blue;
   border-radius: 22.5px;