Fixed alignment on some pages

Fixed pipelines tabs not showing arrows

7 files changed, 31 insertions, 11 deletions

diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js
index 08ca9e4fa4d..a5f99bcdd8f 100644
--- a/app/assets/javascripts/layout_nav.js
+++ b/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() {
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 9007d661d01..665a59f3183 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -370,4 +370,6 @@ $(function () {
   new Aside();
 
   gl.utils.initTimeagoTimeout();
+
+  $(document).trigger('init.scrolling-tabs');
 });
diff --git a/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js b/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js
index f965b24467f..1626ae17a30 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js
@@ -16,6 +16,10 @@ export default {
     },
   },
 
+  mounted() {
+    $(document).trigger('init.scrolling-tabs');
+  },
+
   template: `
     <ul class="nav-links scrolling-tabs">
       <li
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index 97c4d787412..9bdc232b7da 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -182,8 +182,14 @@ export default {
     <div :class="cssClass">
 
       <div
-        class="top-area scrolling-tabs-container"
+        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"
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 70b6eefc7a0..0e09638a8cc 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -480,12 +480,6 @@
 .inner-page-scroll-tabs {
   position: relative;
 
-  .fade-right,
-  .fade-left {
-    top: 17px;
-    bottom: 0;
-  }
-
   .fade-right {
     @include fade(left, $white-light);
     right: 0;
@@ -505,4 +499,17 @@
       left: 5px;
     }
   }
+
+  .fade-right,
+  .fade-left {
+    top: 16px;
+    bottom: auto;
+  }
+
+  &.is-smaller {
+    .fade-right,
+    .fade-left {
+      top: 11px;
+    }
+  }
 }
diff --git a/app/views/search/_category.html.haml b/app/views/search/_category.html.haml
index 4dcd162916b..059a0d1ac78 100644
--- a/app/views/search/_category.html.haml
+++ b/app/views/search/_category.html.haml
@@ -1,4 +1,4 @@
-.scrolling-tabs-container.inner-page-scroll-tabs
+.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
diff --git a/app/views/shared/milestones/_tabs.html.haml b/app/views/shared/milestones/_tabs.html.haml
index 5b3479cd1bc..9a4502873ef 100644
--- a/app/views/shared/milestones/_tabs.html.haml
+++ b/app/views/shared/milestones/_tabs.html.haml
@@ -1,4 +1,4 @@
-.scrolling-tabs-container.inner-page-scroll-tabs
+.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
   %ul.nav-links.scrolling-tabs