diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index ce6a35054bb323269b127724470eb8bde51533dd..adaded9c85350bb421551cd5a2716dd7e8379dd9 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -168,6 +168,14 @@
.user-profile {
position: relative;
+ @include media-breakpoint-up(lg) {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ }
+}
+
+.user-profile-with-sidebar {
@include media-breakpoint-up(lg) {
display: grid;
grid-template-columns: 1fr $right-sidebar-width;
diff --git a/app/views/users/_profile_sidebar.html.haml b/app/views/users/_profile_sidebar.html.haml
index 759c7f81493ac557a07086fe8810fd73b372aea0..d93069f2dd27244afa5873275ff589c26f6f7509 100644
--- a/app/views/users/_profile_sidebar.html.haml
+++ b/app/views/users/_profile_sidebar.html.haml
@@ -2,7 +2,7 @@
.profile-header.gl-pb-5.gl-pt-3.gl-overflow-y-auto.gl-sm-pr-4
.gl-vertical-align-top.gl-text-left.gl-max-w-80.gl-overflow-wrap-anywhere
.user-info
- - if !@user.blocked? && @user.confirmed?
+ - if @user.confirmed?
.gl-display-flex.gl-gap-4.gl-flex-direction-column
- if @user.pronouns.present? || @user.pronunciation.present? || @user.bio.present?
%div
@@ -80,52 +80,3 @@
.gl-display-flex.gl-gap-2.gl-mb-2
= sprite_icon('discord', css_class: 'fgray gl-mt-1 flex-shrink-0')
= link_to @user.discord, discord_url(@user), class: 'gl-text-gray-900', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow'
-
- -# TODO: Remove this with the removal of the old navigation.
- -# See https://gitlab.com/gitlab-org/gitlab/-/issues/435899.
- - if !profile_tabs.empty? && !Feature.enabled?(:profile_tabs_vue, current_user)
- .scrolling-tabs-container.gl-display-none
- %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
- = sprite_icon('chevron-lg-left', size: 12)
- %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
- = sprite_icon('chevron-lg-right', size: 12)
- %ul.nav-links.user-profile-nav.scrolling-tabs.nav.nav-tabs.gl-border-b-0
- - if profile_tab?(:overview)
- %li.js-overview-tab
- = link_to user_path, data: { target: 'div#js-overview', action: 'overview', toggle: 'tab' } do
- = s_('UserProfile|Overview')
- - if profile_tab?(:activity)
- %li.js-activity-tab
- = link_to user_activity_path, data: { target: 'div#activity', action: 'activity', toggle: 'tab' } do
- = s_('UserProfile|Activity')
- - unless Feature.enabled?(:security_auto_fix) && @user.bot?
- - if profile_tab?(:groups)
- %li.js-groups-tab
- = link_to user_groups_path, data: { target: 'div#groups', action: 'groups', toggle: 'tab', endpoint: user_groups_path(format: :json) } do
- = s_('UserProfile|Groups')
- - if profile_tab?(:contributed)
- %li.js-contributed-tab
- = link_to user_contributed_projects_path, data: { target: 'div#contributed', action: 'contributed', toggle: 'tab', endpoint: user_contributed_projects_path(format: :json) } do
- = s_('UserProfile|Contributed projects')
- - if profile_tab?(:projects)
- %li.js-projects-tab
- = link_to user_projects_path, data: { target: 'div#projects', action: 'projects', toggle: 'tab', endpoint: user_projects_path(format: :json) } do
- = s_('UserProfile|Personal projects')
- - if profile_tab?(:starred)
- %li.js-starred-tab
- = link_to user_starred_projects_path, data: { target: 'div#starred', action: 'starred', toggle: 'tab', endpoint: user_starred_projects_path(format: :json), card_mode: true } do
- = s_('UserProfile|Starred projects')
- - if profile_tab?(:snippets)
- %li.js-snippets-tab
- = link_to user_snippets_path, data: { target: 'div#snippets', action: 'snippets', toggle: 'tab', endpoint: user_snippets_path(format: :json) } do
- = s_('UserProfile|Snippets')
- - if profile_tab?(:followers)
- %li.js-followers-tab
- = link_to user_followers_path, data: { target: 'div#followers', action: 'followers', toggle: 'tab', endpoint: user_followers_path(format: :json) } do
- = s_('UserProfile|Followers')
- = gl_badge_tag @user.followers.count, size: :sm
- - if profile_tab?(:following)
- %li.js-following-tab
- = link_to user_following_path, data: { target: 'div#following', action: 'following', toggle: 'tab', endpoint: user_following_path(format: :json), testid: 'following_tab' } do
- = s_('UserProfile|Following')
- = gl_badge_tag @user.followees.count, size: :sm
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 486e5b21c7959ff96a6156c5b52af0d5ec952ad6..f4688388035583ad2a1d198d3bf9490492667cb3 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -41,7 +41,7 @@
.gl-display-inline-flex.gl-gap-3.gl-align-items-baseline
= emoji_icon(@user.status.emoji)
= markdown_field(@user.status, :message)
- .user-profile
+ .user-profile{ class: @user.blocked? ? '' : 'user-profile-with-sidebar' }
.user-profile-content
- if !profile_tabs.empty? && Feature.enabled?(:profile_tabs_vue, current_user)
#js-profile-tabs{ data: user_profile_tabs_app_data(@user) }
@@ -98,4 +98,54 @@
= render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-private-md.svg',
title: s_('UserProfile|This user has a private profile'))
- = render 'users/profile_sidebar'
+ - unless @user.blocked?
+ = render 'users/profile_sidebar'
+
+ -# TODO: Remove this with the removal of the old navigatifon.
+ -# See https://gitlab.com/gitlab-org/gitlab/-/issues/435899.
+ - if !profile_tabs.empty? && !Feature.enabled?(:profile_tabs_vue, current_user)
+ .scrolling-tabs-container.gl-display-none
+ %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
+ = sprite_icon('chevron-lg-left', size: 12)
+ %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
+ = sprite_icon('chevron-lg-right', size: 12)
+ %ul.nav-links.user-profile-nav.scrolling-tabs.nav.nav-tabs.gl-border-b-0
+ - if profile_tab?(:overview)
+ %li.js-overview-tab
+ = link_to user_path, data: { target: 'div#js-overview', action: 'overview', toggle: 'tab' } do
+ = s_('UserProfile|Overview')
+ - if profile_tab?(:activity)
+ %li.js-activity-tab
+ = link_to user_activity_path, data: { target: 'div#activity', action: 'activity', toggle: 'tab' } do
+ = s_('UserProfile|Activity')
+ - unless Feature.enabled?(:security_auto_fix) && @user.bot?
+ - if profile_tab?(:groups)
+ %li.js-groups-tab
+ = link_to user_groups_path, data: { target: 'div#groups', action: 'groups', toggle: 'tab', endpoint: user_groups_path(format: :json) } do
+ = s_('UserProfile|Groups')
+ - if profile_tab?(:contributed)
+ %li.js-contributed-tab
+ = link_to user_contributed_projects_path, data: { target: 'div#contributed', action: 'contributed', toggle: 'tab', endpoint: user_contributed_projects_path(format: :json) } do
+ = s_('UserProfile|Contributed projects')
+ - if profile_tab?(:projects)
+ %li.js-projects-tab
+ = link_to user_projects_path, data: { target: 'div#projects', action: 'projects', toggle: 'tab', endpoint: user_projects_path(format: :json) } do
+ = s_('UserProfile|Personal projects')
+ - if profile_tab?(:starred)
+ %li.js-starred-tab
+ = link_to user_starred_projects_path, data: { target: 'div#starred', action: 'starred', toggle: 'tab', endpoint: user_starred_projects_path(format: :json), card_mode: true } do
+ = s_('UserProfile|Starred projects')
+ - if profile_tab?(:snippets)
+ %li.js-snippets-tab
+ = link_to user_snippets_path, data: { target: 'div#snippets', action: 'snippets', toggle: 'tab', endpoint: user_snippets_path(format: :json) } do
+ = s_('UserProfile|Snippets')
+ - if profile_tab?(:followers)
+ %li.js-followers-tab
+ = link_to user_followers_path, data: { target: 'div#followers', action: 'followers', toggle: 'tab', endpoint: user_followers_path(format: :json) } do
+ = s_('UserProfile|Followers')
+ = gl_badge_tag @user.followers.count, size: :sm
+ - if profile_tab?(:following)
+ %li.js-following-tab
+ = link_to user_following_path, data: { target: 'div#following', action: 'following', toggle: 'tab', endpoint: user_following_path(format: :json), testid: 'following_tab' } do
+ = s_('UserProfile|Following')
+ = gl_badge_tag @user.followees.count, size: :sm
diff --git a/spec/features/users/show_spec.rb b/spec/features/users/show_spec.rb
index 754de6ed67f280859bcc5ec96a4f7ce441ca55d1..c1b8bff0bfed0c470006dafee9834e14a0a6a06f 100644
--- a/spec/features/users/show_spec.rb
+++ b/spec/features/users/show_spec.rb
@@ -296,10 +296,14 @@
end
it 'shows no tab' do
- expect(page).to have_css("div.profile-header")
+ expect(page).not_to have_css("div.profile-header")
expect(page).not_to have_css("ul.nav-links")
end
+ it 'shows no sidebar' do
+ expect(page).not_to have_css(".user-profile-sidebar")
+ end
+
it 'shows blocked message' do
expect(page).to have_content("This user is blocked")
end