Scrolls active tab into middle of nav on mobile

1 files changed, 19 insertions, 3 deletions

diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js
index ce472f3bcd0..ab95009b9b8 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,20 @@
       $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(),
+          offset = $active.offset().left + activeWidth;
+
+      if (offset > scrollingTabWidth - 30) {
+        var scrollLeft = scrollingTabWidth / 2;
+        scrollLeft = (offset - scrollLeft) - (activeWidth / 2);
+        $this.scrollLeft(scrollLeft);
+      }
+    });
   });
 
 }).call(this);