Remove arrows from mobile scroll fade out

app/assets/javascripts/layout_nav.js.coffee

 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)

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 {

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) {

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

app/views/layouts/nav/_group.html.haml

-= render 'layouts/nav/group_settings'
+%div{ class: nav_control_class }
+  = render 'layouts/nav/group_settings'
 
-%ul.nav-links#scrolling-tabs
+  %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')
@@ -35,4 +36,4 @@
         = icon('users fw')
         %span
           Members
-  = icon('arrow-right')
+    .fade-out

app/views/layouts/nav/_profile.html.haml

-%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