From 1bcb5c4e2174d18637da485ea44c1f787077e86c Mon Sep 17 00:00:00 2001 From: Osama Sayegh Date: Wed, 14 Aug 2024 14:57:35 +0300 Subject: [PATCH] UX: Tweak styling for the new /about page (#28367) Various tweaks the new /about page. Main change is to make it display 3 columns of users instead of 2 when there's enough space. --- .../discourse/app/components/about-page.gjs | 12 +++---- app/assets/stylesheets/common/base/about.scss | 4 +-- app/assets/stylesheets/common/base/faqs.scss | 4 ++- spec/system/about_page_spec.rb | 32 +++++++++---------- 4 files changed, 27 insertions(+), 25 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/about-page.gjs b/app/assets/javascripts/discourse/app/components/about-page.gjs index e13c84a61e7..9406dd14188 100644 --- a/app/assets/javascripts/discourse/app/components/about-page.gjs +++ b/app/assets/javascripts/discourse/app/components/about-page.gjs @@ -153,7 +153,7 @@ export default class AboutPage extends Component { />
-
+
{{#each this.stats as |stat|}} @@ -168,18 +168,18 @@ export default class AboutPage extends Component { {{#if @model.admins.length}}

{{dIcon "users"}} {{i18n "about.our_admins"}}

- +
{{/if}} {{#if @model.moderators.length}}

{{dIcon "users"}} {{i18n "about.our_moderators"}}

- +
{{/if}} -
-
+
+

{{i18n "about.contact"}}

{{#if this.contactInfo}}

{{htmlSafe this.contactInfo}}

@@ -203,7 +203,7 @@ export default class AboutPage extends Component {
{{/each}} - + } diff --git a/app/assets/stylesheets/common/base/about.scss b/app/assets/stylesheets/common/base/about.scss index 47bc7663e10..89aa9a25bfd 100644 --- a/app/assets/stylesheets/common/base/about.scss +++ b/app/assets/stylesheets/common/base/about.scss @@ -2,7 +2,7 @@ &__main-content { display: grid; grid-template-columns: 2.5fr 1fr; - column-gap: 4em; + column-gap: 2em; } &__stats { @@ -51,7 +51,7 @@ .about-page-users-list { display: grid; gap: 1em; - grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); &__expand-button { width: 100%; diff --git a/app/assets/stylesheets/common/base/faqs.scss b/app/assets/stylesheets/common/base/faqs.scss index e750db85e0e..f5f4cd1405a 100644 --- a/app/assets/stylesheets/common/base/faqs.scss +++ b/app/assets/stylesheets/common/base/faqs.scss @@ -5,7 +5,9 @@ background: var(--d-content-background); .about-page & { max-width: unset; - section:not(.admins):not(.moderators):not(.category-moderators) { + section:not(.admins):not(.moderators):not(.category-moderators):not( + .about__admins + ):not(.about__moderators) { max-width: 700px; } .about.category-moderators { diff --git a/spec/system/about_page_spec.rb b/spec/system/about_page_spec.rb index dfd5d0aa951..fd1c17440be 100644 --- a/spec/system/about_page_spec.rb +++ b/spec/system/about_page_spec.rb @@ -182,9 +182,9 @@ describe "About page", type: :system do describe "our admins section" do before { User.update_all(last_seen_at: 1.month.ago) } - fab!(:admins) { Fabricate.times(12, :admin) } + fab!(:admins) { Fabricate.times(14, :admin) } - it "displays only the 10 most recently seen admins when there are more than 10 admins" do + it "displays only the 12 most recently seen admins when there are more than 12 admins" do admins[0].update!(last_seen_at: 4.minutes.ago) admins[1].update!(last_seen_at: 1.minutes.ago) admins[2].update!(last_seen_at: 10.minutes.ago) @@ -193,7 +193,7 @@ describe "About page", type: :system do expect(about_page.admins_list).to have_expand_button displayed_admins = about_page.admins_list.users - expect(displayed_admins.size).to eq(10) + expect(displayed_admins.size).to eq(12) expect(displayed_admins.map { |u| u[:username] }.first(3)).to eq( [admins[1].username, admins[0].username, admins[2].username], ) @@ -203,7 +203,7 @@ describe "About page", type: :system do about_page.visit displayed_admins = about_page.admins_list.users - expect(displayed_admins.size).to eq(10) + expect(displayed_admins.size).to eq(12) expect(about_page.admins_list).to be_expandable @@ -212,23 +212,23 @@ describe "About page", type: :system do expect(about_page.admins_list).to be_collapsible displayed_admins = about_page.admins_list.users - expect(displayed_admins.size).to eq(13) # 12 fabricated for this spec group and 1 global + expect(displayed_admins.size).to eq(15) # 14 fabricated for this spec group and 1 global about_page.admins_list.collapse expect(about_page.admins_list).to be_expandable displayed_admins = about_page.admins_list.users - expect(displayed_admins.size).to eq(10) + expect(displayed_admins.size).to eq(12) end - it "doesn't show an expand/collapse button when there are fewer than 10 admins" do + it "doesn't show an expand/collapse button when there are fewer than 12 admins" do User.where(id: admins.first(7).map(&:id)).destroy_all about_page.visit displayed_admins = about_page.admins_list.users - expect(displayed_admins.size).to eq(6) + expect(displayed_admins.size).to eq(8) expect(about_page.admins_list).to have_no_expand_button end @@ -273,9 +273,9 @@ describe "About page", type: :system do describe "our moderators section" do before { User.update_all(last_seen_at: 1.month.ago) } - fab!(:moderators) { Fabricate.times(13, :moderator) } + fab!(:moderators) { Fabricate.times(15, :moderator) } - it "displays only the 10 most recently seen moderators when there are more than 10 moderators" do + it "displays only the 12 most recently seen moderators when there are more than 12 moderators" do moderators[10].update!(last_seen_at: 5.hours.ago) moderators[3].update!(last_seen_at: 2.hours.ago) moderators[5].update!(last_seen_at: 13.hours.ago) @@ -284,7 +284,7 @@ describe "About page", type: :system do expect(about_page.moderators_list).to have_expand_button displayed_mods = about_page.moderators_list.users - expect(displayed_mods.size).to eq(10) + expect(displayed_mods.size).to eq(12) expect(displayed_mods.map { |u| u[:username] }.first(3)).to eq( [moderators[3].username, moderators[10].username, moderators[5].username], ) @@ -294,7 +294,7 @@ describe "About page", type: :system do about_page.visit displayed_mods = about_page.moderators_list.users - expect(displayed_mods.size).to eq(10) + expect(displayed_mods.size).to eq(12) expect(about_page.moderators_list).to be_expandable @@ -303,23 +303,23 @@ describe "About page", type: :system do expect(about_page.moderators_list).to be_collapsible displayed_mods = about_page.moderators_list.users - expect(displayed_mods.size).to eq(14) # 13 fabricated for this spec group and 1 global + expect(displayed_mods.size).to eq(16) # 15 fabricated for this spec group and 1 global about_page.moderators_list.collapse expect(about_page.moderators_list).to be_expandable displayed_mods = about_page.moderators_list.users - expect(displayed_mods.size).to eq(10) + expect(displayed_mods.size).to eq(12) end - it "doesn't show an expand/collapse button when there are fewer than 10 moderators" do + it "doesn't show an expand/collapse button when there are fewer than 12 moderators" do User.where(id: moderators.first(10).map(&:id)).destroy_all about_page.visit displayed_mods = about_page.moderators_list.users - expect(displayed_mods.size).to eq(4) + expect(displayed_mods.size).to eq(6) expect(about_page.moderators_list).to have_no_expand_button end