Add home button to fullscreenmap on mobile, also adjust mixin for button-reset

3 files changed, 27 insertions, 29 deletions

diff --git a/web/cobrands/fixmystreet/_mixins.scss b/web/cobrands/fixmystreet/_mixins.scss
index 793c9090b..f77152dd6 100644
--- a/web/cobrands/fixmystreet/_mixins.scss
+++ b/web/cobrands/fixmystreet/_mixins.scss
@@ -1,5 +1,5 @@
 // Button reset
-@mixin button-reset {
+@mixin button-reset($c1: #eee, $c2: #ccc, $c3: #999, $c4: #333, $c5: #777, $c6: #999, $c7: #666, $c8: #fff){
   cursor:pointer;
   font:{
     size: 0.875em;
@@ -13,16 +13,16 @@
   width: auto;
   height: auto;
   @include border-radius(4px);
-  background: #eee;
-  @include background (linear-gradient(#eee, #ccc)) ;
-  border:1px solid #999;  
-  color:#333;
+  background: $c1;
+  @include background (linear-gradient($c1, $c2)) ;
+  border:1px solid $c3;  
+  color:$c4;
   &:hover{
-    color:#fff;
-    background:#777;
-    @include background (linear-gradient(#999, #777)) ;    
+    background:$c5;
+    @include background (linear-gradient($c6, $c5)); 
     text-decoration: none;
-    border:1px solid #666;  
+    border:1px solid $c7;  
+    color:$c8;
   }
 }
 
@@ -69,4 +69,4 @@
       display:block;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 05ff23ac9..a900c4331 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -693,29 +693,13 @@ button, input[type=submit],.btn{
 .green-btn,
 button.green-btn,
 input.green-btn{
-  @include button-reset;
-  background-color: #9FDE23;
-  @include background (linear-gradient(#9FDE23, #7FB900)) ;
-  color:#fff;
-  border-color: #5B9700;
-  &:hover{
-    @include background (linear-gradient(#7FB900, #9FDE23)) ;    
-    border-color: #5B9700;
-  }
+  @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff);
 }
 
 .red-btn,
 button.red-btn,
 input.red-btn{
-  @include button-reset;
-  background-color: #FF0038;
-  @include background (linear-gradient(#FF0038, #BF002A)) ;
-  color:#fff;
-  border-color: #80001C;
-  &:hover{
-    @include background (linear-gradient(#BF002A, #FF0038)) ;    
-    border-color: #80001C;
-  }
+  @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff);
 }
 
 .final-submit,
@@ -1155,6 +1139,19 @@ a:hover.button-left {
   right:0;
   font-size:0.75em;
   background:rgba(0, 0, 0, 0.7);
+  padding:0.75em 30px;
+  a {
+    @include button-reset(#333, #1a1a1a, #1a1a1a, #fff, #333, #1a1a1a, #1a1a1a, #fff);
+    font: {
+      weight:normal;
+      size:0.875em;
+    }
+    line-height:1;
+    padding:0.5em 0.75em;
+    position:absolute;
+    left:0.3em;
+    top:0.3em;
+  }
 }
 
 .olControlAttribution {
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 97f97f22a..173c247c3 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -104,7 +104,8 @@ $(function(){
                 .addClass('mobile-map-banner')
                 .removeClass('.big-green-banner')
                 .appendTo('#map_box')
-                .text('Place pin on map');
+                .text('Place pin on map')
+	        .prepend('<a href="/">home</a>');
         }
     } else {
         // Make map full screen on non-mobile sizes.