From 84fee47a763b6f1dda8b58e66c893cd8cf6dda8e Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Thu, 12 May 2016 08:23:31 -0500
Subject: Start scrolling tabs design

---
 app/assets/javascripts/layout_nav.js.coffee | 19 +++++++++++++++++++
 app/assets/stylesheets/framework/nav.scss   | 29 +++++++++++++++++++++++++++++
 app/views/layouts/nav/_group.html.haml      |  3 ++-
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/layout_nav.js.coffee

diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee
new file mode 100644
index 00000000000..2f2f5aa85c5
--- /dev/null
+++ b/app/assets/javascripts/layout_nav.js.coffee
@@ -0,0 +1,19 @@
+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
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index ee4f573f91b..83c27eada3d 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/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;
+    }
   }
 
 }
diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml
index 3438005863a..781c0651253 100644
--- a/app/views/layouts/nav/_group.html.haml
+++ b/app/views/layouts/nav/_group.html.haml
@@ -1,6 +1,6 @@
 = 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')
-- 
cgit v1.2.1