diff options
21 files changed, 280 insertions, 3 deletions
diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm index 6aaa4531f..66dc20a3a 100644 --- a/perllib/FixMyStreet/App/Controller/Report/New.pm +++ b/perllib/FixMyStreet/App/Controller/Report/New.pm @@ -1141,8 +1141,8 @@ sub generate_map : Private { my $longitude = $c->stash->{longitude}; # Don't do anything if the user skipped the map + $c->stash->{page} = 'new'; if ( $c->stash->{report}->used_map ) { - $c->stash->{page} = 'new'; FixMyStreet::Map::display_map( $c, latitude => $latitude, diff --git a/perllib/FixMyStreet/Cobrand/FixMyStreet.pm b/perllib/FixMyStreet/Cobrand/FixMyStreet.pm index f21d38ff8..159f2f5db 100644 --- a/perllib/FixMyStreet/Cobrand/FixMyStreet.pm +++ b/perllib/FixMyStreet/Cobrand/FixMyStreet.pm @@ -59,5 +59,26 @@ sub get_country_for_ip_address { return mySociety::Gaze::get_country_from_ip($ip); } +sub report_form_extras { + ( { name => 'gender', required => 0 }, { name => 'variant', required => 0 } ) +} + +sub ask_gender_question { + my $self = shift; + + return 1 unless $self->{c}->user; + + my $reports = $self->{c}->model('DB::Problem')->search({ + user_id => $self->{c}->user->id, + extra => { like => '%gender%' } + }, { order_by => { -desc => 'id' } }); + + while (my $report = $reports->next) { + my $gender = $report->get_extra_metadata('gender'); + return 0 if $gender =~ /female|male|other|unknown/; + } + return 1; +} + 1; diff --git a/t/app/controller/report_import.t b/t/app/controller/report_import.t index 220ebaac5..26acf7790 100644 --- a/t/app/controller/report_import.t +++ b/t/app/controller/report_import.t @@ -159,6 +159,7 @@ subtest "Submit a correct entry" => sub { phone => '', may_show_name => '1', category => '-- Pick a category --', + gender => undef, }, "check imported fields are shown"; @@ -195,6 +196,7 @@ subtest "Submit a correct entry" => sub { phone => '', may_show_name => '1', category => '-- Pick a category --', + gender => undef, }, "check imported fields are shown"; @@ -285,6 +287,7 @@ subtest "Submit a correct entry (with location)" => sub { phone => '', may_show_name => '1', category => '-- Pick a category --', + gender => undef, }, "check imported fields are shown"; diff --git a/t/app/controller/report_new.t b/t/app/controller/report_new.t index 4258a46a1..cf72221b4 100644 --- a/t/app/controller/report_new.t +++ b/t/app/controller/report_new.t @@ -498,6 +498,7 @@ foreach my $test ( my $new_values = { %{ $test->{fields} }, # values added to form %{ $test->{changes} }, # changes we expect + gender => undef, }; is_deeply $mech->visible_form_values, $new_values, "values correctly changed"; @@ -837,6 +838,7 @@ foreach my $test ( photo2 => '', photo3 => '', category => '-- Pick a category --', + gender => undef, }, "user's details prefilled" ); diff --git a/t/app/controller/report_new_open311.t b/t/app/controller/report_new_open311.t index b29642abe..22b37fd55 100644 --- a/t/app/controller/report_new_open311.t +++ b/t/app/controller/report_new_open311.t @@ -131,6 +131,7 @@ foreach my $test ( my $new_values = { %{ $test->{fields} }, # values added to form %{ $test->{changes} }, # changes we expect + gender => undef, }; is_deeply $mech->visible_form_values, $new_values, "values correctly changed"; diff --git a/templates/web/fixmystreet.com/around/_report_banner.html b/templates/web/fixmystreet.com/around/_report_banner.html new file mode 100755 index 000000000..fb2134020 --- /dev/null +++ b/templates/web/fixmystreet.com/around/_report_banner.html @@ -0,0 +1,10 @@ +[%# Same as parent, with variant green banner text %] +<h1 class="big-green-banner variant1"> + Click map to request a fix +</h1> +<h1 class="big-green-banner variant0"> + [% 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/around/intro.html b/templates/web/fixmystreet.com/around/intro.html new file mode 100644 index 000000000..5b756cd31 --- /dev/null +++ b/templates/web/fixmystreet.com/around/intro.html @@ -0,0 +1,9 @@ +[%# Same as parent, with variant heading text %] +<div class="variant1"> + <h1>Get things fixed in your local community</h1> + <h2>(like blocked pavements, parks and playgrounds in need of maintenance)</h2> +</div> +<div class="variant0"> + <h1>[% loc('Report, view, or discuss local problems') %]</h1> + <h2>[% loc('(like graffiti, fly tipping, broken paving slabs, or street lighting)') %]</h2> +</div> diff --git a/templates/web/fixmystreet.com/header_extra.html b/templates/web/fixmystreet.com/header_extra.html index 6d3474c23..f65121445 100644 --- a/templates/web/fixmystreet.com/header_extra.html +++ b/templates/web/fixmystreet.com/header_extra.html @@ -3,4 +3,18 @@ <script src="[% start %][% version('/js/jquery.cookie.min.js') %]"></script> <script src="[% start %][% version('/cobrands/fixmystreet.com/js.js') %]"></script> +[%# We are conducting an A/B experiment %] +<script src="//www.google-analytics.com/cx/api.js?experiment=ZwMlZkAhSbK_tP_QG64QrQ"></script> +<script> +var variation = cxApi.chooseVariation(), + docElement = document.documentElement, + className = docElement.className; +docElement.className = className + ' variant' + variation; +</script> +<style> +html .variant1 { display: none !important; } +html.variant1 .variant0 { display: none !important; } +html.variant1 .variant1 { display: block !important; } +</style> + [% INCLUDE 'tracking_code.html' %] diff --git a/templates/web/fixmystreet.com/report/new/extra_name.html b/templates/web/fixmystreet.com/report/new/extra_name.html new file mode 100644 index 000000000..d1eec5fa3 --- /dev/null +++ b/templates/web/fixmystreet.com/report/new/extra_name.html @@ -0,0 +1,42 @@ +[%# Same as parent, with added gender question %] + +[% IF (page == 'around' OR page == 'new') AND c.cobrand.ask_gender_question %] +<p> +We’re conducting research to make sure our site is good for everyone; +please help us out by providing your gender. <em>This will not be +shared with the council or displayed publicly.</em> +</p> + +[% SET gender = report.get_extra_metadata('gender') %] +<p class="radio-segmented-control" style="font-size: 80%"> + <input type="radio" name="gender" id="gender_female" value="female"[% ' checked' IF gender == 'female' %]> + <label class="inline" for="gender_female">Female</label> + <input type="radio" name="gender" id="gender_male" value="male"[% ' checked' IF gender == 'male' %]> + <label class="inline" for="gender_male">Male</label> + <input type="radio" name="gender" id="gender_other" value="other"[% ' checked' IF gender == 'other' %]> + <label class="inline" for="gender_other">Other</label> + <input type="radio" name="gender" id="gender_unknown" value="unknown"[% ' checked' IF gender == 'unknown' %]> + <label class="inline" for="gender_unknown">Prefer not to say</label> +</p> +[% END %] + +<input type="hidden" name="variant" value="0"> + +[% IF extra_name_info %] +<label for="form_fms_extra_title">Title</label> +[% IF field_errors.fms_extra_title %] + <p class='form-error'>[% field_errors.fms_extra_title %]</p> +[% END %] +[% title = '' %] +[% IF fms_extra_title %][% title = fms_extra_title | upper %] +[% ELSIF c.user && c.user.title %][% title = c.user.title | upper %][% END %] +<select class="form-focus-trigger required" id="form_fms_extra_title" + name="fms_extra_title"> + <option></option> + <option value="MR"[% ' selected' IF title == 'MR' %]>Mr</option> + <option value="MISS"[% ' selected' IF title == 'MISS' %]>Miss</option> + <option value="MRS"[% ' selected' IF title == 'MRS' %]>Mrs</option> + <option value="MS"[% ' selected' IF title == 'MS' %]>Ms</option> + <option value="DR"[% ' selected' IF title == 'DR' %]>Dr</option> +</select> +[% END %] diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss index 0f261e4cc..820d5ffb5 100644 --- a/web/cobrands/fixmystreet.com/base.scss +++ b/web/cobrands/fixmystreet.com/base.scss @@ -186,3 +186,56 @@ } } +.variant1 { + #site-header { + border-top-color: #fff; + background: #fad52a; + } + + #report-cta { + border: none; + background-color: #fff; + color: mix(#fad52a, #000, 50%); + padding: 0.5em 0.5em 0.4em 0.5em; + } + + #site-logo { + background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-mobile.png); + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png); + background-size: 175px 40px; + } + } + + &.frontpage { + background: #fad52a url(/cobrands/fixmystreet.com/images/friendly-homepage-mobile.jpg) top center no-repeat; + background-size: 100%; + + #site-header { + border-top-color: #fff; + background: transparent; + } + } + + #front-main #postcodeForm { + background: rgba(255,255,255,0.3); + + input#sub { + @include background(linear-gradient(#49c0ff, #1091d5)); + + &:hover, &:focus { + @include background(linear-gradient(darken(#49c0ff, 10%), darken(#1091d5, 10%))); + } + } + } + + #front-main a#geolocate_link { + background: transparent; + color: inherit; + } + + #front-main + .container { + background: transparent; + } +} diff --git a/web/cobrands/fixmystreet.com/images/friendly-homepage-mobile.jpg b/web/cobrands/fixmystreet.com/images/friendly-homepage-mobile.jpg Binary files differnew file mode 100644 index 000000000..d0560617c --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-homepage-mobile.jpg diff --git a/web/cobrands/fixmystreet.com/images/friendly-homepage.jpg b/web/cobrands/fixmystreet.com/images/friendly-homepage.jpg Binary files differnew file mode 100644 index 000000000..9a3a82108 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-homepage.jpg diff --git a/web/cobrands/fixmystreet.com/images/friendly-logo-home.png b/web/cobrands/fixmystreet.com/images/friendly-logo-home.png Binary files differnew file mode 100644 index 000000000..a80039895 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-logo-home.png diff --git a/web/cobrands/fixmystreet.com/images/friendly-logo-home@2.png b/web/cobrands/fixmystreet.com/images/friendly-logo-home@2.png Binary files differnew file mode 100644 index 000000000..2e4ae4cf7 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-logo-home@2.png diff --git a/web/cobrands/fixmystreet.com/images/friendly-logo-mobile.png b/web/cobrands/fixmystreet.com/images/friendly-logo-mobile.png Binary files differnew file mode 100644 index 000000000..ad16a2543 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-logo-mobile.png diff --git a/web/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png b/web/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png Binary files differnew file mode 100644 index 000000000..3e0eb6423 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png diff --git a/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png b/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png Binary files differnew file mode 100644 index 000000000..8f5ceec9a --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png diff --git a/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo@2.png b/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo@2.png Binary files differnew file mode 100644 index 000000000..487b14ebe --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/friendly-mysoc-logo@2.png diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss index e8e68553a..985f16ca8 100644 --- a/web/cobrands/fixmystreet.com/layout.scss +++ b/web/cobrands/fixmystreet.com/layout.scss @@ -322,3 +322,118 @@ body.unresponsive-council { background-size: 60px; } } + +.variant1 { + body { + background: #fad52a url(/cobrands/fixmystreet.com/images/friendly-homepage.jpg) top center no-repeat; + background-size: 100%; + } + + #site-logo { + background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-mobile.png); + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-mobile@2.png); + background-size: 175px 40px; + } + } + + body.frontpage { + background-image: url(/cobrands/fixmystreet.com/images/friendly-homepage.jpg); + + #site-logo { + background: transparent url(/cobrands/fixmystreet.com/images/friendly-logo-home.png) 0 0 no-repeat; + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet.com/images/friendly-logo-home@2.png); + background-size: 300px 60px; + } + } + } + + #front-main { + background: rgba(255, 255, 255, 0.3); + margin-top: 1em; + + #postcodeForm { + background: transparent; + + label { + margin: 1em 0; + } + } + + a#geolocate_link { + height: auto; + padding: 0.5em 0 0.5em 1.5em; + margin-top: 0.5em; + font-weight: bold; + font-size: 1em; + background-size: 16px; + background-position: 0% 50%; + } + } + + body.twothirdswidthpage #front-main, + body.fullwidthpage #front-main { + padding: 3em 2em 6em 2em; + } + + #site-header { + background: transparent; + } + + #main-nav { + text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); + } + + .nav-menu--main { + span { + color: inherit; + } + + a { + &:hover, + &:focus { + background: rgba(255, 255, 255, 0.2); + } + } + + a.report-a-problem-btn { + background-color: #fff; + color: mix(#fad52a, #000, 50%); + padding: 0.25em 0.5em; + text-shadow: none; + } + } + + .nav-wrapper .nav-wrapper-2 { + border-top-color: #fff; + border-image: none; + } + + body.mappage .nav-wrapper .nav-wrapper-2 { + background: darken(#fad52a, 5%); + } + + body.twothirdswidthpage .container .content footer .tablewrapper, + body.fullwidthpage .container .content footer .tablewrapper, + #footer-nav .tablewrapper { + background: #fad52a; + } + + .nav-menu--mysoc { + background: #fff; + } + + #mysoc-logo { + background-image: url(/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png); + background-position: 50% 0%; + background-size: 90px auto; + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet.com/images/friendly-mysoc-logo@2.png); + background-size: 90px auto; + } + } +} diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 21701ce5f..d9f2c226a 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -80,6 +80,10 @@ $(function(){ var cobrand = $('meta[name="cobrand"]').attr('content'); + if (typeof variation !== undefined && variation === 1) { + $('input[name=variant]').val(1); + } + // Deal with switching between mobile and desktop versions on resize var last_type; $(window).resize(function(){ @@ -130,7 +134,9 @@ $(function(){ var banner_text = translation_strings.report_problem_heading; if (cobrand !== 'oxfordshire') { $('#site-header').show(); - banner_text = translation_strings.report_problem_heading; + } + if (typeof variation !== undefined && variation === 1) { + banner_text = 'Click map to request a fix'; } $('.big-green-banner') .removeClass('mobile-map-banner') diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index fa6a34a7a..a833bb7cf 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -1741,7 +1741,8 @@ table.nicetable { display: flex; // fancy full-width buttons for browsers that support flexbox input { - display: none; + position: absolute; + left: -999px; } label { |
