Merge pull request #3786 from ja9-look/feature/sticky_header_on_scroll_mobile

sticky header for mobile

app/assets/javascripts/darkswarm/controllers/offcanvas_controller.js.coffee

@@ -0,0 +1,11 @@
+Darkswarm.controller "OffcanvasCtrl", ($scope) ->
+  $scope.menu = $(".left-off-canvas-menu")
+
+  $scope.setOffcanvasMenuHeight = ->
+    $scope.menu.height($(window).height())
+
+  $scope.bind = ->
+    $(window).on("resize", $scope.setOffcanvasMenuHeight)
+    $scope.setOffcanvasMenuHeight()
+
+  $scope.bind()

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

@@ -2,7 +2,14 @@ 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, .page-alert")
+    moveSelectors = [".off-canvas-wrap .inner-wrap",
+                     ".off-canvas-wrap .inner-wrap .fixed",
+                     ".off-canvas-fixed .top-bar",
+                     ".off-canvas-fixed ofn-flash",
+                     ".off-canvas-fixed nav.tab-bar",
+                     ".off-canvas-fixed .page-alert"]
+
+    container_elems = $(moveSelectors.join(", "))
 
     # Wait a moment after page load before showing the alert. Otherwise we often miss the
     # start of the animation.

app/assets/stylesheets/darkswarm/all.scss

@@ -10,6 +10,7 @@
 @import 'foundation-icons';
 
 @import 'base/*';
+@import 'layout/*';
 @import '*';
 @import 'pages/*';
 @import '../web/all';

app/assets/stylesheets/darkswarm/layout/offcanvas.css.scss

@@ -0,0 +1,17 @@
+@import "compass/css3/transition";
+
+.off-canvas-fixed {
+  @include transition(transform 1000ms ease-in-out);
+}
+
+.move-right > .off-canvas-fixed {
+  height: 100%;
+  -webkit-transform: translate3d(15.625rem, 0, 0);
+  transform: translate3d(15.625rem, 0, 0);
+}
+
+.left-off-canvas-menu {
+  -webkit-transform: none;
+  transform: none;
+  margin-left: -15.625rem;
+}

app/assets/stylesheets/darkswarm/menu.css.scss

@@ -170,6 +170,10 @@ nav.top-bar {
 
 .tab-bar {
   background-color: white;
+  position: fixed;
+  width: 100%;
+  height: 2.8em;
+  z-index: 1;
 
   .cart-span {
     background-color: #f4704c;
@@ -230,6 +234,15 @@ nav.top-bar {
   padding: 9px 0 0 9px;
 }
 
+// Leave space for tab bar, in screens smaller than large.
+[role="main"] {
+  margin-top: 2.8em;
+
+  @media #{$large-up} {
+    margin-top: 0;
+  }
+}
+
 .top-bar .ofn-logo img {
   height: auto;
   width: auto;
@@ -241,7 +254,7 @@ nav.top-bar {
   background-color: white;
 }
 
-.off-canvas-wrap.move-right ul.off-canvas-list {
+.off-canvas-wrap ul.off-canvas-list {
   font-size: 0.875rem;
 
   .li-menu {
@@ -261,12 +274,10 @@ nav.top-bar {
       background-color: transparent;
       color: $brand-colour;
     }
-
-    @include transition(all 0.3s ease-in-out);
   }
 }
 
-.off-canvas-wrap.move-right ul.off-canvas-list i {
+.off-canvas-wrap ul.off-canvas-list i {
   font-size: 1.5rem;
   margin-right: 0.25rem;
 }

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

@@ -2,10 +2,12 @@
 @import "animations";
 @import "compass/css3/transition";
 
+$page-alert-height: 55px;
+
 // Basic style \\
 .page-alert {
   .alert-box {
-    height: 55px;
+    height: $page-alert-height;
     overflow: hidden;
     border: 1px solid rgba($dark-grey, 0.35);
     border-left: none;
@@ -45,33 +47,26 @@
 }
 
 // Show-hide animation \\
-.off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, nav.tab-bar {
-  @include transition(all, 1000ms, ease-in-out);
+
+.off-canvas-wrap .inner-wrap,
+.off-canvas-fixed .top-bar,
+.off-canvas-fixed ofn-flash,
+.off-canvas-fixed nav.tab-bar,
+.off-canvas-fixed .page-alert {
+  @include transition(all 1000ms ease-in-out);
 
   &.move-down {
-    margin-top: 55px;
-
-    @include transition(all, 1000ms, ease-in-out);
+    margin-top: $page-alert-height;
   }
 }
 
-.off-canvas-wrap .inner-wrap .page-alert.fixed {
-  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 .page-alert {
+  top: -1 * $page-alert-height;
+  z-index: 100;
 }
 
 .off-canvas-wrap.move-right .inner-wrap.move-down {
-  .page-alert {
-    top: -55px * 2;
-  }
-
   .left-off-canvas-menu {
-    top: -55px;
+    top: -1 * $page-alert-height;
   }
 }

app/views/home/index.html.haml

@@ -2,8 +2,10 @@
   #tagline:before { background-image: url("#{ContentConfig.home_hero.url}") }
 
 
-%div{"ng-controller" => "HomeCtrl"}
+- content_for :page_alert do
   = render "shared/menu/alert"
+
+%div{"ng-controller" => "HomeCtrl"}
   = render "home/tagline"
 
   #panes

app/views/layouts/darkswarm.html.haml

@@ -26,9 +26,11 @@
     = render "layouts/shopfront_script" if @shopfront_layout
 
     .off-canvas-wrap{offcanvas: true}
-      .inner-wrap
+      .fixed.off-canvas-fixed
         = render "shared/menu/menu" unless @hide_menu
+        = yield :page_alert
 
+      .inner-wrap
         %section{ role: "main" }
           = yield
 

app/views/shared/menu/_menu.html.haml

@@ -1,4 +1,4 @@
-.fixed
-  = render partial: "shared/menu/large_menu"
-  %ofn-flash
-= render partial: "shared/menu/mobile_menu"
+= render "shared/menu/large_menu"
+%ofn-flash
+= render "shared/menu/mobile_menu"
+= render "shared/menu/offcanvas_menu"

app/views/shared/menu/_mobile_menu.html.haml

@@ -20,32 +20,3 @@
 
     %a{href: main_app.shop_path}
       {{ CurrentHub.hub.name }}
-
-%aside.left-off-canvas-menu.show-for-medium-down
-  %ul.off-canvas-list
-    %li.ofn-logo
-      %a{href: root_path}
-        %img{src: ContentConfig.logo_mobile.url, srcset: ContentConfig.logo_mobile_svg.url, width: "75", height: "26"}
-    - [*1..7].each do |menu_number|
-      - menu_name = "menu_#{menu_number}"
-      - if ContentConfig[menu_name].present?
-        %li.li-menu
-          %a{href: t("#{menu_name}_url") }
-            %span.nav-primary
-              %i{class: ContentConfig["#{menu_name}_icon_name"]}
-              = t "#{menu_name}_title"
-    - if OpenFoodNetwork::I18nConfig.selectable_locales.count > 1
-      %li.language-switcher.li-menu
-        %a
-          %i.ofn-i_071-globe
-          = t('language_name')
-        %ul
-          - OpenFoodNetwork::I18nConfig.selectable_locales.each do |l|
-            - if I18n.locale != l
-              %li
-                %a{href: "?locale=#{l.to_s}" }= t('language_name', locale: l)
-    %li
-    - if spree_current_user.nil?
-      = render 'shared/menu/signed_out'
-    - else
-      = render 'shared/menu/signed_in_offcanvas'

app/views/shared/menu/_offcanvas_menu.html.haml

@@ -0,0 +1,28 @@
+%aside.left-off-canvas-menu.show-for-medium-down{ ng: { controller: "OffcanvasCtrl" } }
+  %ul.off-canvas-list
+    %li.ofn-logo
+      %a{href: root_path}
+        %img{src: ContentConfig.logo_mobile.url, srcset: ContentConfig.logo_mobile_svg.url, width: "75", height: "26"}
+    - [*1..7].each do |menu_number|
+      - menu_name = "menu_#{menu_number}"
+      - if ContentConfig[menu_name].present?
+        %li.li-menu
+          %a{href: t("#{menu_name}_url") }
+            %span.nav-primary
+              %i{class: ContentConfig["#{menu_name}_icon_name"]}
+              = t "#{menu_name}_title"
+    - if OpenFoodNetwork::I18nConfig.selectable_locales.count > 1
+      %li.language-switcher.li-menu
+        %a
+          %i.ofn-i_071-globe
+          = t('language_name')
+        %ul
+          - OpenFoodNetwork::I18nConfig.selectable_locales.each do |l|
+            - if I18n.locale != l
+              %li
+                %a{href: "?locale=#{l.to_s}" }= t('language_name', locale: l)
+    %li
+    - if spree_current_user.nil?
+      = render 'shared/menu/signed_out'
+    - else
+      = render 'shared/menu/signed_in_offcanvas'