diff options
| -rw-r--r-- | templates/web/fixmystreet.com/around/postcode_form.html | 48 | ||||
| -rw-r--r-- | templates/web/fixmystreet.com/header_extra.html | 20 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/base.scss | 39 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/layout.scss | 18 |
4 files changed, 125 insertions, 0 deletions
diff --git a/templates/web/fixmystreet.com/around/postcode_form.html b/templates/web/fixmystreet.com/around/postcode_form.html new file mode 100644 index 000000000..afb3b66fb --- /dev/null +++ b/templates/web/fixmystreet.com/around/postcode_form.html @@ -0,0 +1,48 @@ +[%# Identical to parent, but with an extra div and javascript for our homepage A/B test %] + +<div id="front-main"> + <div id="front-main-container"> + [% INCLUDE 'around/intro.html' %] + + <div id="homepage-ab-test"> + <p><a id="cta-report">Report a problem</a></p> + <p><a id="cta-view">Or view problems in an area you know</a></p> + </div> + + [% + question = c.cobrand.enter_postcode_text || loc('Enter a nearby street name and area'); + %] + <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm"> + <label for="pc">[% question %]:</label> + <div> + <input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]"> + <input type="submit" value="[% loc('Go') %]" id="sub"> + </div> + [% IF partial_token %] + <input type="hidden" name="partial" value="[% partial_token.token %]"> + [% END %] + </form> + </div> +</div> + +<script type="text/javascript"> +$(function(){ + $('#homepage-ab-test a').on('click', function(e){ + e.preventDefault(); + $('#homepage-ab-test').fadeOut(250, function(){ + + /* fadeIn() normal form, and focus input */ + $('#postcodeForm').fadeIn(250, function(){ + $('#pc').focus(); + }); + + /* Can't just fadeIn() because #geolocate_link + should have { display: inline-block } */ + $('#geolocate_link').css({ + opacity: 0, + display: 'inline-block' + }).animate({ opacity: 1 }, 250); + }); + }); +}); +</script> diff --git a/templates/web/fixmystreet.com/header_extra.html b/templates/web/fixmystreet.com/header_extra.html index 27ffc12a1..17cb822b7 100644 --- a/templates/web/fixmystreet.com/header_extra.html +++ b/templates/web/fixmystreet.com/header_extra.html @@ -1,3 +1,23 @@ <script src="[% start %][% version('/js/jquery.cookie.min.js') %]" type="text/javascript" charset="utf-8"></script> +[%# We are conducting an A/B experiment on the homepage %] +[% IF c.req.uri.path == '/' %] +<script src="//www.google-analytics.com/cx/api.js?experiment=cX9Tbz_VRl-cZDM5WVRgTQ"></script> +<script> +var variation = cxApi.chooseVariation(), + docElement = document.documentElement, + className = docElement.className; +docElement.className = className + ' ' + 'variant' + variation; +</script> +<style> +html.variant1 #homepage-ab-test { + display: block; +} +html.variant1 #postcodeForm, +html.variant1 #front-main a#geolocate_link { + display: none; +} +</style> +[% END %] + [% INCLUDE 'tracking_code.html' %] diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss index ff4f4df91..5dfe8958d 100644 --- a/web/cobrands/fixmystreet/base.scss +++ b/web/cobrands/fixmystreet/base.scss @@ -88,3 +88,42 @@ margin-right: -0.5em; } } + +#homepage-ab-test { + display: none; // header_extra.html will override this if Analytics tells it to + + a { + display: inline-block; + cursor: pointer; + } + + #cta-report { + padding: 0.4em 1em; + margin-top: 0.5em; + font-size: 1.5em; + font-weight: bold; + color: #333; + background-color: #ffd000; + border-radius: 0.3em; + box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2); + background-image: linear-gradient(rgba(255,255,255,0.3), transparent); + text-shadow: 0 1px 0 rgba(255,255,255,0.6); + border: 2px solid #BB9900; + text-decoration: none; + + &:hover, + &:focus { + background-color: #FFDB3E; + } + + &:active { + position: relative; + top: 1px; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3); + } + } + + #cta-view { + margin: 0.5em 0 1em 0; + } +} diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss index 20ea2f11a..009ab5bcb 100644 --- a/web/cobrands/fixmystreet/layout.scss +++ b/web/cobrands/fixmystreet/layout.scss @@ -283,3 +283,21 @@ body.alertindex { line-height: 1.4em; } } + +#homepage-ab-test { + #cta-report { + font-size: 2em; + } + + #cta-view { + line-height: 1.2em; + font-size: 1.2em; + color: #333; + border-bottom: 1px solid #917F00; + text-decoration: none; + + &:hover, &:focus { + border-bottom-color: #BD942A; + } + } +} |