Remove arrows from mobile scroll fade out

6 files changed, 74 insertions, 68 deletions

diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee
index 2f2f5aa85c5..4586702bc2c 100644
--- a/app/assets/javascripts/layout_nav.js.coffee
+++ b/app/assets/javascripts/layout_nav.js.coffee
@@ -1,19 +1,11 @@
 class @LayoutNav
-  $(document).ready ->
+  $ ->
     $('#scrolling-tabs').on 'scroll', ->
-      cur = $(this).scrollLeft()
-      if cur == 0
-        return
+      currentPosition = $(this).scrollLeft()
+      return if currentPosition == 0
+      if $('.nav-control').length
+        maxPosition = $(this)[0].scrollWidth - $(this).parent().width() + 59
       else
-        max = 289
-        console.log "MAX:" + max
-        console.log "CUR:" + cur
-        if cur == max
-          $('.fa-arrow-right').addClass('end-scroll')
-          $('.nav-links').addClass('end-scroll')
-        else
-          $('.fa-arrow-right').removeClass('end-scroll')
-          $('.nav-links').removeClass('end-scroll')
-      return
-    $('#scrolling-tabs').trigger 'scroll'
-    return
+        maxPosition = $(this)[0].scrollWidth - $(this).parent().width()
+
+      $('.fade-out').toggleClass('end-scroll', currentPosition is maxPosition)
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 83c27eada3d..fe3a2aa26be 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -256,14 +256,18 @@
       display: none;
     }
 
-    .fa-arrow-right {
-      display: none;
+    .fade-out {
+      opacity: 1;
       position: absolute;
-      color: #7e7c7c;
-      bottom: 11px;
+      bottom: 10px;
       right: 0;
-      padding: 10px 10px 10px 25px;
+      width: 43px;
+      height: 35px;
+      -webkit-transform: translateZ(0);
       background: -webkit-linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%);
+      background: -o-linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%);
+      background: -moz-linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%);
+      background: linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%);
 
       &.end-scroll {
         opacity: 0;
@@ -272,10 +276,7 @@
     }
 
     @media (max-width: 790px) {
-      margin-right: 19px;
-
-      .fa-arrow-right {
-        display: block;
+      .fade-out {
         transition-duration: .3s;
       }
     }
@@ -300,13 +301,20 @@
         color: $gl-icon-color;
       }
     }
+  }
 
-    &.end-scroll {
-      margin-right: 0;
-      transition-duration: .3s;
+  .nav-control {
+    .fade-out {
+      right: 58px;
+
+      @media (min-width: $screen-xs-max) {
+        right: 67px;
+      }
+      @media (max-width: $screen-xs-min) {
+        right: 0;
+      }
     }
   }
-
 }
 
 .page-with-layout-nav {
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index f90d7a806d3..67f491b6d9c 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -324,7 +324,7 @@
 
   .layout-nav {
     @media (max-width: $screen-xs-min) {
-      padding-right: 0;;
+      padding-right: 0;
     }
 
     @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index fbb799eecd3..597a12cd53b 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -51,4 +51,8 @@ module NavHelper
   def layout_dropdown_class
     "controls-dropdown-visible" if current_user
   end
+
+  def nav_control_class
+    "nav-control" if current_user
+  end
 end
diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml
index 781c0651253..ba4a7092655 100644
--- a/app/views/layouts/nav/_group.html.haml
+++ b/app/views/layouts/nav/_group.html.haml
@@ -1,38 +1,39 @@
-= render 'layouts/nav/group_settings'
+%div{ class: nav_control_class }
+  = render 'layouts/nav/group_settings'
 
-%ul.nav-links#scrolling-tabs
-  = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
-    = link_to group_path(@group), title: 'Home' do
-      = icon('group fw')
-      %span
-        Group
-  = nav_link(path: 'groups#activity') do
-    = link_to activity_group_path(@group), title: 'Activity' do
-      = icon('dashboard fw')
-      %span
-        Activity
-  = nav_link(controller: [:group, :milestones]) do
-    = link_to group_milestones_path(@group), title: 'Milestones' do
-      = icon('clock-o fw')
-      %span
-        Milestones
-  = nav_link(path: 'groups#issues') do
-    = link_to issues_group_path(@group), title: 'Issues' do
-      = icon('exclamation-circle fw')
-      %span
-        Issues
-        - issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute
-        %span.badge.count= number_with_delimiter(issues.count)
-  = nav_link(path: 'groups#merge_requests') do
-    = link_to merge_requests_group_path(@group), title: 'Merge Requests' do
-      = icon('tasks fw')
-      %span
-        Merge Requests
-        - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened').execute
-        %span.badge.count= number_with_delimiter(merge_requests.count)
-  = nav_link(controller: [:group_members]) do
-    = link_to group_group_members_path(@group), title: 'Members' do
-      = icon('users fw')
-      %span
-        Members
-  = icon('arrow-right')
+  %ul.nav-links#scrolling-tabs
+    = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
+      = link_to group_path(@group), title: 'Home' do
+        = icon('group fw')
+        %span
+          Group
+    = nav_link(path: 'groups#activity') do
+      = link_to activity_group_path(@group), title: 'Activity' do
+        = icon('dashboard fw')
+        %span
+          Activity
+    = nav_link(controller: [:group, :milestones]) do
+      = link_to group_milestones_path(@group), title: 'Milestones' do
+        = icon('clock-o fw')
+        %span
+          Milestones
+    = nav_link(path: 'groups#issues') do
+      = link_to issues_group_path(@group), title: 'Issues' do
+        = icon('exclamation-circle fw')
+        %span
+          Issues
+          - issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute
+          %span.badge.count= number_with_delimiter(issues.count)
+    = nav_link(path: 'groups#merge_requests') do
+      = link_to merge_requests_group_path(@group), title: 'Merge Requests' do
+        = icon('tasks fw')
+        %span
+          Merge Requests
+          - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened').execute
+          %span.badge.count= number_with_delimiter(merge_requests.count)
+    = nav_link(controller: [:group_members]) do
+      = link_to group_group_members_path(@group), title: 'Members' do
+        = icon('users fw')
+        %span
+          Members
+    .fade-out
diff --git a/app/views/layouts/nav/_profile.html.haml b/app/views/layouts/nav/_profile.html.haml
index d730840d63a..d3d733d5999 100644
--- a/app/views/layouts/nav/_profile.html.haml
+++ b/app/views/layouts/nav/_profile.html.haml
@@ -1,4 +1,4 @@
-%ul.nav-links
+%ul.nav-links#scrolling-tabs
   = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
     = link_to profile_path, title: 'Profile Settings' do
       = icon('user fw')
@@ -47,3 +47,4 @@
       = icon('history fw')
       %span
         Audit Log
+  .fade-out