diff options
| -rwxr-xr-x | templates/web/base/around/display_location.html | 6 | ||||
| -rw-r--r-- | templates/web/fixmystreet.com/around/_report_banner.html | 6 | ||||
| -rw-r--r-- | templates/web/fixmystreet.com/header_extra.html | 16 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet.com/base.scss | 24 |
4 files changed, 52 insertions, 0 deletions
diff --git a/templates/web/base/around/display_location.html b/templates/web/base/around/display_location.html index 029435cf2..c97612beb 100755 --- a/templates/web/base/around/display_location.html +++ b/templates/web/base/around/display_location.html @@ -73,6 +73,12 @@ <a href="/">[% loc('Home') %]</a> <span>[% loc('Place pin on map') %]</span> </div> + + [% IF c.config.BASE_URL == "https://www.fixmystreet.com" %] + <h1 class="big-green-banner banner-position-variant-1"> + [% loc( 'Click map to report a problem' ) %] + </h1> + [% END %] </div> diff --git a/templates/web/fixmystreet.com/around/_report_banner.html b/templates/web/fixmystreet.com/around/_report_banner.html new file mode 100644 index 000000000..08cd7ed05 --- /dev/null +++ b/templates/web/fixmystreet.com/around/_report_banner.html @@ -0,0 +1,6 @@ +<h1 class="big-green-banner banner-position-variant-0"> + [% loc( 'Click map to report a problem' ) %] +</h1> +<a id="skip-this-step" href="[% url_skip %]" rel="nofollow"> + [% loc("Can't see the map? <em>Skip this step</em>") %] +</a> diff --git a/templates/web/fixmystreet.com/header_extra.html b/templates/web/fixmystreet.com/header_extra.html index 5292d4804..146c3f79e 100644 --- a/templates/web/fixmystreet.com/header_extra.html +++ b/templates/web/fixmystreet.com/header_extra.html @@ -2,6 +2,22 @@ <link rel="prefetch" href="[% version('/vendor/OpenLayers.Projection.OrdnanceSurvey.js') %]"> [% END %] +[% IF bodyclass.match('mappage') AND c.config.BASE_URL == "https://www.fixmystreet.com" %] +<script src="//www.google-analytics.com/cx/api.js?experiment=jydOGgMrQRaWedSNoiW-SQ"></script> +<script nonce="[% csp_nonce %]"> + var variation = typeof cxApi !== "undefined" ? cxApi.chooseVariation() : 0, + docElement = document.documentElement, + className = docElement.className; + docElement.className = className + ' banner-position-variant-' + variation; +</script> +<style> + html .banner-position-variant-1 { display: none !important; } + html.banner-position-variant-1 .banner-position-variant-0 { display: none !important; } + html.banner-position-variant-1 .banner-position-variant-1 { display: block !important; } + html.banner-position-variant-1 #side .big-green-banner ~ section.full-width { margin-top: -1em; } +</style> +[% END %] + [% IF bodyclass.match('frontpage') %] <link rel="prefetch" href="[% version('/cobrands/fixmystreet.com/js.js') %]"> [% END %] diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss index 0cc23c539..aed038a6e 100644 --- a/web/cobrands/fixmystreet.com/base.scss +++ b/web/cobrands/fixmystreet.com/base.scss @@ -49,6 +49,30 @@ svg|g.site-logo__svg { @include svg-background-image("/cobrands/fixmystreet/images/site-logo"); } +// Big green banner A/B test. +#map_box .big-green-banner { + position: absolute; + left: 50%; + bottom: 80px; // above #sub_map_links + transform: translateX(-50%); + margin: 0; + font-size: 1.2em; + line-height: 1.3em; + padding: 0.6em 1em 0.5em; + border-radius: 5px; // match .big-hide-pins-link + background-image: none; // remove "arrow" image + + @media (min-width: 64em) { + bottom: 32px; // match #sub_map_links + left: calc( ( 100% - 220px ) / 2 ); + max-width: calc( 100% - 300px ); + } + + @media (min-width: 82em) { + left: 50%; + } +} + .next-steps { margin: 0 -1em; // counteract padding on parent background-color: #faf7e2; |