Start scrolling tabs design

app/assets/javascripts/layout_nav.js.coffee

+class @LayoutNav
+  $(document).ready ->
+    $('#scrolling-tabs').on 'scroll', ->
+      cur = $(this).scrollLeft()
+      if cur == 0
+        return
+      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

app/assets/stylesheets/framework/nav.scss

@@ -256,6 +256,30 @@
       display: none;
     }
 
+    .fa-arrow-right {
+      display: none;
+      position: absolute;
+      color: #7e7c7c;
+      bottom: 11px;
+      right: 0;
+      padding: 10px 10px 10px 25px;
+      background: -webkit-linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%);
+
+      &.end-scroll {
+        opacity: 0;
+        transition-duration: .3s;
+      }
+    }
+
+    @media (max-width: 790px) {
+      margin-right: 19px;
+
+      .fa-arrow-right {
+        display: block;
+        transition-duration: .3s;
+      }
+    }
+
     li {
 
       a {
@@ -276,6 +300,11 @@
         color: $gl-icon-color;
       }
     }
+
+    &.end-scroll {
+      margin-right: 0;
+      transition-duration: .3s;
+    }
   }
 
 }

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

 = render 'layouts/nav/group_settings'
 
-%ul.nav-links
+%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,3 +35,4 @@
       = icon('users fw')
       %span
         Members
+  = icon('arrow-right')