[fixmystreet.com] Experiment, no pins by default.

This changes the default flow to show no pins and a message about
reporting, with the second tab displaying existing problems (and showing
map pins). Those existing problems are the ones that would currently be
on "problems on the map" followed by those currently on "problems
nearby".

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);