Add scrolling tabs to code subnav

2 files changed, 41 insertions, 20 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 6d44ee6c269..2c158b813cf 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -342,6 +342,24 @@
   }
 }
 
+.scrolling-tabs-container {
+  position: relative;
+
+  .nav-links {
+    @include scrolling-links();
+
+    .fade-right {
+      @include fade(left, rgba(255, 255, 255, 0.4), $background-color);
+      right: 0;
+    }
+
+    .fade-left {
+      @include fade(right, rgba(255, 255, 255, 0.4), $background-color);
+      left: 0;
+    }
+  }
+}
+
 .nav-block {
   position: relative;
 
diff --git a/app/views/projects/commits/_head.html.haml b/app/views/projects/commits/_head.html.haml
index 73af27a8a37..a72e8ba73ad 100644
--- a/app/views/projects/commits/_head.html.haml
+++ b/app/views/projects/commits/_head.html.haml
@@ -1,25 +1,28 @@
-%ul.nav-links.sub-nav
-  %div{ class: (container_class) }
-    = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
-      = link_to project_files_path(@project) do
-        Files
+.scrolling-tabs-container
+  %ul.nav-links.sub-nav.scrolling-tabs
+    %div{ class: (container_class) }
+      .fade-left
+      = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
+        = link_to project_files_path(@project) do
+          Files
 
-    = nav_link(controller: [:commit, :commits]) do
-      = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
-        Commits
+      = nav_link(controller: [:commit, :commits]) do
+        = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
+          Commits
 
-    = nav_link(controller: %w(network)) do
-      = link_to namespace_project_network_path(@project.namespace, @project, current_ref) do
-        Network
+      = nav_link(controller: %w(network)) do
+        = link_to namespace_project_network_path(@project.namespace, @project, current_ref) do
+          Network
 
-    = nav_link(controller: :compare) do
-      = link_to namespace_project_compare_index_path(@project.namespace, @project, from: @repository.root_ref, to: current_ref) do
-        Compare
+      = nav_link(controller: :compare) do
+        = link_to namespace_project_compare_index_path(@project.namespace, @project, from: @repository.root_ref, to: current_ref) do
+          Compare
 
-    = nav_link(html_options: {class: branches_tab_class}) do
-      = link_to namespace_project_branches_path(@project.namespace, @project) do
-        Branches
+      = nav_link(html_options: {class: branches_tab_class}) do
+        = link_to namespace_project_branches_path(@project.namespace, @project) do
+          Branches
 
-    = nav_link(controller: [:tags, :releases]) do
-      = link_to namespace_project_tags_path(@project.namespace, @project) do
-        Tags
+      = nav_link(controller: [:tags, :releases]) do
+        = link_to namespace_project_tags_path(@project.namespace, @project) do
+          Tags
+      .fade-right