From 399a0158da9402251074d766518a5af6a59dca08 Mon Sep 17 00:00:00 2001 From: Ridhwana Date: Tue, 8 Aug 2023 18:57:14 +0200 Subject: [PATCH] Tag Page partial UI updates (#19866) * feat: remove the top card color branding * feat: update the heading * feat: remove the rotation on the badge * feat: remove rotation and justify-between the badge * feat: add number_with_delimiter to the tag count * feat: change the follow button to be 'primary' * feat: add a flex column so that the buttons row sticks to the card bottom * feat: add the posts to the right hand side on the header * refactor: move the styles to teh css page * feat: spacing * fix: tests * fix: test * Exclude Page from ReservedWords checks (#19853) * move initializeSettings to webpack (#19737) * move initializeSettings to webpack + add tests * add initializeSettings to InstantClick change block * dont use classes, use modules --------- Co-authored-by: PJ * Renamed leftover @hero_display_ad => @hero_billboard (#19874) * Reorganize devDependencies & revert strong_migrations (#19870) * ruby: Upgrade to v3.1.4 (pt. 1, base image only) (#19871) In #19776 we discovered that basing both the base container *and* the app container off of `.ruby-version` causes a chicken-and-egg problem wherein upgrading Ruby versions requires a few stop-and-gos. Let's make those stops reviewable as separate chunks instead: use a new `.ruby-version-next` for building base images, not the `.ruby-version`, thus allowing GitHub Actions to fire off an automated build (which, when complete, we can take the SHA sum from and use it to open a second PR updating the app image to use it, and `.ruby-version` can be updated to match `.ruby-version-next`). * feat: add the bullet unused_eager_loading query * feta: update the seeds * feat: add a smaller gap and make the grid-col 4 on large screens * feat: do not let the button take the height of the container * sway the search with the following tags * feat: keep the description at font size 14px * tweak elements to ensure an ideal card height of 195px --------- Co-authored-by: Mac Siri Co-authored-by: zhangted Co-authored-by: PJ Co-authored-by: Anna Buianova Co-authored-by: Josh Klar Co-authored-by: Duke Greene --- app/assets/stylesheets/components/tags.scss | 14 +++++++ app/views/tags/index.html.erb | 42 +++++++++---------- config/environments/development.rb | 1 + config/locales/views/tags/en.yml | 6 +-- config/locales/views/tags/fr.yml | 6 +-- .../loggedOutFlows/showLoginModal.spec.js | 2 +- .../seededFlows/tagsFlows/followTag.spec.js | 2 +- db/seeds.rb | 39 ++++++++--------- spec/requests/tags_spec.rb | 2 +- 9 files changed, 65 insertions(+), 49 deletions(-) diff --git a/app/assets/stylesheets/components/tags.scss b/app/assets/stylesheets/components/tags.scss index 215820cfe..8462a3c1a 100644 --- a/app/assets/stylesheets/components/tags.scss +++ b/app/assets/stylesheets/components/tags.scss @@ -40,3 +40,17 @@ } } } + +.tag-card { + height: 195px; + + .crayons-tag { + padding-top: 0; + padding-bottom: 0; + } + + &__badge { + width: 48px; + height: 48px; + } +} diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb index 16233902e..e7a4cc4d4 100644 --- a/app/views/tags/index.html.erb +++ b/app/views/tags/index.html.erb @@ -30,13 +30,13 @@
+ <%= link_to t("views.tags.following_tags"), dashboard_following_tags_path, class: "crayons-btn crayons-btn--ghost" %>
" name="q" placeholder="<%= t("views.tags.search.placeholder") %>" autocomplete="off" />
- <%= link_to t("views.tags.following_tags"), dashboard_following_tags_path, class: "crayons-btn crayons-btn--ghost" %>
@@ -46,32 +46,32 @@
No results match that query
<% else %> -
- <% @tags.each do |tag| %> -
-

- <%= render_tag_link(tag.accessible_name) %> -

- <% if tag.short_summary.present? %> -

<%= sanitize tag.short_summary %>

- <% end %> -

- <%= t("views.tags.published", count: tag.taggings_count) %> -

- +
+ <% @tags.includes([:badge]).each do |tag| %> +
+
+
+

+ <%= render_tag_link(tag.accessible_name) %> +

+
<%= t("views.tags.published", count: number_with_delimiter(tag.taggings_count, delimiter: ",")) %>
+
+ <% if tag.short_summary.present? %> +

<%= sanitize tag.short_summary %>

+ <% end %> +
<% if tag %> -
+
+ <% if tag.badge_id && tag.badge %> + + <% end %>
<% end %> - - <% if tag.badge_id && tag.badge %> - - <% end %>
<% end %>
diff --git a/config/environments/development.rb b/config/environments/development.rb index a1532e039..faa7ed4f4 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -151,6 +151,7 @@ Rails.application.configure do Bullet.add_safelist(type: :unused_eager_loading, class_name: "FeedbackMessage", association: :reporter) Bullet.add_safelist(type: :unused_eager_loading, class_name: "Article", association: :reactions) Bullet.add_safelist(type: :unused_eager_loading, class_name: "Reaction", association: :user) + Bullet.add_safelist(type: :unused_eager_loading, class_name: "Tag", association: :badge) # Check if there are any data update scripts to run during startup if %w[Console Server DBConsole].any? { |const| Rails.const_defined?(const) } && DataUpdateScript.scripts_to_run? diff --git a/config/locales/views/tags/en.yml b/config/locales/views/tags/en.yml index 19f331645..419625359 100644 --- a/config/locales/views/tags/en.yml +++ b/config/locales/views/tags/en.yml @@ -8,7 +8,7 @@ en: og: description: "%{community} is great!" heading: - default: Top tags + default: Tags search_results: Search results for %{q} search: aria_labels: @@ -44,8 +44,8 @@ en: code: 123 placeholder: "comma separated, space is optional. Example: 1,2,3" published: - one: 1 post published - other: "%{count} posts published" + one: 1 post + other: "%{count} posts" sidebar: about: 'about #%{tag}' admin: Admin diff --git a/config/locales/views/tags/fr.yml b/config/locales/views/tags/fr.yml index 9db0dd21c..c12f5030a 100644 --- a/config/locales/views/tags/fr.yml +++ b/config/locales/views/tags/fr.yml @@ -8,7 +8,7 @@ fr: og: description: "%{community} est super" heading: - default: Sujets les plus utilisées + default: Tags search_results: Search results for %{q} search: aria_labels: @@ -45,8 +45,8 @@ fr: code: 123 placeholder: "comma separated, space is optional. Example: 1,2,3" published: - one: 1 post published - other: "%{count} posts published" + one: 1 post + other: "%{count} posts" sidebar: about: 'about #%{tag}' admin: Admin diff --git a/cypress/e2e/seededFlows/loggedOutFlows/showLoginModal.spec.js b/cypress/e2e/seededFlows/loggedOutFlows/showLoginModal.spec.js index 1d44c7e01..e4b83c5a9 100644 --- a/cypress/e2e/seededFlows/loggedOutFlows/showLoginModal.spec.js +++ b/cypress/e2e/seededFlows/loggedOutFlows/showLoginModal.spec.js @@ -79,7 +79,7 @@ describe('Show log in modal', () => { it('should show login modal for tag follow button click', () => { cy.visit('/tags'); - cy.findByRole('heading', { name: 'Top tags' }); + cy.findByRole('heading', { name: 'Tags' }); cy.get('[data-follow-clicks-initialized]'); verifyLoginModalBehavior(() => diff --git a/cypress/e2e/seededFlows/tagsFlows/followTag.spec.js b/cypress/e2e/seededFlows/tagsFlows/followTag.spec.js index 05855d648..b136cacd0 100644 --- a/cypress/e2e/seededFlows/tagsFlows/followTag.spec.js +++ b/cypress/e2e/seededFlows/tagsFlows/followTag.spec.js @@ -6,7 +6,7 @@ describe('Follow tag', () => { cy.get('@user').then((user) => { cy.loginAndVisit(user, '/tags').then(() => { - cy.findByRole('heading', { name: 'Top tags' }); + cy.findByRole('heading', { name: 'Tags' }); cy.get('[data-follow-clicks-initialized]'); }); }); diff --git a/db/seeds.rb b/db/seeds.rb index ad67527c7..c02426f1a 100644 --- a/db/seeds.rb +++ b/db/seeds.rb @@ -212,6 +212,24 @@ Users::CreateMascotAccount.call unless Settings::General.mascot_user_id ############################################################################## +seeder.create_if_none(Badge) do + 5.times do + Badge.create!( + title: "#{Faker::Lorem.word} #{rand(100)}", + description: Faker::Lorem.sentence, + badge_image: Rails.root.join("app/assets/images/#{rand(1..40)}.png").open, + ) + end + + users_in_random_order.limit(10).each do |user| + user.badge_achievements.create!( + badge: Badge.order(Arel.sql("RANDOM()")).limit(1).take, + rewarding_context_message_markdown: Faker::Markdown.random, + ) + end +end +############################################################################## + seeder.create_if_none(Tag) do tags = %w[beginners career computerscience git go java javascript linux productivity python security webdev] @@ -219,9 +237,11 @@ seeder.create_if_none(Tag) do tags.each do |tag_name| Tag.create!( name: tag_name, + short_summary: Faker::Lorem.sentence, bg_color_hex: Faker::Color.hex_color, text_color_hex: Faker::Color.hex_color, supported: true, + badge: Badge.order(Arel.sql("RANDOM()")).limit(1).take, ) end end @@ -420,25 +440,6 @@ end ############################################################################## -seeder.create_if_none(Badge) do - 5.times do - Badge.create!( - title: "#{Faker::Lorem.word} #{rand(100)}", - description: Faker::Lorem.sentence, - badge_image: Rails.root.join("app/assets/images/#{rand(1..40)}.png").open, - ) - end - - users_in_random_order.limit(10).each do |user| - user.badge_achievements.create!( - badge: Badge.order(Arel.sql("RANDOM()")).limit(1).take, - rewarding_context_message_markdown: Faker::Markdown.random, - ) - end -end - -############################################################################## - seeder.create_if_none(FeedbackMessage) do mod = User.with_role(:trusted).take diff --git a/spec/requests/tags_spec.rb b/spec/requests/tags_spec.rb index 7bbc7d4ec..9f6ce5845 100644 --- a/spec/requests/tags_spec.rb +++ b/spec/requests/tags_spec.rb @@ -7,7 +7,7 @@ RSpec.describe "Tags", proper_status: true do create(:tag, name: "javascript", alias_for: "") get tags_path - expect(response.body).to include("Top tags", "ruby", "javascript") + expect(response.body).to include("Tags", "ruby", "javascript") end it "does not include tags with alias" do