Move fade out divs outside of scrolling container on project view

3 files changed, 36 insertions, 19 deletions

diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee
index cad095daae1..f639f7f5892 100644
--- a/app/assets/javascripts/layout_nav.js.coffee
+++ b/app/assets/javascripts/layout_nav.js.coffee
@@ -3,7 +3,7 @@ hideEndFade = ($scrollingTabs) ->
     $this = $(@)
 
     $this
-      .find('.fade-right')
+      .siblings('.fade-right')
       .toggleClass('scrolling', $this.width() < $this.prop('scrollWidth'))
 
 $ ->
@@ -20,5 +20,5 @@ $ ->
     currentPosition = $this.scrollLeft()
     maxPosition = $this.prop('scrollWidth') - $this.outerWidth()
 
-    $this.find('.fade-left').toggleClass('scrolling', currentPosition > 0)
-    $this.find('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1)
+    $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0)
+    $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1)
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index f53e63606de..147afc49ab4 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -32,6 +32,7 @@
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -322,7 +323,7 @@
 
     .fade-right {
       @include fade(left, rgba(250, 250, 250, 0.4), $background-color);
-      right: 0;
+      right: -5px;
 
       .fa {
         right: -7px;
@@ -331,7 +332,7 @@
 
     .fade-left {
       @include fade(right, rgba(250, 250, 250, 0.4), $background-color);
-      left: 0;
+      left: -5px;
 
       .fa {
         left: -7px;
@@ -379,7 +380,7 @@
     .fade-right {
 
       @media (max-width: $screen-xs-min) {
-        right: 0;
+        right: -5px;
       }
     }
   }
@@ -390,15 +391,23 @@
 
   .nav-links {
     @include scrolling-links();
+  }
 
-    .fade-right {
-      @include fade(left, rgba(255, 255, 255, 0.4), $background-color);
-      right: 0;
+  .fade-right {
+    @include fade(left, rgba(255, 255, 255, 0.4), $background-color);
+    right: -5px;
+
+    .fa {
+      right: -7px;
     }
+  }
 
-    .fade-left {
-      @include fade(right, rgba(255, 255, 255, 0.4), $background-color);
-      left: 0;
+  .fade-left {
+    @include fade(right, rgba(255, 255, 255, 0.4), $background-color);
+    left: -5px;
+
+    .fa {
+      left: -7px;
     }
   }
 }
@@ -411,12 +420,20 @@
 
     .fade-right {
       @include fade(left, rgba(255, 255, 255, 0.4), $white-light);
-      right: 0;
+      right: -5px;
+
+      .fa {
+        right: -7px;
+      }
     }
 
     .fade-left {
       @include fade(right, rgba(255, 255, 255, 0.4), $white-light);
-      left: 0;
+      left: -5px;
+
+      .fa {
+        left: -7px;
+      }
     }
 
     &.event-filter {
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index 27e840df503..a4bb56aa56f 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -24,10 +24,12 @@
                 data: { confirm: leave_confirmation_message(@project) }, method: :delete, title: 'Leave project' do
                 Leave Project
 
-%div{ class: nav_control_class }
+.scrolling-tabs-container{ class: nav_control_class }
+  .fade-left
+    = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
   %ul.nav-links.scrolling-tabs
-    %li.fade-left
-      = icon('arrow-left')
     = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
       = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
         %span
@@ -111,5 +113,3 @@
       %li.hidden
         = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do
           Commits
-    %li.fade-right
-      = icon('arrow-right')