aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--.cypress/cypress/integration/duplicates.js19
-rw-r--r--CHANGELOG.md2
-rw-r--r--perllib/FixMyStreet/App/Controller/Test.pm28
-rw-r--r--perllib/FixMyStreet/TestMech.pm3
-rw-r--r--templates/web/base/around/postcode_form.html2
-rw-r--r--templates/web/borsetshire/footer_extra_js.html6
l---------templates/web/fixmystreet-uk-councils/around/location_error.html1
-rw-r--r--templates/web/fixmystreet.com/around/location_error.html31
-rw-r--r--web/cobrands/bathnes/_colours.scss3
-rw-r--r--web/cobrands/bexley/_colours.scss2
-rw-r--r--web/cobrands/borsetshire/_colours.scss4
-rw-r--r--web/cobrands/bristol/_colours.scss6
-rw-r--r--web/cobrands/bristol/base.scss4
-rw-r--r--web/cobrands/bromley/_colours.scss2
-rw-r--r--web/cobrands/buckinghamshire/_colours.scss4
-rw-r--r--web/cobrands/cheshireeast/_colours.scss5
-rw-r--r--web/cobrands/cheshireeast/base.scss4
-rw-r--r--web/cobrands/eastherts/_colours.scss5
-rw-r--r--web/cobrands/fixmystreet.com/base.scss1
-rw-r--r--web/cobrands/fixmystreet.com/layout.scss4
-rw-r--r--web/cobrands/fixmystreet/fixmystreet.js2
-rw-r--r--web/cobrands/greenwich/_colours.scss4
-rw-r--r--web/cobrands/hackney/_colours.scss8
-rw-r--r--web/cobrands/hart/_colours.scss3
-rw-r--r--web/cobrands/highwaysengland/_colours.scss6
-rw-r--r--web/cobrands/hounslow/_colours.scss4
-rw-r--r--web/cobrands/isleofwight/_colours.scss3
-rw-r--r--web/cobrands/lincolnshire/_colours.scss6
-rw-r--r--web/cobrands/northamptonshire/_colours.scss4
-rw-r--r--web/cobrands/oxfordshire/_colours.scss4
-rw-r--r--web/cobrands/oxfordshire/base.scss7
-rw-r--r--web/cobrands/oxfordshire/layout.scss5
-rw-r--r--web/cobrands/peterborough/_colours.scss6
-rw-r--r--web/cobrands/sass/_base.scss1
-rw-r--r--web/cobrands/sass/_search-help.scss78
-rw-r--r--web/cobrands/stevenage/_colours.scss3
-rw-r--r--web/cobrands/tfl/_colours.scss5
-rw-r--r--web/cobrands/warwickshire/_colours.scss6
-rw-r--r--web/cobrands/westminster/_colours.scss7
39 files changed, 291 insertions, 7 deletions
diff --git a/.cypress/cypress/integration/duplicates.js b/.cypress/cypress/integration/duplicates.js
index 3dba5e38a..c0e0d8004 100644
--- a/.cypress/cypress/integration/duplicates.js
+++ b/.cypress/cypress/integration/duplicates.js
@@ -77,4 +77,23 @@ describe('Duplicate tests', function() {
cy.get('#js-duplicate-reports li h3 a').should('have.attr', 'href', '/report/1');
});
+ it('does not redisplay duplicates when stopper questions are changed', function() {
+ cy.server();
+ cy.route('/report/new/ajax*').as('report-ajax');
+ cy.visit('http://borsetshire.localhost:3001/_test/setup/regression-duplicate-stopper'); // Server-side setup
+ cy.visit('http://borsetshire.localhost:3001/report/1');
+ cy.contains('Report another problem here').click();
+ cy.wait('@report-ajax');
+ cy.get('[id=category_group]').select('Flytipping');
+ cy.get('.extra-category-questions').should('not.be.visible');
+ cy.get('.js-hide-duplicate-suggestions:first').click();
+ cy.get('.js-hide-duplicate-suggestions:first').should('not.be.visible');
+ cy.get('.extra-category-questions').should('be.visible');
+ cy.get('[id=form_hazardous]').select('No');
+ cy.wait(500);
+ cy.get('.extra-category-questions').should('be.visible');
+ cy.get('.js-hide-duplicate-suggestions:first').should('not.be.visible');
+ cy.visit('http://borsetshire.localhost:3001/_test/teardown/regression-duplicate-stopper'); // Server-side setup
+ });
+
});
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3249b0f9c..083c9d935 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@
- Fix lookups in templates of categories with &s.
- Fix a few obscure asset layer changing issues.
- Fix multiple disable messages for dropdown answers
+ - Do not trigger duplicate check when checking stoppers
- Admin improvements:
- Display user name/email for contributed as reports. #2990
- Interface for enabling anonymous reports for certain categories. #2989
@@ -51,6 +52,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/App/Controller/Test.pm b/perllib/FixMyStreet/App/Controller/Test.pm
index 5ec4bebf3..19a8c5321 100644
--- a/perllib/FixMyStreet/App/Controller/Test.pm
+++ b/perllib/FixMyStreet/App/Controller/Test.pm
@@ -42,6 +42,25 @@ sub setup : Path('/_test/setup') : Args(1) {
my $problem = FixMyStreet::DB->resultset("Problem")->find(1);
$problem->update({ category => 'Skips' });
$c->response->body("OK");
+ } elsif ( $test eq 'regression-duplicate-stopper') {
+ my $problem = FixMyStreet::DB->resultset("Problem")->find(1);
+ $problem->update({ category => 'Flytipping' });
+ my $category = FixMyStreet::DB->resultset('Contact')->search({
+ category => 'Flytipping',
+ })->first;
+ $category->push_extra_fields({
+ code => 'hazardous',
+ datatype => 'singlevaluelist',
+ description => 'Hazardous material',
+ order => 0,
+ variable => 'true',
+ values => [
+ { key => 'yes', name => 'Yes', disable => 1, disable_message => 'Please phone' },
+ { key => 'no', name => 'No' },
+ ],
+ });
+ $category->update;
+ $c->response->body("OK");
}
}
@@ -51,6 +70,15 @@ sub teardown : Path('/_test/teardown') : Args(1) {
my $problem = FixMyStreet::DB->resultset("Problem")->find(1);
$problem->update({ category => 'Potholes' });
$c->response->body("OK");
+ } elsif ( $test eq 'regression-duplicate-stopper') {
+ my $problem = FixMyStreet::DB->resultset("Problem")->find(1);
+ $problem->update({ category => 'Potholes' });
+ my $category = FixMyStreet::DB->resultset('Contact')->search({
+ category => 'Flytipping',
+ })->first;
+ $category->remove_extra_field('hazardous');
+ $category->update;
+ $c->response->body("OK");
}
}
diff --git a/perllib/FixMyStreet/TestMech.pm b/perllib/FixMyStreet/TestMech.pm
index 1b7fba1bd..277eca2b1 100644
--- 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
index 60fa1a703..d682bbdca 100644
--- 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/borsetshire/footer_extra_js.html b/templates/web/borsetshire/footer_extra_js.html
index 3e443af71..e0dfe4995 100644
--- a/templates/web/borsetshire/footer_extra_js.html
+++ b/templates/web/borsetshire/footer_extra_js.html
@@ -2,4 +2,8 @@
version('/cobrands/fixmystreet-uk-councils/js.js'),
version('/cobrands/borsetshire/google_maps_style.js'),
version('/cobrands/borsetshire/js.js'),
-) %]
+);
+IF bodyclass.match('mappage');
+ scripts.push( version('/cobrands/fixmystreet/assets.js') );
+END;
+%]
diff --git a/templates/web/fixmystreet-uk-councils/around/location_error.html b/templates/web/fixmystreet-uk-councils/around/location_error.html
new file mode 120000
index 000000000..970e242fb
--- /dev/null
+++ b/templates/web/fixmystreet-uk-councils/around/location_error.html
@@ -0,0 +1 @@
+../../fixmystreet.com/around/location_error.html \ No newline at end of file
diff --git a/templates/web/fixmystreet.com/around/location_error.html b/templates/web/fixmystreet.com/around/location_error.html
new file mode 100644
index 000000000..4e4ac8736
--- /dev/null
+++ 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
index c9503ae04..9021a0562 100644
--- 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
index 453623fb5..4b78a39f7 100644
--- 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
index 45936ddb9..5cdda2401 100644
--- 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
index cd87161a8..c4ff28f9f 100644
--- 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
index cbd5ee081..bce22f3a3 100644
--- 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
index 53f6bc2c6..1edec0e9b 100644
--- 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
index cf328b673..7350e8f33 100644
--- 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
index e0bc13b08..2dbc353c9 100644
--- 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
index c0d798c3a..b4174c100 100644
--- 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
index 84ef39bd1..f365c28e6 100644
--- 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
index f261e677d..475d4dc4e 100644
--- 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
index e6a862f73..852b0857f 100644
--- 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/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 40ff03912..9c6ce83ed 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -474,7 +474,7 @@ $.extend(fixmystreet.set_up, {
$.each(data.disable_form.questions, function(_, question) {
if (question.message && question.code) {
$('#form_' + question.code).on('change.category', function() {
- $(fixmystreet).trigger('report_new:category_change');
+ $(fixmystreet).trigger('report_new:category_change', { skip_duplicates: true } );
});
}
});
diff --git a/web/cobrands/greenwich/_colours.scss b/web/cobrands/greenwich/_colours.scss
index 973767a2d..41c3891e3 100644
--- 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
index 4c0af7b03..464733a40 100644
--- 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; \ No newline at end of file
+$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
index 321b893ad..568ba66f1 100644
--- 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
index 4b7d46453..d8b30aed6 100644
--- 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
index 622055e82..0fb3d985a 100644
--- 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; \ No newline at end of file
diff --git a/web/cobrands/isleofwight/_colours.scss b/web/cobrands/isleofwight/_colours.scss
index 511fcef02..e1334bcb1 100644
--- 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
index 8d8ad2bf4..8e80d374a 100644
--- 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
index 17c7822fb..bb2e0a654 100644
--- 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
index d52571721..535b3757a 100644
--- 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; \ No newline at end of file
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index fefbc619e..243e6aa52 100644
--- 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
index 91ea8c4d1..e6490910f 100644
--- 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
index 8211d8835..9b2a0b6bb 100644
--- 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
index 2992f3f65..b5830ebfd 100644
--- 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
new file mode 100644
index 000000000..43bbf5a9e
--- /dev/null
+++ 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
index 0bedded8a..bdbe7281b 100644
--- 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
index b175dcd26..3e232b443 100644
--- 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;
diff --git a/web/cobrands/warwickshire/_colours.scss b/web/cobrands/warwickshire/_colours.scss
index aac759179..760d919a4 100644
--- a/web/cobrands/warwickshire/_colours.scss
+++ b/web/cobrands/warwickshire/_colours.scss
@@ -32,3 +32,9 @@ $header-top-border: false;
$mappage-header-height: 5em;
$container-max-width: 78em;
+
+$search-help-alignment: left;
+$search-help-background: #fff3f3;
+$search-help-margin-desktop: 1em -1em 0 -1em;
+$search-help-header-background: $warwickshire-red;
+$search-help-header-font-size-desktop: 1.25em;
diff --git a/web/cobrands/westminster/_colours.scss b/web/cobrands/westminster/_colours.scss
index be1779daa..8850593c2 100644
--- a/web/cobrands/westminster/_colours.scss
+++ b/web/cobrands/westminster/_colours.scss
@@ -35,4 +35,9 @@ $meta-font: $body-font;
$mappage-header-height: 4.5em;
-$high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi'; \ No newline at end of file
+$high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi';
+
+$search-help-alignment: left;
+$search-help-background: #fff3f3;
+$search-help-margin: 0 -1em;
+$search-help-margin-desktop: 1em -1em 0 -1em;