Remove unneeded afix logic and added both instances of the nav to the mr show

8 files changed, 57 insertions, 113 deletions

diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
index a2d33b0936e..129ad173f43 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
@@ -58,12 +58,15 @@ $(() => {
 
   gl.diffNotesCompileComponents();
 
-  new Vue({
-    el: '#resolve-count-app',
-    components: {
-      'resolve-count': ResolveCount
-    }
-  });
+  [...document.querySelectorAll('#resolve-count-app, #resolve-count-app-sticky')]
+    .forEach((mountPoint) => {
+      new Vue({
+        el: `#${mountPoint.id}`,
+        components: {
+          'resolve-count': ResolveCount
+        }
+      });
+    });
 
   $(window).trigger('resize.nav');
 });
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 122ec138c59..246a325a6e7 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -86,7 +86,7 @@
       // This is required to handle non-unicode characters in hash
       hash = decodeURIComponent(hash);
 
-      var fixedTabs = document.querySelector('.js-tabs-affix');
+      var fixedTabs = document.querySelector('.js-sticky-tabs');
       var fixedNav = document.querySelector('.navbar-gitlab');
 
       var adjustment = 0;
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 786b6014dc6..71ac0c1840e 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -77,7 +77,6 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
 
       this.bindEvents();
       this.activateTab(action);
-      this.initAffix();
     }
 
     bindEvents() {
@@ -157,7 +156,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
       if (location.hash) {
         const offset = 0 - (
           $('.navbar-gitlab').outerHeight() +
-          $('.js-tabs-affix').outerHeight()
+          $('.js-sticky-tabs').outerHeight()
         );
         const $el = $(`${container} ${location.hash}:not(.match)`);
         if ($el.length) {
@@ -381,40 +380,6 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
         }
       }, 0);
     }
-
-    initAffix() {
-      const $tabs = $('.js-tabs-affix');
-      const $fixedNav = $('.navbar-gitlab');
-
-      // Screen space on small screens is usually very sparse
-      // So we dont affix the tabs on these
-      if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
-
-      /**
-        If the browser does not support position sticky, it returns the position as static.
-        If the browser does support sticky, then we allow the browser to handle it, if not
-        then we default back to Bootstraps affix
-      **/
-      if ($tabs.css('position') !== 'static') return;
-
-      const $diffTabs = $('#diff-notes-app');
-
-      $tabs.off('affix.bs.affix affix-top.bs.affix')
-        .affix({
-          offset: {
-            top: () => (
-              $diffTabs.offset().top - $tabs.height() - $fixedNav.height()
-            ),
-          },
-        })
-        .on('affix.bs.affix', () => $diffTabs.css({ marginTop: $tabs.height() }))
-        .on('affix-top.bs.affix', () => $diffTabs.css({ marginTop: '' }));
-
-      // Fix bug when reloading the page already scrolling
-      if ($tabs.hasClass('affix')) {
-        $tabs.trigger('affix.bs.affix');
-      }
-    }
   }
 
   window.gl = window.gl || {};
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 5cf9330b8f8..bd821bf52f8 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -36,10 +36,6 @@
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter_collapsed_width;
     }
-
-    .merge-request-tabs-holder.affix {
-      right: $gutter_collapsed_width;
-    }
   }
 
   .sidebar-collapsed-icon {
@@ -65,14 +61,6 @@
     .content-wrapper {
       padding-right: $gutter_width;
     }
-
-    &:not(.with-overlay) .merge-request-tabs-holder.affix {
-      right: $gutter_width;
-    }
-
-    &.with-overlay .merge-request-tabs-holder.affix {
-      right: $gutter_collapsed_width;
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 92a1a4f5472..5f8018be0d2 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -747,20 +747,6 @@
     }
   }
 
-  &.affix {
-    left: 0;
-    transition: right .15s;
-
-    @media (max-width: $screen-xs-max) {
-      right: 0;
-    }
-
-    .merge-request-tabs-container {
-      padding-left: $gl-padding;
-      padding-right: $gl-padding;
-    }
-  }
-
   .nav-links {
     border: 0;
   }
@@ -796,10 +782,8 @@
 }
 
 .content-limit-container-width:not(.content-container-limited) {
-  .merge-request-tabs-holder:not(.affix) {
-    .merge-request-tabs-container {
-      max-width: $limited-layout-width - ($gl-padding * 2);
-    }
+  .merge-request-tabs-holder .merge-request-tabs-container {
+    max-width: $limited-layout-width - ($gl-padding * 2);
   }
 }
 
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 3f07ef35f46..445a8762744 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -5,8 +5,8 @@
         = render "layouts/nav/#{nav}"
   - if content_for?(:sub_nav)
     = yield :sub_nav
-  - if content_for?(:sticky_nav)
-    = yield :sticky_nav
+  - if content_for?(:sticky_tabs)
+    = yield :sticky_tabs
   .content-wrapper{ class: layout_nav_class }
     .alert-wrapper
       = render "layouts/broadcast"
diff --git a/app/views/projects/merge_requests/_nav.html.haml b/app/views/projects/merge_requests/_nav.html.haml
new file mode 100644
index 00000000000..6a4fb6fb2f3
--- /dev/null
+++ b/app/views/projects/merge_requests/_nav.html.haml
@@ -0,0 +1,39 @@
+- is_sticky = local_assigns.fetch(:is_sticky, false)
+
+.merge-request-tabs-holder.js-sticky-tabs{ class: content_class_ref }
+  .merge-request-tabs-container
+    .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
+      .fade-left= icon('angle-left')
+      .fade-right= icon('angle-right')
+      .nav-links.scrolling-tabs
+        %ul.merge-request-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
+              %span.badge= merge_request.related_notes.user.count
+          - if merge_request.source_project
+            %li.commits-tab
+              = link_to commits_namespace_project_merge_request_path(project.namespace, project, merge_request), data: { target: 'div#commits', action: 'commits', toggle: 'tab' } do
+                Commits
+                %span.badge= @commits_count
+          - if @pipelines.any?
+            %li.pipelines-tab
+              = link_to pipelines_namespace_project_merge_request_path(project.namespace, project, merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do
+                Pipelines
+                %span.badge= @pipelines.size
+          %li.diffs-tab
+            = link_to diffs_namespace_project_merge_request_path(project.namespace, project, merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
+              Changes
+              %span.badge= merge_request.diff_size
+    .line-resolve-all-container.prepend-top-10{ "v-cloak" => true, id: "resolve-count-app#{'-sticky' if is_sticky}" }
+      %resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}" }
+        %div
+          .line-resolve-all{ "v-show" => "discussionCount > 0",
+            ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" }
+            %span.line-resolve-btn.is-disabled{ type: "button",
+                ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" }
+              = render "shared/icons/icon_status_success.svg"
+            %span.line-resolve-text
+              {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved
+          = render "discussions/new_issue_for_all_discussions", merge_request: merge_request
+          = render "discussions/jump_to_next"
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 29cce87e37b..746f1f3bfc1 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -5,6 +5,8 @@
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('diff_notes')
+- content_for :sticky_tabs do
+  = render 'nav', project: @project, merge_request: @merge_request, is_sticky: true
 
 .merge-request{ 'data-url' => merge_request_path(@merge_request, format: :json), 'data-project-path' => project_path(@merge_request.project) }
   = render "projects/merge_requests/show/mr_title"
@@ -27,44 +29,7 @@
     .content-block.content-block-small.emoji-list-container
       = render 'award_emoji/awards_block', awardable: @merge_request, inline: true
 
-    = content_for :sticky_nav do
-      .merge-request-tabs-holder{ class: "#{'js-tabs-affix' unless ENV['RAILS_ENV'] == 'test'} #{content_class_ref}" }
-        .merge-request-tabs-container
-          .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
-            .fade-left= icon('angle-left')
-            .fade-right= icon('angle-right')
-            .nav-links.scrolling-tabs
-              %ul.merge-request-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
-                    %span.badge= @merge_request.related_notes.user.count
-                - if @merge_request.source_project
-                  %li.commits-tab
-                    = link_to commits_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#commits', action: 'commits', toggle: 'tab' } do
-                      Commits
-                      %span.badge= @commits_count
-                - if @pipelines.any?
-                  %li.pipelines-tab
-                    = link_to pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do
-                      Pipelines
-                      %span.badge= @pipelines.size
-                %li.diffs-tab
-                  = link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
-                    Changes
-                    %span.badge= @merge_request.diff_size
-          #resolve-count-app.line-resolve-all-container.prepend-top-10{ "v-cloak" => true }
-            %resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}" }
-              %div
-                .line-resolve-all{ "v-show" => "discussionCount > 0",
-                  ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" }
-                  %span.line-resolve-btn.is-disabled{ type: "button",
-                      ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" }
-                    = render "shared/icons/icon_status_success.svg"
-                  %span.line-resolve-text
-                    {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved
-                = render "discussions/new_issue_for_all_discussions", merge_request: @merge_request
-                = render "discussions/jump_to_next"
+    = render 'nav', project: @project, merge_request: @merge_request
 
     .tab-content#diff-notes-app
       #notes.notes.tab-pane.voting_notes