[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".

4 files changed, 60 insertions, 2 deletions

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