Add fade out to sub nav17339-mobile-navigation

6 files changed, 46 insertions, 22 deletions

diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee
index 43dc941a82f..3c39ec32f26 100644
--- a/app/assets/javascripts/layout_nav.js.coffee
+++ b/app/assets/javascripts/layout_nav.js.coffee
@@ -1,13 +1,13 @@
 class @LayoutNav
   $ ->
     $('.fade-left').addClass('end-scroll')
-    $('#scrolling-tabs').on 'scroll', ->
+    $('.scrolling-tabs').scroll (event) ->
+      el = $(event.target)
       currentPosition = $(this).scrollLeft()
-      $('.fade-left').toggleClass('end-scroll', currentPosition is 0)
-
       mobileScreenWidth = 480
       controlBtnWidth = $('.controls').width()
       maxPosition = $(this)[0].scrollWidth - $(this).parent().width()
       maxPosition += controlBtnWidth if $('.nav-control').length and $(window).width() > mobileScreenWidth
 
-      $('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
+      el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
+      el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 334f611ad4f..1de0e2563f6 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -1,4 +1,4 @@
-@mixin fade($gradient-direction) {
+@mixin fade($gradient-direction, $rgba, $gradient-color) {
   visibility: visible;
   opacity: 1;
   position: absolute;
@@ -7,10 +7,10 @@
   height: 30px;
   transition-duration: .3s;
   -webkit-transform: translateZ(0);
-  background: -webkit-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%);
-  background: -o-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%);
-  background: -moz-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%);
-  background: linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%);
+  background: -webkit-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
+  background: -o-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
+  background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
+  background: linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
 
   &.end-scroll {
     visibility: hidden;
@@ -19,6 +19,16 @@
   }
 }
 
+@mixin scrolling-links() {
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 .nav-links {
   padding: 0;
   margin: 0;
@@ -262,23 +272,17 @@
   }
 
   .nav-links {
+    @include scrolling-links();
     border-bottom: none;
     height: 51px;
-    white-space: nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    &::-webkit-scrollbar {
-      display: none;
-    }
 
     .fade-right {
-      @include fade(left);
+      @include fade(left, rgba(250, 250, 250, 0.4), $background-color);
       right: 0;
     }
 
     .fade-left {
-      @include fade(right);
+      @include fade(right, rgba(250, 250, 250, 0.4), $background-color);
       left: 0;
     }
 
@@ -318,6 +322,24 @@
   }
 }
 
+.nav-block {
+  position: relative;
+
+  .nav-links {
+    @include scrolling-links();
+
+    .fade-right {
+      @include fade(left, rgba(255, 255, 255, 0.4), $white-light);
+      right: 0;
+    }
+
+    .fade-left {
+      @include fade(right, rgba(255, 255, 255, 0.4), $white-light);
+      left: 0;
+    }
+  }
+}
+
 .page-with-layout-nav {
   margin-top: 50px;
 
diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml
index 9b8319c51ca..de15add3617 100644
--- a/app/views/layouts/nav/_group.html.haml
+++ b/app/views/layouts/nav/_group.html.haml
@@ -1,7 +1,7 @@
 %div{ class: nav_control_class }
   = render 'layouts/nav/group_settings'
 
-  %ul.nav-links#scrolling-tabs
+  %ul.nav-links.scrolling-tabs
     .fade-left
     = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
       = link_to group_path(@group), title: 'Home' do
diff --git a/app/views/layouts/nav/_profile.html.haml b/app/views/layouts/nav/_profile.html.haml
index a31584c7f81..2efc6c48a48 100644
--- a/app/views/layouts/nav/_profile.html.haml
+++ b/app/views/layouts/nav/_profile.html.haml
@@ -1,4 +1,4 @@
-%ul.nav-links#scrolling-tabs
+%ul.nav-links.scrolling-tabs
   .fade-left
   = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
     = link_to profile_path, title: 'Profile Settings' do
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index bffa583fda3..087b7472701 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -20,7 +20,7 @@
               Leave Project
 
 %div{ class: nav_control_class }
-  %ul.nav-links#scrolling-tabs
+  %ul.nav-links.scrolling-tabs
     .fade-left
     = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
       = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
diff --git a/app/views/shared/_event_filter.html.haml b/app/views/shared/_event_filter.html.haml
index c38d9313dba..30055002213 100644
--- a/app/views/shared/_event_filter.html.haml
+++ b/app/views/shared/_event_filter.html.haml
@@ -1,5 +1,7 @@
-%ul.nav-links.event-filter
+%ul.nav-links.event-filter.scrolling-tabs
+  .fade-left
   = event_filter_link EventFilter.push, 'Push events'
   = event_filter_link EventFilter.merged, 'Merge events'
   = event_filter_link EventFilter.comments, 'Comments'
   = event_filter_link EventFilter.team, 'Team'
+  .fade-right