Fix display of close arrow/cross when drawer open.

The 'cross' at mobile widths was not displaying, and the icon was not
changing to a down arrow at larger widths.

3 files changed, 20 insertions, 12 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index dc9637d08..43e47e099 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -319,11 +319,11 @@ $(function(){
     var opened;
 
     $.fn.small_drawer = function(id) {
+        var $this = $(this), d = $('#' + id);
         this.toggle(function(){
             if (opened) {
                 opened.click();
             }
-            var $this = $(this), d = $('#' + id);
             if (!$this.addClass('hover').data('setup')) {
                 d.hide().removeClass('hidden-js').css({
                 padding: '1em',
@@ -334,7 +334,6 @@ $(function(){
             d.slideDown();
             opened = $this;
         }, function(e){
-            var $this = $(this), d = $('#' + id);
             $this.removeClass('hover');
             d.slideUp();
             opened = null;
@@ -355,16 +354,16 @@ $.fn.drawer = function(id, ajax) {
     var $sidebar = $('#map_sidebar');
     var $sw = $this.parents('.shadow-wrap');
     var $swparent = $sw.parent();
+    var $drawer = $('#' + id);
 
     this.toggle(function(){
         // Find the specified drawer, or create it if it doesn't exist
-        var $drawer = $('#' + id);
         if ($drawer.length === 0) {
             $drawer = $('<div id="' + id + '">');
             $drawer.appendTo($swparent);
         }
 
-        if ( ! $this.data('setup') ) {
+        if (!$this.addClass('hover').data('setup')) {
             // Optionally fill $drawer with HTML from an AJAX data source
             if (ajax) {
                 var href = $this.attr('href') + ';ajax=1';
@@ -402,7 +401,7 @@ $.fn.drawer = function(id, ajax) {
     }, function(e){
         // Slide the drawer down, move the .shadow-wrap back to its
         // original parent, and hide the drawer for potential re-use later.
-        var $drawer = $('#' + id);
+        $this.removeClass('hover');
         var drawer_top = $(window).height() - $sw.height();
 
         $drawer.animate({ top: drawer_top }, 1000, function(){
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 32fe37f10..ad3bb5e16 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -592,12 +592,12 @@ body.mappage .wrapper {
           color:#fff;
         }
         &.abuse {
-          background-image:url($image-sprite);
-          background-position:center -2424px;
+          background-image: url($image-sprite);
+          background-position: center -2424px;
         }
         &.feed {
-          background-image:url($image-sprite);
-          background-position:center -2563px;
+          background-image: url($image-sprite);
+          background-position: center -2563px;
         }
         &.share {
           background-image: url('/cobrands/fixmystreet/images/share.png');
@@ -608,9 +608,12 @@ body.mappage .wrapper {
           background-position: center 25%;
           background-size: 20px 25px;
         }
+        &.chevron.hover {
+          background-size: auto auto;
+        }
         &.hover {
-          background-image:url($image-sprite);
-          background-position:center -2064px;
+          background-image: url($image-sprite);
+          background-position: center -2064px;
         }
       }
     }
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 53d827f05..d7bef87fa 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -744,8 +744,14 @@ body.authpage {
           background-position: $right 50%;
           background-size: 12px 15px;
         }
+        &.chevron.hover {
+          // Reset things that changed
+          border-#{$right}: none;
+          padding-#{$right}: 1.5em;
+          background-size: auto auto;
+        }
         &.hover {
-          background-image:url($image-sprite);
+          background-image: url($image-sprite);
           background-position: flip(right, -337px) -1876px;
         }
       }