Merge branch 'scrollable-secondary-tabs' into 'master'

Fixed inner page tabs not being scrollable

Closes #18853

See merge request !10204

app/assets/javascripts/layout_nav.js

@@ -11,8 +11,9 @@
     });
   };
 
-  $(function() {
-    var $scrollingTabs = $('.scrolling-tabs');
+  $(document).on('init.scrolling-tabs', () => {
+    const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
+    $scrollingTabs.addClass('is-initialized');
 
     hideEndFade($scrollingTabs);
     $(window).off('resize.nav').on('resize.nav', function() {

app/assets/javascripts/main.js

@@ -370,4 +370,6 @@ $(function () {
   new Aside();
 
   gl.utils.initTimeagoTimeout();
+
+  $(document).trigger('init.scrolling-tabs');
 });

app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js

@@ -16,8 +16,12 @@ export default {
     },
   },
 
+  mounted() {
+    $(document).trigger('init.scrolling-tabs');
+  },
+
   template: `
-    <ul class="nav-links">
+    <ul class="nav-links scrolling-tabs">
       <li
         class="js-pipelines-tab-all"
         :class="{ 'active': scope === 'all'}">

app/assets/javascripts/vue_pipelines_index/pipelines.js

@@ -182,8 +182,14 @@ export default {
     <div :class="cssClass">
 
       <div
-        class="top-area"
+        class="top-area scrolling-tabs-container inner-page-scroll-tabs"
         v-if="!isLoading && !shouldRenderEmptyState">
+        <div class="fade-left">
+          <i class="fa fa-angle-left" aria-hidden="true"></i>
+        </div>
+        <div class="fade-right">
+          <i class="fa fa-angle-right" aria-hidden="true"></i>
+        </div>
         <navigation-tabs
           :scope="scope"
           :count="state.count"

app/assets/stylesheets/framework/nav.scss

@@ -476,3 +476,40 @@
     }
   }
 }
+
+.inner-page-scroll-tabs {
+  position: relative;
+
+  .fade-right {
+    @include fade(left, $white-light);
+    right: 0;
+    text-align: right;
+
+    .fa {
+      right: 5px;
+    }
+  }
+
+  .fade-left {
+    @include fade(right, $white-light);
+    left: 0;
+    text-align: left;
+
+    .fa {
+      left: 5px;
+    }
+  }
+
+  .fade-right,
+  .fade-left {
+    top: 16px;
+    bottom: auto;
+  }
+
+  &.is-smaller {
+    .fade-right,
+    .fade-left {
+      top: 11px;
+    }
+  }
+}

app/views/dashboard/_projects_head.html.haml

 = content_for :flash_message do
   = render 'shared/project_limit'
-.top-area
-  %ul.nav-links
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  .fade-left= icon('angle-left')
+  .fade-right= icon('angle-right')
+  %ul.nav-links.scrolling-tabs
     = nav_link(page: [dashboard_projects_path, root_path]) do
       = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do
         Your projects

app/views/projects/merge_requests/_show.html.haml

@@ -52,8 +52,10 @@
       = render 'award_emoji/awards_block', awardable: @merge_request, inline: true
 
     .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
-      .merge-request-tabs-container
-        %ul.merge-request-tabs.nav-links.no-top.no-bottom
+      .merge-request-tabs-container.scrolling-tabs-container.inner-page-scroll-tabs
+        .fade-left= icon('angle-left')
+        .fade-right= icon('angle-right')
+        %ul.merge-request-tabs.nav-links.scrolling-tabs
           %li.notes-tab
             = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
               Discussion

app/views/search/_category.html.haml

-%ul.nav-links.search-filter
+.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
+  .fade-left= icon('angle-left')
+  .fade-right= icon('angle-right')
+  %ul.nav-links.search-filter.scrolling-tabs
     - if @project
       %li{ class: active_when(@scope == 'blobs') }
         = link_to search_filter_path(scope: 'blobs') do

app/views/shared/milestones/_tabs.html.haml

-%ul.nav-links.no-top.no-bottom
+.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
+  .fade-left= icon('angle-left')
+  .fade-right= icon('angle-right')
+  %ul.nav-links.scrolling-tabs
     - if milestone.is_a?(GlobalMilestone) || can?(current_user, :read_issue, @project)
       %li.active
         = link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do

app/views/users/show.html.haml

@@ -79,7 +79,10 @@
         %p.profile-user-bio
           = @user.bio
 
-    %ul.nav-links.center.user-profile-nav
+    .scrolling-tabs-container
+      .fade-left= icon('angle-left')
+      .fade-right= icon('angle-right')
+      %ul.nav-links.center.user-profile-nav.scrolling-tabs
         %li.js-activity-tab
           = link_to user_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do
             Activity

changelogs/unreleased/scrollable-secondary-tabs.yml

+---
+title: Fixed tabs not scrolling on mobile
+merge_request:
+author: