Map ui pretty much done for desktop

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

4 files changed, 34 insertions, 14 deletions

diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 46f5dfa4f..d44c3f1eb 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -924,7 +924,11 @@ a:hover.button-left {
 #OpenLayers\.Control\.PanZoom_6_zoomin,
 #OpenLayers\.Control\.PanZoom_6_zoomout {
   text-indent:-999999px;
+  opacity:0.85;
   background:url(images/sprite.png) no-repeat;
+  &:hover {
+    opacity:1;
+  }
 }
 #OpenLayers\.Control\.PanZoom_6_zoomworld {
   display:none !important;
@@ -973,14 +977,14 @@ a:hover.button-left {
   right:0;
   bottom: 0;
   z-index: 1000;
-  background:#333;
+  background:rgba(0, 0, 0, 0.7);
   margin:0;
   a {
     @include inline-block;
     font-size:0.6875em;
     color:#fff;
     padding:0.6em 3em 0.5em 1em;
-    background:url(images/sprite.png) right -4066px no-repeat;
+    background:url(images/sprite.png) right -3976px no-repeat;
     &#hide_pins_link {
       background-position:right -3976px;
     }
@@ -990,6 +994,10 @@ a:hover.button-left {
     &#map_permalink {
       background-position:right -4070px;
     }
+    &:hover {
+      background-color:#000;
+      text-decoration:none;
+    }
   }
 }
 
@@ -1273,13 +1281,4 @@ ul.breadcrumb {
     border-bottom:none;
     margin-bottom:0;
   }
-}
-
-// OpenLayers fix for navigation being top right
-.olControlPanZoom {
-    right: 44px !important;
-    top: 4em !important;
-    left: auto !important;
-}
-
-
+}
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 9c390b1da..273e389c4 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -339,6 +339,18 @@ $(function(){
     //add permalink
     $('#sub_map_links').append('<a href="#" id="map_permalink">Permalink</a>');
 
-    //open/close toggle button on desk
+    //add open/close toggle button on desk
     $('#sub_map_links').prepend('<span id="map_links_toggle">&nbsp;</span>');
+
+    //set up map_links_toggle click event
+    var maplinks_width = $('#sub_map_links').width()+16;
+    $('#map_links_toggle').on('click', function(){
+        if($(this).hasClass('closed')){
+            $(this).removeClass('closed');
+            $('#sub_map_links').animate({'right':'0'}, 1200);
+        }else{
+            $(this).addClass('closed');
+            $('#sub_map_links').animate({'right':-maplinks_width}, 1200);
+        }
+    });
 });
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/sprite.png b/web/cobrands/fixmystreet/images/sprite.png
index aff028314..d0f05adef 100644
--- a/web/cobrands/fixmystreet/images/sprite.png
+++ b/web/cobrands/fixmystreet/images/sprite.png
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index 139540ac7..41b746621 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -451,12 +451,21 @@ body.twothirdswidthpage {
   top:14em;
   #map_links_toggle {
     display:block;
+    cursor: pointer;
     position:absolute;
     left:-1em;
-    background:#000;
     width:1em;
     height:100%;
+    background:#000 url(images/sprite.png) right -4119px no-repeat;
     @include border-radius(0.25em 0 0 0.25em);
+    &:hover {
+      left:-1.5em;
+      //use border so we don't have to redefine the background-position
+      border-right:0.5em solid #000;
+    }
+    &.closed {
+      background-position: right -4159px;
+    }
   }
 }