Merge branch 'add-vertical-scrolling-sub-nav' into 'master'

Add horizontal scrolling to all sub-navs on mobile viewports

## What does this MR do?
Adds horizontal scrolling to all the sub navigation on mobile views. This was previously only available on the repository tab (commits page). 

## Are there points in the code the reviewer needs to double check?
Perhaps a better way to refactor out the common haml code

## Why was this MR needed?
Adding it to all to keep the UI consistency and to offer mobile users a better interface

## What are the relevant issue numbers?
Closes #20779 

## Screenshots (if relevant)
Before:
![Screen_Shot_2016-08-23_at_3.52.35_PM](/uploads/3833da4252cf616266a77654cee89faf/Screen_Shot_2016-08-23_at_3.52.35_PM.png)

After:
![Screen_Shot_2016-08-23_at_3.52.21_PM](/uploads/5a023bb1e639f16f2471009dd6ae0d62/Screen_Shot_2016-08-23_at_3.52.21_PM.png)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- Tests
  - [x] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !5762

10 files changed, 145 insertions, 129 deletions

diff --git a/CHANGELOG b/CHANGELOG
index df8dec7bdde..16c4b7cb858 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -13,6 +13,7 @@ v 8.12.0 (unreleased)
   - Add Sentry logging to API calls
   - Automatically expand hidden discussions when accessed by a permalink !5585 (Mike Greiling)
   - Fix groups sort dropdown alignment (ClemMakesApps)
+  - Add horizontal scrolling to all sub-navs on mobile viewports (ClemMakesApps)
   - Added tests for diff notes
   - Add delimiter to project stars and forks count (ClemMakesApps)
   - Fix badge count alignment (ClemMakesApps)
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 9e924f99e9c..7854f419bc2 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -1,4 +1,4 @@
-@mixin fade($gradient-direction, $rgba, $gradient-color) {
+@mixin fade($gradient-direction, $gradient-color) {
   visibility: hidden;
   opacity: 0;
   z-index: 2;
@@ -8,10 +8,10 @@
   height: 30px;
   transition-duration: .3s;
   -webkit-transform: translateZ(0);
-  background: -webkit-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
-  background: -o-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
-  background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
-  background: linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
+  background: -webkit-linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
+  background: -o-linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
+  background: -moz-linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
+  background: linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
 
   &.scrolling {
     visibility: visible;
@@ -356,7 +356,7 @@
   }
 
   .fade-right {
-    @include fade(left, rgba(255, 255, 255, 0.4), $background-color);
+    @include fade(left, $background-color);
     right: -5px;
 
     .fa {
@@ -365,7 +365,7 @@
   }
 
   .fade-left {
-    @include fade(right, rgba(255, 255, 255, 0.4), $background-color);
+    @include fade(right, $background-color);
     left: -5px;
 
     .fa {
@@ -376,6 +376,7 @@
   &.sub-nav-scroll {
 
     .fade-right {
+      @include fade(left, $dark-background-color);
       right: 0;
 
       .fa {
@@ -384,6 +385,7 @@
     }
 
     .fade-left {
+      @include fade(right, $dark-background-color);
       left: 0;
 
       .fa {
@@ -400,7 +402,7 @@
     @include scrolling-links();
 
     .fade-right {
-      @include fade(left, rgba(255, 255, 255, 0.4), $white-light);
+      @include fade(left, $white-light);
       right: -5px;
 
       .fa {
@@ -409,7 +411,7 @@
     }
 
     .fade-left {
-      @include fade(right, rgba(255, 255, 255, 0.4), $white-light);
+      @include fade(right, $white-light);
       left: -5px;
 
       .fa {
diff --git a/app/views/admin/background_jobs/_head.html.haml b/app/views/admin/background_jobs/_head.html.haml
index 89d7a40d6b0..107fc25244a 100644
--- a/app/views/admin/background_jobs/_head.html.haml
+++ b/app/views/admin/background_jobs/_head.html.haml
@@ -1,22 +1,24 @@
-.nav-links.sub-nav
-  %ul{ class: (container_class) }
-    = nav_link(controller: :system_info) do
-      = link_to admin_system_info_path, title: 'System Info' do
-        %span
-          System Info
-    = nav_link(controller: :background_jobs) do
-      = link_to admin_background_jobs_path, title: 'Background Jobs' do
-        %span
-          Background Jobs
-    = nav_link(controller: :logs) do
-      = link_to admin_logs_path, title: 'Logs' do
-        %span
-          Logs
-    = nav_link(controller: :health_check) do
-      = link_to admin_health_check_path, title: 'Health Check' do
-        %span
-          Health Check
-    = nav_link(controller: :requests_profiles) do
-      = link_to admin_requests_profiles_path, title: 'Requests Profiles' do
-        %span
-          Requests Profiles
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
+    %ul{ class: (container_class) }
+      = nav_link(controller: :system_info) do
+        = link_to admin_system_info_path, title: 'System Info' do
+          %span
+            System Info
+      = nav_link(controller: :background_jobs) do
+        = link_to admin_background_jobs_path, title: 'Background Jobs' do
+          %span
+            Background Jobs
+      = nav_link(controller: :logs) do
+        = link_to admin_logs_path, title: 'Logs' do
+          %span
+            Logs
+      = nav_link(controller: :health_check) do
+        = link_to admin_health_check_path, title: 'Health Check' do
+          %span
+            Health Check
+      = nav_link(controller: :requests_profiles) do
+        = link_to admin_requests_profiles_path, title: 'Requests Profiles' do
+          %span
+            Requests Profiles
diff --git a/app/views/admin/dashboard/_head.html.haml b/app/views/admin/dashboard/_head.html.haml
index b74da64f82e..c91ab4cb946 100644
--- a/app/views/admin/dashboard/_head.html.haml
+++ b/app/views/admin/dashboard/_head.html.haml
@@ -1,26 +1,28 @@
-.nav-links.sub-nav
-  %ul{ class: (container_class) }
-    = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
-      = link_to admin_root_path, title: 'Overview' do
-        %span
-          Overview
-    = nav_link(controller: [:admin, :projects]) do
-      = link_to admin_namespaces_projects_path, title: 'Projects' do
-        %span
-          Projects
-    = nav_link(controller: :users) do
-      = link_to admin_users_path, title: 'Users' do
-        %span
-          Users
-    = nav_link(controller: :groups) do
-      = link_to admin_groups_path, title: 'Groups' do
-        %span
-          Groups
-    = nav_link path: 'builds#index' do
-      = link_to admin_builds_path, title: 'Builds' do
-        %span
-          Builds
-    = nav_link path: ['runners#index', 'runners#show'] do
-      = link_to admin_runners_path, title: 'Runners' do
-        %span
-          Runners
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
+    %ul{ class: (container_class) }
+      = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
+        = link_to admin_root_path, title: 'Overview' do
+          %span
+            Overview
+      = nav_link(controller: [:admin, :projects]) do
+        = link_to admin_namespaces_projects_path, title: 'Projects' do
+          %span
+            Projects
+      = nav_link(controller: :users) do
+        = link_to admin_users_path, title: 'Users' do
+          %span
+            Users
+      = nav_link(controller: :groups) do
+        = link_to admin_groups_path, title: 'Groups' do
+          %span
+            Groups
+      = nav_link path: 'builds#index' do
+        = link_to admin_builds_path, title: 'Builds' do
+          %span
+            Builds
+      = nav_link path: ['runners#index', 'runners#show'] do
+        = link_to admin_runners_path, title: 'Runners' do
+          %span
+            Runners
diff --git a/app/views/projects/commits/_head.html.haml b/app/views/projects/commits/_head.html.haml
index 61152649907..4d1ee1c5318 100644
--- a/app/views/projects/commits/_head.html.haml
+++ b/app/views/projects/commits/_head.html.haml
@@ -1,8 +1,5 @@
 .scrolling-tabs-container.sub-nav-scroll
-  .fade-left
-    = icon('angle-left')
-  .fade-right
-    = icon('angle-right')
+  = render 'shared/nav_scroll'
   .nav-links.sub-nav.scrolling-tabs
     %ul{ class: (container_class) }
       = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
diff --git a/app/views/projects/graphs/_head.html.haml b/app/views/projects/graphs/_head.html.haml
index 45e51389c00..a231d684559 100644
--- a/app/views/projects/graphs/_head.html.haml
+++ b/app/views/projects/graphs/_head.html.haml
@@ -1,16 +1,18 @@
-.nav-links.sub-nav
-  %ul{ class: (container_class) }
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
+    %ul{ class: (container_class) }
 
-    - content_for :page_specific_javascripts do
-      = page_specific_javascript_tag('lib/chart.js')
-      = page_specific_javascript_tag('graphs/graphs_bundle.js')
-    = nav_link(action: :show) do
-      = link_to 'Contributors', namespace_project_graph_path
-    = nav_link(action: :commits) do
-      = link_to 'Commits', commits_namespace_project_graph_path
-    = nav_link(action: :languages) do
-      = link_to 'Languages', languages_namespace_project_graph_path
-    - if @project.builds_enabled?
-      = nav_link(action: :ci) do
-        = link_to ci_namespace_project_graph_path do
-          Continuous Integration
+      - content_for :page_specific_javascripts do
+        = page_specific_javascript_tag('lib/chart.js')
+        = page_specific_javascript_tag('graphs/graphs_bundle.js')
+      = nav_link(action: :show) do
+        = link_to 'Contributors', namespace_project_graph_path
+      = nav_link(action: :commits) do
+        = link_to 'Commits', commits_namespace_project_graph_path
+      = nav_link(action: :languages) do
+        = link_to 'Languages', languages_namespace_project_graph_path
+      - if @project.builds_enabled?
+        = nav_link(action: :ci) do
+          = link_to ci_namespace_project_graph_path do
+            Continuous Integration
diff --git a/app/views/projects/issues/_head.html.haml b/app/views/projects/issues/_head.html.haml
index b6cb559afcb..f88b33018d0 100644
--- a/app/views/projects/issues/_head.html.haml
+++ b/app/views/projects/issues/_head.html.haml
@@ -1,30 +1,32 @@
-.nav-links.sub-nav
-  %ul{ class: (container_class) }
-    - if project_nav_tab?(:issues) && !current_controller?(:merge_requests)
-      = nav_link(controller: :issues) do
-        = link_to namespace_project_issues_path(@project.namespace, @project), title: 'Issues' do
-          %span
-            Issues
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
+    %ul{ class: (container_class) }
+      - if project_nav_tab?(:issues) && !current_controller?(:merge_requests)
+        = nav_link(controller: :issues) do
+          = link_to namespace_project_issues_path(@project.namespace, @project), title: 'Issues' do
+            %span
+              Issues
 
-      = nav_link(controller: :boards) do
-        = link_to namespace_project_board_path(@project.namespace, @project), title: 'Board' do
-          %span
-            Board
+        = nav_link(controller: :boards) do
+          = link_to namespace_project_board_path(@project.namespace, @project), title: 'Board' do
+            %span
+              Board
 
-    - if project_nav_tab?(:merge_requests) && current_controller?(:merge_requests)
-      = nav_link(controller: :merge_requests) do
-        = link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests' do
-          %span
-            Merge Requests
+      - if project_nav_tab?(:merge_requests) && current_controller?(:merge_requests)
+        = nav_link(controller: :merge_requests) do
+          = link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests' do
+            %span
+              Merge Requests
 
-    - if project_nav_tab? :labels
-      = nav_link(controller: :labels) do
-        = link_to namespace_project_labels_path(@project.namespace, @project), title: 'Labels' do
-          %span
-            Labels
+      - if project_nav_tab? :labels
+        = nav_link(controller: :labels) do
+          = link_to namespace_project_labels_path(@project.namespace, @project), title: 'Labels' do
+            %span
+              Labels
 
-    - if project_nav_tab? :milestones
-      = nav_link(controller: :milestones) do
-        = link_to namespace_project_milestones_path(@project.namespace, @project), title: 'Milestones' do
-          %span
-            Milestones
+      - if project_nav_tab? :milestones
+        = nav_link(controller: :milestones) do
+          = link_to namespace_project_milestones_path(@project.namespace, @project), title: 'Milestones' do
+            %span
+              Milestones
\ No newline at end of file
diff --git a/app/views/projects/pipelines/_head.html.haml b/app/views/projects/pipelines/_head.html.haml
index d65faf86d4e..f611ddc8f5f 100644
--- a/app/views/projects/pipelines/_head.html.haml
+++ b/app/views/projects/pipelines/_head.html.haml
@@ -1,19 +1,21 @@
-.nav-links.sub-nav
-  %ul{ class: (container_class) }
-    - if project_nav_tab? :pipelines
-      = nav_link(controller: :pipelines) do
-        = link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
-          %span
-            Pipelines
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
+    %ul{ class: (container_class) }
+      - if project_nav_tab? :pipelines
+        = nav_link(controller: :pipelines) do
+          = link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
+            %span
+              Pipelines
 
-    - if project_nav_tab? :builds
-      = nav_link(controller: %w(builds)) do
-        = link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
-          %span
-            Builds
+      - if project_nav_tab? :builds
+        = nav_link(controller: %w(builds)) do
+          = link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
+            %span
+              Builds
 
-    - if project_nav_tab? :environments
-      = nav_link(controller: %w(environments)) do
-        = link_to project_environments_path(@project), title: 'Environments', class: 'shortcuts-environments' do
-          %span
-            Environments
+      - if project_nav_tab? :environments
+        = nav_link(controller: %w(environments)) do
+          = link_to project_environments_path(@project), title: 'Environments', class: 'shortcuts-environments' do
+            %span
+              Environments
diff --git a/app/views/projects/wikis/_nav.html.haml b/app/views/projects/wikis/_nav.html.haml
index f8ea479e0b1..551a20c1044 100644
--- a/app/views/projects/wikis/_nav.html.haml
+++ b/app/views/projects/wikis/_nav.html.haml
@@ -1,13 +1,15 @@
-.nav-links.sub-nav
-  %ul{ class: (container_class) }
-    = nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do
-      = link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
+    %ul{ class: (container_class) }
+      = nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do
+        = link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)
 
-    = nav_link(path: 'wikis#pages') do
-      = link_to 'Pages', namespace_project_wiki_pages_path(@project.namespace, @project)
+      = nav_link(path: 'wikis#pages') do
+        = link_to 'Pages', namespace_project_wiki_pages_path(@project.namespace, @project)
 
-    = nav_link(path: 'wikis#git_access') do
-      = link_to namespace_project_wikis_git_access_path(@project.namespace, @project) do
-        Git Access
+      = nav_link(path: 'wikis#git_access') do
+        = link_to namespace_project_wikis_git_access_path(@project.namespace, @project) do
+          Git Access
 
-  = render 'projects/wikis/new'
+    = render 'projects/wikis/new'
diff --git a/app/views/shared/_nav_scroll.html.haml b/app/views/shared/_nav_scroll.html.haml
new file mode 100644
index 00000000000..4e3b1b3a571
--- /dev/null
+++ b/app/views/shared/_nav_scroll.html.haml
@@ -0,0 +1,4 @@
+.fade-left
+  = icon('angle-left')
+.fade-right
+  = icon('angle-right')
\ No newline at end of file