Add fade to project nav; fix bug with controls

2 files changed, 113 insertions, 103 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 182dd05225f..59e9a036f71 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -274,14 +274,7 @@
 
     .fade-right {
       @include fade(left);
-      right: 58px;
-
-      @media (min-width: $screen-xs-max) {
-        right: 67px;
-      }
-      @media (max-width: $screen-xs-min) {
-        right: 0;
-      }
+      right: 0;
     }
 
     .fade-left {
@@ -310,6 +303,19 @@
       }
     }
   }
+
+  .nav-control {
+    .fade-right {
+      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/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index 33ba654bbee..bffa583fda3 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -19,113 +19,117 @@
               data: { confirm: leave_project_message(@project) }, method: :delete, title: 'Leave project' do
               Leave Project
 
-%ul.nav-links
-  = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
-    = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
-      = icon('bookmark fw')
-      %span
-        Project
-  = nav_link(path: 'projects#activity') do
-    = link_to activity_project_path(@project), title: 'Activity', class: 'shortcuts-project-activity' do
-      = icon('dashboard fw')
-      %span
-        Activity
-  - if project_nav_tab? :files
-    = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
-      = link_to project_files_path(@project), title: 'Files',  class: 'shortcuts-tree' do
-        = icon('files-o fw')
+%div{ class: nav_control_class }
+  %ul.nav-links#scrolling-tabs
+    .fade-left
+    = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
+      = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
+        = icon('bookmark fw')
         %span
-          Files
-
-  - if project_nav_tab? :commits
-    = nav_link(controller: %w(commit commits compare repositories tags branches releases network)) do
-      = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do
-        = icon('history fw')
+          Project
+    = nav_link(path: 'projects#activity') do
+      = link_to activity_project_path(@project), title: 'Activity', class: 'shortcuts-project-activity' do
+        = icon('dashboard fw')
         %span
-          Commits
+          Activity
+    - if project_nav_tab? :files
+      = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
+        = link_to project_files_path(@project), title: 'Files',  class: 'shortcuts-tree' do
+          = icon('files-o fw')
+          %span
+            Files
 
-  - if project_nav_tab? :pipelines
-    = nav_link(controller: :pipelines) do
-      = link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
-        = icon('ship fw')
-        %span
-          Pipelines
-          %span.badge.count.ci_counter= number_with_delimiter(@project.ci_commits.running_or_pending.count)
+    - if project_nav_tab? :commits
+      = nav_link(controller: %w(commit commits compare repositories tags branches releases network)) do
+        = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do
+          = icon('history fw')
+          %span
+            Commits
 
-  - if project_nav_tab? :builds
-    = nav_link(controller: %w(builds)) do
-      = link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
-        = icon('cubes fw')
-        %span
-          Builds
-          %span.badge.count.builds_counter= number_with_delimiter(@project.builds.running_or_pending.count(:all))
+    - if project_nav_tab? :pipelines
+      = nav_link(controller: :pipelines) do
+        = link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
+          = icon('ship fw')
+          %span
+            Pipelines
+            %span.badge.count.ci_counter= number_with_delimiter(@project.ci_commits.running_or_pending.count)
 
-  - if project_nav_tab? :container_registry
-    = nav_link(controller: %w(container_registry)) do
-      = link_to project_container_registry_path(@project), title: 'Container Registry', class: 'shortcuts-container-registry' do
-        = icon('hdd-o fw')
-        %span
-          Container Registry
+    - if project_nav_tab? :builds
+      = nav_link(controller: %w(builds)) do
+        = link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
+          = icon('cubes fw')
+          %span
+            Builds
+            %span.badge.count.builds_counter= number_with_delimiter(@project.builds.running_or_pending.count(:all))
 
-  - if project_nav_tab? :graphs
-    = nav_link(controller: %w(graphs)) do
-      = link_to namespace_project_graph_path(@project.namespace, @project, current_ref), title: 'Graphs',  class: 'shortcuts-graphs' do
-        = icon('area-chart fw')
-        %span
-          Graphs
+    - if project_nav_tab? :container_registry
+      = nav_link(controller: %w(container_registry)) do
+        = link_to project_container_registry_path(@project), title: 'Container Registry', class: 'shortcuts-container-registry' do
+          = icon('hdd-o fw')
+          %span
+            Container Registry
 
-  - if project_nav_tab? :milestones
-    = nav_link(controller: :milestones) do
-      = link_to namespace_project_milestones_path(@project.namespace, @project), title: 'Milestones' do
-        = icon('clock-o fw')
-        %span
-          Milestones
+    - if project_nav_tab? :graphs
+      = nav_link(controller: %w(graphs)) do
+        = link_to namespace_project_graph_path(@project.namespace, @project, current_ref), title: 'Graphs',  class: 'shortcuts-graphs' do
+          = icon('area-chart fw')
+          %span
+            Graphs
 
-  - if project_nav_tab? :issues
-    = nav_link(controller: :issues) do
-      = link_to url_for_project_issues(@project, only_path: true), title: 'Issues', class: 'shortcuts-issues' do
-        = icon('exclamation-circle fw')
-        %span
-          Issues
-          - if @project.default_issues_tracker?
-            %span.badge.count.issue_counter= number_with_delimiter(@project.issues.visible_to_user(current_user).opened.count)
+    - if project_nav_tab? :milestones
+      = nav_link(controller: :milestones) do
+        = link_to namespace_project_milestones_path(@project.namespace, @project), title: 'Milestones' do
+          = icon('clock-o fw')
+          %span
+            Milestones
 
-  - if project_nav_tab? :merge_requests
-    = nav_link(controller: :merge_requests) do
-      = link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests', class: 'shortcuts-merge_requests' do
-        = icon('tasks fw')
-        %span
-          Merge Requests
-          %span.badge.count.merge_counter= number_with_delimiter(@project.merge_requests.opened.count)
+    - if project_nav_tab? :issues
+      = nav_link(controller: :issues) do
+        = link_to url_for_project_issues(@project, only_path: true), title: 'Issues', class: 'shortcuts-issues' do
+          = icon('exclamation-circle fw')
+          %span
+            Issues
+            - if @project.default_issues_tracker?
+              %span.badge.count.issue_counter= number_with_delimiter(@project.issues.visible_to_user(current_user).opened.count)
 
-  - if project_nav_tab? :labels
-    = nav_link(controller: :labels) do
-      = link_to namespace_project_labels_path(@project.namespace, @project), title: 'Labels' do
-        = icon('tags fw')
-        %span
-          Labels
+    - if project_nav_tab? :merge_requests
+      = nav_link(controller: :merge_requests) do
+        = link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests', class: 'shortcuts-merge_requests' do
+          = icon('tasks fw')
+          %span
+            Merge Requests
+            %span.badge.count.merge_counter= number_with_delimiter(@project.merge_requests.opened.count)
 
-  - if project_nav_tab? :wiki
-    = nav_link(controller: :wikis) do
-      = link_to get_project_wiki_path(@project), title: 'Wiki', class: 'shortcuts-wiki' do
-        = icon('book fw')
-        %span
-          Wiki
+    - if project_nav_tab? :labels
+      = nav_link(controller: :labels) do
+        = link_to namespace_project_labels_path(@project.namespace, @project), title: 'Labels' do
+          = icon('tags fw')
+          %span
+            Labels
 
-  - if project_nav_tab? :snippets
-    = nav_link(controller: :snippets) do
-      = link_to namespace_project_snippets_path(@project.namespace, @project), title: 'Snippets', class: 'shortcuts-snippets' do
-        = icon('clipboard fw')
-        %span
-          Snippets
+    - if project_nav_tab? :wiki
+      = nav_link(controller: :wikis) do
+        = link_to get_project_wiki_path(@project), title: 'Wiki', class: 'shortcuts-wiki' do
+          = icon('book fw')
+          %span
+            Wiki
+
+    - if project_nav_tab? :snippets
+      = nav_link(controller: :snippets) do
+        = link_to namespace_project_snippets_path(@project.namespace, @project), title: 'Snippets', class: 'shortcuts-snippets' do
+          = icon('clipboard fw')
+          %span
+            Snippets
+
+    -# Global shortcut to network page for compatibility
+    - if project_nav_tab? :network
+      %li.hidden
+        = link_to namespace_project_network_path(@project.namespace, @project, current_ref), title: 'Network', class: 'shortcuts-network' do
+          Network
 
-  -# Global shortcut to network page for compatibility
-  - if project_nav_tab? :network
+    -# Shortcut to create a new issue
     %li.hidden
-      = link_to namespace_project_network_path(@project.namespace, @project, current_ref), title: 'Network', class: 'shortcuts-network' do
-        Network
+      = link_to new_namespace_project_issue_path(@project.namespace, @project), class: 'shortcuts-new-issue' do
+        Create a new issue
 
-  -# Shortcut to create a new issue
-  %li.hidden
-    = link_to new_namespace_project_issue_path(@project.namespace, @project), class: 'shortcuts-new-issue' do
-      Create a new issue
+    .fade-right