diff options
| -rw-r--r-- | perllib/FixMyStreet/App/Controller/Around.pm | 16 | ||||
| -rwxr-xr-x | templates/web/fixmystreet.com/around/_report_banner.html | 16 | ||||
| -rw-r--r-- | templates/web/fixmystreet.com/around/tabbed_lists.html | 46 | ||||
| -rw-r--r-- | templates/web/fixmystreet.com/header_extra.html | 21 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/fixmystreet.js | 15 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/layout.scss | 9 | ||||
| -rw-r--r-- | web/cobrands/sass/_layout.scss | 34 | ||||
| -rw-r--r-- | web/js/map-OpenLayers.js | 4 |
8 files changed, 149 insertions, 12 deletions
diff --git a/perllib/FixMyStreet/App/Controller/Around.pm b/perllib/FixMyStreet/App/Controller/Around.pm index 41e0ad947..c03f5d9c8 100644 --- a/perllib/FixMyStreet/App/Controller/Around.pm +++ b/perllib/FixMyStreet/App/Controller/Around.pm @@ -263,22 +263,18 @@ sub ajax : Path('/ajax') { # render templates to get the html my $on_map_list_html = $c->render_fragment( 'around/on_map_list_items.html', - { on_map => $on_map } + { on_map => $on_map, around_map => $around_map } ); my $around_map_list_html = $c->render_fragment( 'around/around_map_list_items.html', - { around_map => $around_map, dist => $dist } + { on_map => $on_map, around_map => $around_map } ); # JSON encode the response - my $body = JSON->new->utf8(1)->encode( - { - pins => $pins, - current => $on_map_list_html, - current_near => $around_map_list_html, - } - ); - + my $json = { pins => $pins }; + $json->{current} = $on_map_list_html if $on_map_list_html; + $json->{current_near} = $around_map_list_html if $around_map_list_html; + my $body = JSON->new->utf8(1)->encode($json); $c->res->body($body); } 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..bd47a1b54 --- /dev/null +++ b/templates/web/fixmystreet.com/around/_report_banner.html @@ -0,0 +1,16 @@ +[%# Identical to parent, just with variant0s %] + +<h1 class="big-green-banner variant0"> + [% loc( 'Click map to report a problem' ) %] + [% IF c.cobrand.moniker == 'bromley' %] + <span>Yellow pins show existing reports</span> + [% END %] +</h1> +<p id="skip-this-step" class="variant0"> + [% + tprintf( + loc("Can't see the map? <a href='%s' rel='nofollow'>Skip this step</a>"), + url_skip + ) + %] +</p> diff --git a/templates/web/fixmystreet.com/around/tabbed_lists.html b/templates/web/fixmystreet.com/around/tabbed_lists.html new file mode 100644 index 000000000..6a3cdf8a9 --- /dev/null +++ b/templates/web/fixmystreet.com/around/tabbed_lists.html @@ -0,0 +1,46 @@ +<menu id="problems-nav" class="tab-nav"> + <ul class="variant0"> + <li><a href="#current_tab">[% loc('Problems on the map') %]</a></li> + <li><a href="#current_near_tab">[% loc( 'Problems nearby' ) %]</a></li> + </ul> + <ul class="variant1"> + <li><a href="#reporting">[% loc('Report a problem') %]</a></li> + <li><a href="#current_near_tab">[% loc( 'Problems near here' ) %]</a></li> + </ul> +</menu> + +<div class="variant1"> +<div id="reporting" class="tab"> + <h1>[% loc( 'Click the map to<br/>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> + + <p>Don’t worry if it’s not in precisely the right place,<br/> + you can move the pin afterwards.</p> +</div> +</div> + +<div class="variant0"> +<div id="current_tab" class="tab"> + <ul id="current" class="issue-list-a"> + [% INCLUDE "around/on_map_list_items.html" %] + </ul> +</div> +</div> + +<div id="current_near_tab" class="tab"> + <ul id="current_near" class="issue-list-a"> + [% INCLUDE "around/around_map_list_items.html" %] + </ul> +</div> + +<script> +if (typeof variation !== 'undefined' && variation == 1) { + fixmystreet.initial_hide_pins = true; + $(function(){ + $('#current').insertBefore('#current_near'); + }); +} +</script> diff --git a/templates/web/fixmystreet.com/header_extra.html b/templates/web/fixmystreet.com/header_extra.html index 27ffc12a1..65f88be14 100644 --- a/templates/web/fixmystreet.com/header_extra.html +++ b/templates/web/fixmystreet.com/header_extra.html @@ -1,3 +1,24 @@ <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 first step of reporting process %] +[% IF page == 'around' %] +<script src="//www.google-analytics.com/cx/api.js?experiment=1gdSSsSMQgy99AsCPeBalg"></script> +<script> +if (window.matchMedia) { + var desktop = window.matchMedia("(min-width: 48em)").matches; + if (desktop) { + 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> +[% END %] + [% INCLUDE 'tracking_code.html' %] diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index d26515ecf..e7e3f7bd3 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -46,6 +46,17 @@ function tabs(elem, indirect) { //hide / show the right tab $('.tab.open').hide().removeClass('open'); $(target).show().addClass('open'); + + // Clicking on tabs to show/hide pins, content experiment + if (typeof(variation) !== 'undefined' && variation == 1) { + if (target == '#current_near_tab' && !fixmystreet.markers.getVisibility()) { + $('#hide_pins_link').click(); + } + if (target == '#reporting' && fixmystreet.markers.getVisibility()) { + $('#hide_pins_link').click(); + } + } + } } @@ -176,8 +187,8 @@ $(function(){ * Tabs */ //make initial tab active - $('.tab-nav a').first().addClass('active'); - $('.tab').first().addClass('open'); + $('.tab-nav a:visible').first().addClass('active'); + $('.tab:visible').first().addClass('open'); //hide other tabs $('.tab').not('.open').hide(); diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss index 3f707f619..42df5fdbb 100644 --- a/web/cobrands/fixmystreet/layout.scss +++ b/web/cobrands/fixmystreet/layout.scss @@ -92,6 +92,15 @@ body.mappage { @include background(linear-gradient(#000, #222 10%, #222 90%, #000)); } } + + #reporting { + padding: 1em; + text-align: center; + + h1 { + line-height: 1.2em; + } + } } #main-nav { diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 148bbdc36..bf8f1e03b 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -342,6 +342,40 @@ body.mappage { } } +#skip-this-step { + display: block; + color: inherit; + //margin: 0 -15px; + padding: 16px; + font-size: 18px; + line-height: 20px; + border-bottom: 1px solid #E7E1C0; + background: #FDF4C5; + + em { + font-style: normal; + text-decoration: underline; + color: #0BA7D1; + } + + &:hover { + text-decoration: none; + } + + html.js & { + // If javascript is enabled, hide the skip link off-screen, + // but keep it visible for screen readers. + position: absolute; + top: -999px; + + &:focus { + // And show it again if it receives focus (eg: via tab key) + position: static; + } + } +} + + // full width page body.fullwidthpage { .content { diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index c7bfef2b0..63625efb8 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -227,6 +227,10 @@ function fixmystreet_onload() { } }); + if (fixmystreet.initial_hide_pins) { + $('#hide_pins_link').click(); + } + $('#all_pins_link').click(function(e) { e.preventDefault(); fixmystreet.markers.setVisibility(true); |