diff --git a/app/assets/stylesheets/config/_generator.scss b/app/assets/stylesheets/config/_generator.scss index 4ae2b277d..d33fedd74 100644 --- a/app/assets/stylesheets/config/_generator.scss +++ b/app/assets/stylesheets/config/_generator.scss @@ -161,7 +161,13 @@ '3': repeat(3, minmax(0, 1fr)), '4': repeat(4, minmax(0, 1fr)), '5': repeat(5, minmax(0, 1fr)), - '6': repeat(6, 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)) ), (), true diff --git a/app/controllers/stories_controller.rb b/app/controllers/stories_controller.rb index 18c9cd208..937abbd47 100644 --- a/app/controllers/stories_controller.rb +++ b/app/controllers/stories_controller.rb @@ -207,16 +207,7 @@ class StoriesController < ApplicationController assign_user_github_repositories - # @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 + @grouped_badges = @user.badge_achievements.order(id: :desc).includes(:badge).group_by(&:badge_id) @profile = @user.profile.decorate @is_user_flagged = Reaction.where(user_id: session_current_user_id, reactable: @user).any? diff --git a/app/views/users/_badges_area.html.erb b/app/views/users/_badges_area.html.erb index c317bd185..5bb4d06d5 100644 --- a/app/views/users/_badges_area.html.erb +++ b/app/views/users/_badges_area.html.erb @@ -1,19 +1,22 @@
-
-

<%= t("views.badges.heading") %>

-
+ <% if defined?(show_heading) ? show_heading : true %> +
+

<%= t("views.badges.heading") %>

+
+ <% end %>
-
- <% achievements.group_by(&:badge_id).each_with_index do |(badge_id, badge_achievements), i| %> + <% grid_class ||= "grid-cols-3 s:grid-cols-4 m:grid-cols-2" %> +
+ <% grouped_badges.each_with_index do |(badge_id, badge_achievements), i| %> <% achievement = badge_achievements.first %>
<%= achievement.badge_title %> <% if badge_achievements.length > 1 %>
"><%= badge_achievements.length %>
<% end %>
@@ -24,9 +27,9 @@ <% end %>
- <% if limit > 1 && count > limit %> + <% if limit > 1 && grouped_badges.size > limit %> <% end %> diff --git a/app/views/users/_sidebar.html.erb b/app/views/users/_sidebar.html.erb index 450b19ec8..2dd3a858d 100644 --- a/app/views/users/_sidebar.html.erb +++ b/app/views/users/_sidebar.html.erb @@ -1,5 +1,14 @@ diff --git a/cypress/e2e/seededFlows/profileFlows/userProfile.spec.js b/cypress/e2e/seededFlows/profileFlows/userProfile.spec.js index d8b64e813..29c2c52c4 100644 --- a/cypress/e2e/seededFlows/profileFlows/userProfile.spec.js +++ b/cypress/e2e/seededFlows/profileFlows/userProfile.spec.js @@ -19,7 +19,7 @@ describe('User Profile', () => { cy.get('.js-user-info').contains('Organizations').should('be.visible'); - cy.get('.js-user-info').contains('Badges').should('be.visible'); + cy.get('.js-profile-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 6 badges by default if there are more than 6', () => { + it('should show 12 badges by default if there are more than 12', () => { cy.get('.js-profile-badges') .findAllByRole('button') - .should('have.length', 6); + .should('have.length', 12); }); it('should show a button to show all the badges if there are more than 6', () => { cy.findByRole('button', { - name: 'Show all 7 badges', + name: 'Show all 13 badges', }).should('be.visible'); }); - it('should show 7 badges when the button is clicked', () => { + it('should show 13 badges when the button is clicked', () => { cy.findByRole('button', { - name: 'Show all 7 badges', + name: 'Show all 13 badges', }).click(); cy.get('.js-profile-badges') .findAllByRole('button') - .should('have.length', 7); + .should('have.length', 13); }); }); }); diff --git a/spec/support/seeds/seeds_e2e.rb b/spec/support/seeds/seeds_e2e.rb index 8047ac23d..3039f60a1 100644 --- a/spec/support/seeds/seeds_e2e.rb +++ b/spec/support/seeds/seeds_e2e.rb @@ -1014,7 +1014,7 @@ end ############################################################################## seeder.create_if_none(Badge) do - 7.times do |t| + 13.times do |t| Badge.create!( title: "#{Faker::Lorem.word} #{rand(100)} #{t}", description: "#{Faker::Lorem.sentence} #{rand(100)}", diff --git a/spec/views/users/main_feed_spec.rb b/spec/views/users/main_feed_spec.rb index cc62d5dc1..f0758fa0d 100644 --- a/spec/views/users/main_feed_spec.rb +++ b/spec/views/users/main_feed_spec.rb @@ -9,7 +9,6 @@ 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, [])