Finalised how the js slidey drawer works - adding back in bits that I previously took out...

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

2 files changed, 20 insertions, 8 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index f50b66fd0..c82afe37f 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -369,18 +369,25 @@ $(function(){
     }
 
 // A sliding drawer from the bottom of the page
-// TODO Not have independent scrolling; height broken in IE6 (at least). Think fixing former will fix latter.
 $.fn.drawer = function(id, ajax) {
     this.toggle(function(){
-        var $this = $(this), d = $('#' + id);
+        var $this = $(this), d = $('#' + id), $sw = $('.shadow-wrap');
         if (!$this.addClass('hover').data('setup')) {
+            // move .shadow-wrap to end of .content first
+            if(!$('.shadow-wrap.moved').length){
+                $sw.appendTo('.content').addClass('moved');
+            }
+
             if (!d.length) {
                 d = $('<div id="' + id + '">');
             }
+            // Put the padding on an inner div to prevent the jarring jump at end of hide/show animation
+            var innerDiv = $('<div>');
+            d.wrapInner(innerDiv);
             d.removeClass('hidden-js');
             if (ajax) {
                 var href = $this.attr('href') + ';ajax=1';
-                d.load(href);
+                innerDiv.load(href);
             }
             d.find('h2').css({ marginTop: 0 });
             $('.content').append(d);
@@ -388,13 +395,14 @@ $.fn.drawer = function(id, ajax) {
             d.hide();
             $this.data('setup', true);
         }
-        d.animate({height:'show'},1000);
-        $('html, body').animate({scrollTop:d_offset-80}, 1000);
-        
+        $sw.addClass('active');
+        d.animate({height:'show'},500);
+        $('html, body').animate({scrollTop:d_offset-60}, 1000);
     }, function(e){
-        var $this = $(this), d = $('#' + id);
+        var $this = $(this), d = $('#' + id), $sw = $('.shadow-wrap');
         $this.removeClass('hover');
-        d.animate({height:'hide'});
+        $sw.removeClass('active');
+        d.animate( { height: 'hide' } );
     });
 };
 
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index d6f4bdbaa..d17365ccb 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -627,6 +627,10 @@ body.twothirdswidthpage {
       }
     }
   }
+  &.active {
+    padding:3em 0;
+    position: static;
+  }
 }
 // The padding is for the fading out when it's fixed positioned, which it isn't in IE6.
 .ie6 .shadow-wrap {