Initial styles for mobile completed map buttons

Signed-off-by: Josh Angell <josh@supercooldesign.co.uk>

3 files changed, 24 insertions, 1 deletions

diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 95a5357cb..efe50d6ff 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -1043,6 +1043,28 @@ a:hover.button-left {
       text-decoration:none;
     }
   }
+  &.map_complete {
+    background:none;
+    display:block;
+    border-bottom:4px solid #fff;
+    a#try_again {
+      display:block;
+      margin:0 auto 6em auto;
+      background:rgba(0, 0, 0, 0.8);
+      @include border-radius(0.5em);
+    }
+    a#mob_ok {
+      position:absolute;
+      right:1em;
+      bottom:0;
+      height:20px;
+      padding-top:30px;
+      display:block;
+      width:4em;
+      background:#fff url('images/sprite.png') 12px -4140px no-repeat;
+      color:#000;
+    }
+  }
 }
 
 .mobile-map-banner {
diff --git a/web/cobrands/fixmystreet/images/sprite.png b/web/cobrands/fixmystreet/images/sprite.png
index 68fcb652f..d0839890a 100644
--- a/web/cobrands/fixmystreet/images/sprite.png
+++ b/web/cobrands/fixmystreet/images/sprite.png
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 4c789cc19..3a6cec3e5 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -470,10 +470,11 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                 //of the #side-form or whatever as we will probably want
                 //to do this on other pages where #side-form might not be
                 var height = $('#map_box').height();
-                $('html, body').animate({scrollTop:height}, 1000);
+                $('html, body').animate({scrollTop:height-60}, 1000);
 
                 //add this class so we can modify the look of the links inside
                 $('#mob_sub_map_links').addClass('map_complete');
+                $('#mob_ok').text('MAP');
             });
         }