maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revert "New badge display logic on user's profile (#20936)" (#20941)

Browse source 
This reverts commit 149ae12dd1.
This commit is contained in:
Mac Siri 2024-05-09 15:44:18 -04:00 • committed by GitHub
parent 149ae12dd1
commit 3fccdcb507
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 50 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.vscode/settings.json vendored
View file

@ -1,6 +1,4 @@
{
"rubyLsp.rubyVersionManager": {
"identifier": "auto"
},
"rubyLsp.rubyVersionManager": "auto",
"rubyLsp.formatter": "rubocop",
}

0
app/assets/builds/.keep Normal file
View file

8
app/assets/stylesheets/config/_generator.scss
View file

@ -161,13 +161,7 @@
'3': repeat(3, minmax(0, 1fr)),
'4': repeat(4, minmax(0, 1fr)),
'5': repeat(5, minmax(0, 1fr)),
'6': repeat(6, minmax(0, 1fr)),
'7': repeat(7, minmax(0, 1fr)),
'8': repeat(8, minmax(0, 1fr)),
'9': repeat(9, minmax(0, 1fr)),
'10': repeat(10, minmax(0, 1fr)),
'11': repeat(11, minmax(0, 1fr)),
'12': repeat(12, minmax(0, 1fr))
'6': repeat(6, minmax(0, 1fr))
),
(),
true

11
app/controllers/stories_controller.rb
View file

@ -207,7 +207,16 @@ class StoriesController < ApplicationController
assign_user_github_repositories
@grouped_badges = @user.badge_achievements.order(id: :desc).includes(:badge).group_by(&:badge_id)
# @badges_limit is here and is set to 6 because it determines how many badges we will display
# on Profile sidebar widget. If user has more badges, we hide them and let them be revealed
# by clicking "See more" button (because we want to save space etc..). But why 6 exactly?
# To make that widget look good:
# - On desktop it will have 3 rows, each row with 2 badges.
# - On mobile it will have 2 rows, each row with 3 badges.
# So it's always 6. If we make it higher or lower number, we would have to sacrifice UI:
# - Let's say it's `4`. On mobile it would display two rows: 1st with 3 badges and
# 2nd with 1 badge (!) <-- and that would look off.
@badges_limit = 6
@profile = @user.profile.decorate
@is_user_flagged = Reaction.where(user_id: session_current_user_id, reactable: @user).any?

21
app/views/users/_badges_area.html.erb
View file

@ -1,22 +1,19 @@
<div class="crayons-card crayons-card--secondary">
<% if defined?(show_heading) ? show_heading : true %>
<header class="crayons-card__header">
<h3 class="crayons-subtitle-3"><%= t("views.badges.heading") %></h3>
</header>
<% end %>
<header class="crayons-card__header">
<h3 class="crayons-subtitle-3"><%= t("views.badges.heading") %></h3>
</header>
<div class="crayons-card__body">
<% grid_class ||= "grid-cols-3 s:grid-cols-4 m:grid-cols-2" %>
<div class="grid gap-4 <%= grid_class %> align-center items-center js-profile-badges">
<% grouped_badges.each_with_index do |(badge_id, badge_achievements), i| %>
<div class="grid gap-4 grid-cols-3 s:grid-cols-4 m:grid-cols-2 align-center items-center js-profile-badges">
<% achievements.group_by(&:badge_id).each_with_index do |(badge_id, badge_achievements), i| %>
<% achievement = badge_achievements.first %>
<div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-<%= achievement.badge_id %>', overlay: true})"
title="<%= achievement.badge_title %>"
class="js-profile-badge <% if i >= limit %>hidden<% end %> relative">
<img src="<%= optimized_image_url(achievement.badge_image_url, width: 180) %>"
alt="<%= achievement.badge_title %>"
class="mx-auto w-75 h-auto align-middle"
style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;"
class="mx-auto max-w-75 h-auto align-middle"
style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1;"
loading="lazy" />
<% if badge_achievements.length > 1 %><div class="badge-indicator" title="<%= t("views.badges.indicator", user: @user.name, number: badge_achievements.length) %>"><%= badge_achievements.length %></div><% end %>
</div>
@ -27,9 +24,9 @@
<% end %>
</div>
<% if limit > 1 && grouped_badges.size > limit %>
<% if limit > 1 && count > limit %>
<button type="button"
class="crayons-btn crayons-btn--ghost-brand crayons-btn--s w-100 mt-3 js-profile-badges-trigger">
class="crayons-btn crayons-btn--ghost-brand crayons-btn--s w-100 js-profile-badges-trigger">
<%= t("views.badges.all", count: count) %>
</button>
<% end %>

16
app/views/users/_sidebar.html.erb
View file

@ -1,14 +1,5 @@
<div class="m:gap-4 hidden m:grid js-user-info">
<% cache "user-profile-sidebar-additional-#{@user.id}-#{@user.github_repos_updated_at}-#{@user.badge_achievements_count}-#{@user.organization_info_updated_at}", expires_in: 2.days do %>
<% if @user.badge_achievements_count.positive? && @user.badge_achievements_count <= 6 %>
<%= render partial: "users/badges_area", locals: {
grouped_badges: @grouped_badges,
count: @user.badge_achievements_count,
limit: 6,
show_heading: true,
grid_class: "grid-cols-3 s:grid-cols-4 m:grid-cols-2"
} %>
<% end %>
<% if @user.organizations.present? %>
<div class="crayons-card crayons-card--secondary crayons-layout__content">
<header class="crayons-card__header">
@ -31,6 +22,13 @@
<%= render partial: "users/github_repositories_area", locals: { repositories: repositories } %>
<% if @user.badge_achievements_count.positive? %>
<%= render partial: "users/badges_area", locals: {
achievements: @user.badge_achievements.order(id: :desc).includes(:badge),
count: @user.badge_achievements_count,
limit: @badges_limit
} %>
<% end %>
<% end %>
<% cache "user-profile-sidebar-profile-details-#{@user.id}-#{@user.profile_updated_at}", expires_in: 10.days do %>

15
app/views/users/show.html.erb
View file

@ -123,20 +123,9 @@
<%= render "users/metadata" %>
<% if @user.badge_achievements_count >= 7 %>
<%= render partial: "users/badges_area", locals: {
grouped_badges: @grouped_badges,
count: @user.badge_achievements_count,
limit: 12,
show_heading: false,
grid_class: "grid-cols-#{[@user.badge_achievements_count, 6].min} s:grid-cols-#{[@user.badge_achievements_count, 8].min} m:grid-cols-#{[@user.badge_achievements_count, 12].min}"
} %>
<% end %>
<div class="p-3 block m:hidden js-user-info-trigger-wrapper">
<button type="button" class="m-3 crayons-btn crayons-btn--outlined w-100 js-user-info-trigger"><%= t("views.users.more", user: @user.username) %></button>
<div class="p-3 pt-0 block m:hidden js-user-info-trigger-wrapper">
<button type="button" class="crayons-btn crayons-btn--outlined w-100 js-user-info-trigger"><%= t("views.users.more", user: @user.username) %></button>
</div>
</header>
</div>
</div>

14
cypress/e2e/seededFlows/profileFlows/userProfile.spec.js
View file

@ -19,7 +19,7 @@ describe('User Profile', () => {
cy.get('.js-user-info').contains('Organizations').should('be.visible');
cy.get('.js-profile-badges').should('be.visible');
cy.get('.js-user-info').contains('Badges').should('be.visible');
cy.get('.js-user-info')
.contains('posts published')
@ -35,25 +35,25 @@ describe('User Profile', () => {
});
describe('toggle profile badges', () => {
it('should show 12 badges by default if there are more than 12', () => {
it('should show 6 badges by default if there are more than 6', () => {
cy.get('.js-profile-badges')
.findAllByRole('button')
.should('have.length', 12);
.should('have.length', 6);
});
it('should show a button to show all the badges if there are more than 6', () => {
cy.findByRole('button', {
name: 'Show all 13 badges',
name: 'Show all 7 badges',
}).should('be.visible');
});
it('should show 13 badges when the button is clicked', () => {
it('should show 7 badges when the button is clicked', () => {
cy.findByRole('button', {
name: 'Show all 13 badges',
name: 'Show all 7 badges',
}).click();
cy.get('.js-profile-badges')
.findAllByRole('button')
.should('have.length', 13);
.should('have.length', 7);
});
});
});

1
package.json
View file

@ -98,6 +98,7 @@
"lint-staged": "^13.3.0",
"markdown-loader": "^7.0.0",
"mocha-junit-reporter": "^2.2.1",
"prettier": "^2.8.8",
"sass": "1.54.0",
"sass-loader": "^13.3.3",
"storybook-addon-jsx": "^7.3.14",

2
spec/support/seeds/seeds_e2e.rb
View file

@ -1014,7 +1014,7 @@ end
##############################################################################
seeder.create_if_none(Badge) do
13.times do |t|
7.times do |t|
Badge.create!(
title: "#{Faker::Lorem.word} #{rand(100)} #{t}",
description: "#{Faker::Lorem.sentence} #{rand(100)}",

1
spec/views/users/main_feed_spec.rb
View file

@ -9,6 +9,7 @@ RSpec.describe "users/show" do
allow(view).to receive(:feed_style_preference).and_return("basic")
end
assign(:user, user)
assign(:badges_limit, 6)
assign(:stories, [])
assign(:comments, [])
assign(:pinned_stories, [])

10
yarn.lock
View file

@ -9290,6 +9290,7 @@ __metadata:
postcss-preset-env: "npm:^7.8.2"
postscribe: "npm:^2.0.8"
preact: "npm:^10.20.2"
prettier: "npm:^2.8.8"
prop-types: "npm:^15.8.1"
rails-erb-loader: "npm:^5.5.2"
react-colorful: "npm:^5.6.1"
@ -17616,6 +17617,15 @@ __metadata:
languageName: node
linkType: hard
"prettier@npm:^2.8.8":
version: 2.8.8
resolution: "prettier@npm:2.8.8"
bin:
prettier: bin-prettier.js
checksum: 10c0/463ea8f9a0946cd5b828d8cf27bd8b567345cf02f56562d5ecde198b91f47a76b7ac9eae0facd247ace70e927143af6135e8cf411986b8cb8478784a4d6d724a
languageName: node
linkType: hard
"pretty-bytes@npm:^5.6.0":
version: 5.6.0
resolution: "pretty-bytes@npm:5.6.0"