Commit ac67ce85 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

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

Fixed inner page tabs not being scrollable

Closes #18853

See merge request !10204
parents 5906a256 28b8b92e
......@@ -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() {
......
......@@ -370,4 +370,6 @@ $(function () {
new Aside();
gl.utils.initTimeagoTimeout();
$(document).trigger('init.scrolling-tabs');
});
......@@ -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'}">
......
......@@ -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"
......
......@@ -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;
}
}
}
= 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
......
......@@ -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
......
%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
......
%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
......
......@@ -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
......
---
title: Fixed tabs not scrolling on mobile
merge_request:
author:
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment