Merge branch 'scrolling-tabs-center-mobile' into 'master'

Scrolls active tab into middle of nav on mobile

## What does this MR do?

On mobile (or smaller screens) it scrolls the currently active tab into the middle of the nav.

## Screenshots (if relevant)

![Screen_Shot_2016-09-15_at_09.38.55](/uploads/4170271b53b9509a385fa7844fb3dc78/Screen_Shot_2016-09-15_at_09.38.55.png)

See merge request !6363

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)

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);