diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js index a3abc8b8e90..9de67015094 100644 --- a/app/assets/javascripts/right_sidebar.js +++ b/app/assets/javascripts/right_sidebar.js @@ -8,7 +8,7 @@ import axios from './lib/utils/axios_utils'; import { sprintf, s__, __ } from './locale'; const updateSidebarClasses = (layoutPage, rightSidebar) => { - if (window.innerWidth >= 768) { + if (window.innerWidth >= 992) { layoutPage.classList.remove('right-sidebar-expanded', 'right-sidebar-collapsed'); rightSidebar.classList.remove('right-sidebar-collapsed'); rightSidebar.classList.add('right-sidebar-expanded'); diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 217c6a7567c..13982a75006 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -28,7 +28,7 @@ } &.is-merge-request { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { .content-wrapper { padding-right: $gutter-collapsed-width; } @@ -73,9 +73,11 @@ } } - @include media-breakpoint-up(md) { - .content-wrapper { - padding-right: $gutter-width; + &:not(.is-merge-request) { + @include media-breakpoint-up(md) { + .content-wrapper { + padding-right: $gutter-width; + } } } } @@ -84,7 +86,7 @@ border-left: 1px solid $gray-100; &.right-sidebar-merge-requests { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { border-left: 0; } } diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 09284886d8d..d88bb8174e3 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -737,7 +737,7 @@ $tabs-holder-z-index: 250; } .merge-request-overview { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { display: grid; grid-template-columns: calc(95% - 270px) auto; grid-gap: 5%; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 5b14e85d8ea..0ceb1e039cd 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -145,8 +145,9 @@ } &.right-sidebar-merge-requests { - @include media-breakpoint-down(sm) { + @include media-breakpoint-down(md) { @include right-sidebar; + z-index: 251; } } @@ -197,7 +198,7 @@ } .block { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { padding: $gl-spacing-scale-5 0; } } @@ -287,7 +288,7 @@ padding: 0 20px; &.is-merge-request { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { padding: 0; } } @@ -341,7 +342,7 @@ } &.right-sidebar-merge-requests { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { display: block; } } diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml index 5ef97f2de27..9672dca7616 100644 --- a/app/views/projects/merge_requests/show.html.haml +++ b/app/views/projects/merge_requests/show.html.haml @@ -22,7 +22,7 @@ = render "projects/merge_requests/mr_box" .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') } .merge-request-tabs-container{ class: "#{'is-merge-request' if !fluid_layout}" } - %ul.merge-request-tabs.nav-tabs.nav.nav-links + %ul.merge-request-tabs.nav-tabs.nav.nav-links{ class: "#{'gl-w-full gl-lg-w-auto!' if Feature.enabled?(:moved_mr_sidebar, @project)}" } = render "projects/merge_requests/tabs/tab", class: "notes-tab", qa_selector: "notes_tab" do = tab_link_for @merge_request, :show, force_link: @commit.present? do = _("Overview") @@ -41,6 +41,11 @@ = tab_link_for @merge_request, :diffs do = _("Changes") = gl_badge_tag @diffs_count, { size: :sm } + - if Feature.enabled?(:moved_mr_sidebar, @project) + .gl-ml-auto.gl-align-items-center.gl-display-none.gl-md-display-flex{ class: "gl-lg-display-none!" } + %button.btn.btn-default.gl-button.btn-sm.js-sidebar-toggle{ type: 'button' } + = sprite_icon('angle-double-left', size: 12, css_class: 'gl-mr-2') + = _('Expand') .d-flex.flex-wrap.align-items-center.justify-content-lg-end #js-vue-discussion-counter{ data: { blocks_merge: @project.only_allow_merge_if_all_discussions_are_resolved?.to_s } } diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 674b082bdb2..f1d7fca37e1 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -13,7 +13,7 @@ %aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: "#{sidebar_gutter_collapsed_class} #{'right-sidebar-merge-requests' if moved_sidebar_enabled}", 'aria-live' => 'polite', 'aria-label': issuable_type } .issuable-sidebar{ class: "#{'is-merge-request' if moved_sidebar_enabled}" } - .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-md-display-none!' if moved_sidebar_enabled}" } + .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-lg-display-none!' if moved_sidebar_enabled}" } %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", class: "#{'gl-display-block' if moved_sidebar_enabled}", href: "#", "aria-label" => _('Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } } = sidebar_gutter_toggle_icon - if signed_in && !moved_sidebar_enabled