Fix interaction between alert and mobile menu. A bit hack-ish, needs some more love.

app/assets/javascripts/darkswarm/directives/page_alert.js.coffee

@@ -2,7 +2,7 @@ Darkswarm.directive "ofnPageAlert", ($timeout) ->
   restrict: 'A'
   scope: true
   link: (scope, elem, attrs) ->
-    container_elems = $(".off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed")
+    container_elems = $(".off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, .page-alert")
 
     # Wait a moment after page load before showing the alert. Otherwise we often miss the
     # start of the animation.

app/assets/stylesheets/darkswarm/page_alert.css.sass

@@ -5,6 +5,8 @@
 // Basic style \\
 .page-alert
   .alert-box
+    height: 55px
+    overflow: hidden
     border: 1px solid rgba($dark-grey, 0.35)
     border-left: none
     border-right: none
@@ -24,14 +26,25 @@
 
 
 // Show-hide animation \\
-.off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed
+.off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, nav.tab-bar
   @include transition(all, 1000ms, ease-in-out)
 
   &.move-down
-    top: 55px
+    margin-top: 55px
     @include transition(all, 1000ms, ease-in-out)
 
 
 .off-canvas-wrap .inner-wrap .page-alert.fixed
-  top: 0
-  z-index: 1
+  top: -55px
+  z-index: 1
+  // TODO: Compass to disable transition
+  -moz-transition: none
+  -webkit-transition: none
+  -o-transition: color 0 ease-in
+  transition: none
+
+.off-canvas-wrap.move-right .inner-wrap.move-down
+  .page-alert
+    top: -55px * 2
+  .left-off-canvas-menu
+    top: -55px