diff --git a/CHANGELOG b/CHANGELOG index 43b3b33155d..e9445a18a18 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -73,6 +73,7 @@ v 8.12.0 (unreleased) - Show queued time when showing a pipeline !6084 - Remove unused mixins (ClemMakesApps) - Add search to all issue board lists + - Scroll active tab into view on mobile - Fix groups sort dropdown alignment (ClemMakesApps) - Add horizontal scrolling to all sub-navs on mobile viewports (ClemMakesApps) - Use JavaScript tooltips for mentions !5301 (winniehell) diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js index ce472f3bcd0..8e2fc0d1479 100644 --- a/app/assets/javascripts/layout_nav.js +++ b/app/assets/javascripts/layout_nav.js @@ -10,11 +10,13 @@ }; $(function() { - hideEndFade($('.scrolling-tabs')); + var $scrollingTabs = $('.scrolling-tabs'); + + hideEndFade($scrollingTabs); $(window).off('resize.nav').on('resize.nav', function() { - return hideEndFade($('.scrolling-tabs')); + return hideEndFade($scrollingTabs); }); - return $('.scrolling-tabs').on('scroll', function(event) { + $scrollingTabs.off('scroll').on('scroll', function(event) { var $this, currentPosition, maxPosition; $this = $(this); currentPosition = $this.scrollLeft(); @@ -22,6 +24,23 @@ $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0); return $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1); }); + + $scrollingTabs.each(function () { + var $this = $(this), + scrollingTabWidth = $this.width(), + $active = $this.find('.active'), + activeWidth = $active.width(); + + if ($active.length) { + var offset = $active.offset().left + activeWidth; + + if (offset > scrollingTabWidth - 30) { + var scrollLeft = scrollingTabWidth / 2; + scrollLeft = (offset - scrollLeft) - (activeWidth / 2); + $this.scrollLeft(scrollLeft); + } + } + }); }); }).call(this);