[fixmystreet.com] Friendly A/B test setup.

Includes a smiley, bright yellow homepage, and updated nav bar and
footer across the entire site; a few content changes; request for
gender information from users.

Fixes #1341.

11 files changed, 175 insertions, 0 deletions

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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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 b7872c4b7..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(){
@@ -131,6 +135,9 @@ $(function(){
                 if (cobrand !== 'oxfordshire') {
                     $('#site-header').show();
                 }
+                if (typeof variation !== undefined && variation === 1) {
+                    banner_text = 'Click map to request a fix';
+                }
                 $('.big-green-banner')
                     .removeClass('mobile-map-banner')
                     .prependTo('#side')