Merge branch '17339-mobile-navigation' into 'master'

Mobile navigation fade out

Closes #17339     
Closes #17610  

<img src="/uploads/e382dd363bf8beb28339fa6b152be092/Screen_Shot_2016-05-18_at_10.16.59_AM.png" width="400px">


See merge request !4195

app/assets/javascripts/layout_nav.js.coffee

+class @LayoutNav
+  $ ->
+    $('.fade-left').addClass('end-scroll')
+    $('.scrolling-tabs').on 'scroll', (event) ->
+      $this = $(this)
+      $el = $(event.target)
+      currentPosition = $this.scrollLeft()
+      size = bp.getBreakpointSize()
+      controlBtnWidth = $('.controls').width()
+      maxPosition = $this.get(0).scrollWidth - $this.parent().width()
+      maxPosition += controlBtnWidth if size isnt 'xs' and $('.nav-control').length
+
+      $el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
+      $el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)

app/assets/stylesheets/framework/nav.scss

+@mixin fade($gradient-direction, $rgba, $gradient-color) {
+  visibility: visible;
+  opacity: 1;
+  position: absolute;
+  bottom: 12px;
+  width: 43px;
+  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%);
+
+  &.end-scroll {
+    visibility: hidden;
+    opacity: 0;
+    transition-duration: .3s;
+  }
+}
+
+@mixin scrolling-links() {
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 .nav-links {
   padding: 0;
   margin: 0;
@@ -209,13 +240,8 @@
     float: right;
     padding: 7px 0 0;
 
-    @media (max-width: $screen-xs-min) {
-      float: none;
-      padding: 0 9px;
-
-      .dropdown-new {
-        width: 100%;
-      }
+    @media (max-width: $screen-xs-max) {
+      display: none;
     }
 
     i {
@@ -246,14 +272,18 @@
   }
 
   .nav-links {
+    @include scrolling-links();
     border-bottom: none;
     height: 51px;
-    white-space: nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    &::-webkit-scrollbar {
-      display: none;
+
+    .fade-right {
+      @include fade(left, rgba(250, 250, 250, 0.4), $background-color);
+      right: 0;
+    }
+
+    .fade-left {
+      @include fade(right, rgba(250, 250, 250, 0.4), $background-color);
+      left: 0;
     }
 
     li {
@@ -278,16 +308,39 @@
     }
   }
 
+  .nav-control {
+    .fade-right {
+
+      @media (min-width: $screen-xs-max) {
+        right: 67px;
+      }
+      @media (max-width: $screen-xs-min) {
+        right: 0;
+      }
+    }
+  }
 }
 
-.page-with-layout-nav {
-  margin-top: $header-height + 2;
+.nav-block {
+  position: relative;
 
-  &.controls-dropdown-visible {
-    @media (max-width: $screen-xs-min) {
-      margin-top: 96px;
+  .nav-links {
+    @include scrolling-links();
+
+    .fade-right {
+      @include fade(left, rgba(255, 255, 255, 0.4), $white-light);
+      right: 0;
+    }
+
+    .fade-left {
+      @include fade(right, rgba(255, 255, 255, 0.4), $white-light);
+      left: 0;
     }
   }
+}
+
+.page-with-layout-nav {
+  margin-top: $header-height + 2;
 
   .right-sidebar {
     top: ($header-height * 2) + 2;

app/assets/stylesheets/framework/sidebar.scss

@@ -324,7 +324,7 @@
 
   .layout-nav {
     @media (max-width: $screen-xs-min) {
-      padding-right: 0;;
+      padding-right: 0;
     }
 
     @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {

app/helpers/nav_helper.rb

@@ -48,7 +48,7 @@ module NavHelper
     "page-with-layout-nav" if defined?(nav) && nav
   end
 
-  def layout_dropdown_class
-    "controls-dropdown-visible" if current_user
+  def nav_control_class
+    "nav-control" if current_user
   end
 end

app/views/layouts/_page.html.haml

@@ -25,7 +25,7 @@
     .layout-nav
       .container-fluid
         = render "layouts/nav/#{nav}"
-  .content-wrapper{ class: "#{layout_nav_class} #{layout_dropdown_class}" }
+  .content-wrapper{ class: "#{layout_nav_class}" }
     = render "layouts/broadcast"
     = render "layouts/flash"
     = yield :flash_message

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

-= render 'layouts/nav/group_settings'
+%div{ class: nav_control_class }
+  = render 'layouts/nav/group_settings'
 
-%ul.nav-links
-  = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
-    = link_to group_path(@group), title: 'Home' do
-      = icon('group fw')
-      %span
-        Group
-  = nav_link(path: 'groups#activity') do
-    = link_to activity_group_path(@group), title: 'Activity' do
-      = icon('dashboard fw')
-      %span
-        Activity
-  = nav_link(controller: [:group, :milestones]) do
-    = link_to group_milestones_path(@group), title: 'Milestones' do
-      = icon('clock-o fw')
-      %span
-        Milestones
-  = nav_link(path: 'groups#issues') do
-    = link_to issues_group_path(@group), title: 'Issues' do
-      = icon('exclamation-circle fw')
-      %span
-        Issues
-        - issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute
-        %span.badge.count= number_with_delimiter(issues.count)
-  = nav_link(path: 'groups#merge_requests') do
-    = link_to merge_requests_group_path(@group), title: 'Merge Requests' do
-      = icon('tasks fw')
-      %span
-        Merge Requests
-        - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened').execute
-        %span.badge.count= number_with_delimiter(merge_requests.count)
-  = nav_link(controller: [:group_members]) do
-    = link_to group_group_members_path(@group), title: 'Members' do
-      = icon('users fw')
-      %span
-        Members
+  %ul.nav-links.scrolling-tabs
+    .fade-left
+    = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
+      = link_to group_path(@group), title: 'Home' do
+        = icon('group fw')
+        %span
+          Group
+    = nav_link(path: 'groups#activity') do
+      = link_to activity_group_path(@group), title: 'Activity' do
+        = icon('dashboard fw')
+        %span
+          Activity
+    = nav_link(controller: [:group, :milestones]) do
+      = link_to group_milestones_path(@group), title: 'Milestones' do
+        = icon('clock-o fw')
+        %span
+          Milestones
+    = nav_link(path: 'groups#issues') do
+      = link_to issues_group_path(@group), title: 'Issues' do
+        = icon('exclamation-circle fw')
+        %span
+          Issues
+          - issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute
+          %span.badge.count= number_with_delimiter(issues.count)
+    = nav_link(path: 'groups#merge_requests') do
+      = link_to merge_requests_group_path(@group), title: 'Merge Requests' do
+        = icon('tasks fw')
+        %span
+          Merge Requests
+          - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened').execute
+          %span.badge.count= number_with_delimiter(merge_requests.count)
+    = nav_link(controller: [:group_members]) do
+      = link_to group_group_members_path(@group), title: 'Members' do
+        = icon('users fw')
+        %span
+          Members
+    .fade-right

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

-%ul.nav-links
+%ul.nav-links.scrolling-tabs
+  .fade-left
   = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
     = link_to profile_path, title: 'Profile Settings' do
       = icon('user fw')
@@ -47,3 +48,4 @@
       = icon('history fw')
       %span
         Audit Log
+  .fade-right

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

app/views/shared/_event_filter.html.haml

-%ul.nav-links.event-filter
+%ul.nav-links.event-filter.scrolling-tabs
+  .fade-left
   = event_filter_link EventFilter.push, 'Push events'
   = event_filter_link EventFilter.merged, 'Merge events'
   = event_filter_link EventFilter.comments, 'Comments'
   = event_filter_link EventFilter.team, 'Team'
+  .fade-right