Yield MR sticky tabs above the content container so it can be full width

4 files changed, 62 insertions, 39 deletions

diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 59e0624d94e..92a1a4f5472 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -738,6 +738,13 @@
   @media(min-width: $screen-sm-min) {
     position: sticky;
     position: -webkit-sticky;
+
+    .merge-request-tabs-container {
+      margin: auto;
+      white-space: nowrap;
+      height: 50px;
+      padding: 0 $gl-padding;
+    }
   }
 
   &.affix {
@@ -765,7 +772,9 @@
   padding: 0;
 }
 
-.limit-container-width {
+.content-limit-container-width.merge-request-tabs-holder {
+  width: calc(100% - #{$gutter_collapsed_width});
+
   .merge-request-tabs-container {
     max-width: $limited-layout-width;
     margin-left: auto;
@@ -773,6 +782,10 @@
   }
 }
 
+.right-sidebar-expanded .merge-request-tabs-holder {
+  width: calc(100% - #{$gutter_width});
+}
+
 .merge-request-tabs-container {
   display: flex;
   justify-content: space-between;
@@ -782,7 +795,7 @@
   }
 }
 
-.limit-container-width:not(.container-limited) {
+.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);
diff --git a/app/helpers/appearances_helper.rb b/app/helpers/appearances_helper.rb
index 16136d02530..8f8bd2637fc 100644
--- a/app/helpers/appearances_helper.rb
+++ b/app/helpers/appearances_helper.rb
@@ -36,4 +36,11 @@ module AppearancesHelper
     #  File.read(Rails.root.join("app/views/shared/icons/_#{icon_name}.svg")).html_safe
     render "shared/icons/#{icon_name}.svg", size: size
   end
+
+  def content_class_ref(content_class = @content_class)
+    content_class
+      .split(/\s/)
+      .map {|klass| "content-#{klass}"}
+      .join(' ')
+  end
 end
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index b7df11681d3..3f07ef35f46 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -5,6 +5,8 @@
         = render "layouts/nav/#{nav}"
   - if content_for?(:sub_nav)
     = yield :sub_nav
+  - if content_for?(:sticky_nav)
+    = yield :sticky_nav
   .content-wrapper{ class: layout_nav_class }
     .alert-wrapper
       = render "layouts/broadcast"
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 75120409bb3..29cce87e37b 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -27,43 +27,44 @@
     .content-block.content-block-small.emoji-list-container
       = render 'award_emoji/awards_block', awardable: @merge_request, inline: true
 
-    .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
-      .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"
+    = 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"
 
     .tab-content#diff-notes-app
       #notes.notes.tab-pane.voting_notes