From f314455091a218fa8454735268d04347da2075c3 Mon Sep 17 00:00:00 2001 From: awesomerobot Date: Wed, 31 Jan 2024 14:05:14 -0500 Subject: [PATCH 1/3] FEATURE: optionally show category logo, change text alignment --- .gitignore | 1 + common/common.scss | 15 +++++++++++++- .../discourse/components/category-banner.hbs | 3 +++ settings.yml | 11 ++++++++++ spec/system/category_banners_spec.rb | 20 ++++++++++++++++++- .../components/category_banner.rb | 8 ++++++++ 6 files changed, 56 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 14735c6..c00857d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules .discourse-site +.vscode \ No newline at end of file diff --git a/common/common.scss b/common/common.scss index 53f636a..be8b881 100644 --- a/common/common.scss +++ b/common/common.scss @@ -7,9 +7,14 @@ body:not(.category-header) { div[class^="category-title-header"] { display: flex; - text-align: center; width: 100%; justify-content: center; + @if $align_text == "center" { + text-align: center; + } + @if $align_text == "right" { + text-align: right; + } .category-title-contents { max-width: 500px; @@ -51,6 +56,14 @@ div[class^="category-title-header"] { } } +.category-title-contents .category-logo { + margin: 0 1em 0 0; + @include breakpoint(tablet) { + display: block; + float: none; + } +} + @if $plugin_outlet == "header-list-container-bottom" { #header-list-area { display: flex; diff --git a/javascripts/discourse/components/category-banner.hbs b/javascripts/discourse/components/category-banner.hbs index def65ed..41c5539 100644 --- a/javascripts/discourse/components/category-banner.hbs +++ b/javascripts/discourse/components/category-banner.hbs @@ -9,6 +9,9 @@ > {{#if this.category}}
+ {{#if (theme-setting "show_category_logo")}} + + {{/if}}

{{#if (and (theme-setting "show_category_icon") this.category)}} {{#if this.hasIconComponent}} diff --git a/settings.yml b/settings.yml index 6b73e5e..c41e3c0 100644 --- a/settings.yml +++ b/settings.yml @@ -14,6 +14,17 @@ hide_if_no_description: default: true description: "Hide banners if category description is not set" +show_category_logo: + default: true + description: "Displays the category logo as set in the category's settings" + +align_text: + default: center + choices: + - center + - left + - right + exceptions: default: "" type: list diff --git a/spec/system/category_banners_spec.rb b/spec/system/category_banners_spec.rb index 991ceb0..6d9ddf8 100644 --- a/spec/system/category_banners_spec.rb +++ b/spec/system/category_banners_spec.rb @@ -6,7 +6,7 @@ let!(:theme) { upload_theme_component } fab!(:category) { Fabricate(:category, description: "

this is some description

") } fab!(:category_subcategory) do - Fabricate(:category, parent_category: category, description: "some description") + Fabricate(:category, parent_category: category, description: "some description", uploaded_logo: Fabricate(:upload)) end let(:category_banner) { PageObjects::Components::CategoryBanner.new(category) } let(:subcategory_banner) { PageObjects::Components::CategoryBanner.new(category_subcategory) } @@ -69,4 +69,22 @@ visit(category_subcategory.url) end + + it "displays a category logo when show_category_logo is true" do + theme.update_setting(:show_category_logo, true) + theme.save! + + visit(category_subcategory.url) + + expect(subcategory_banner).to have_logo + end + + it "does not display a category logo when show_category_logo is false" do + theme.update_setting(:show_category_logo, false) + theme.save! + + visit(category_subcategory.url) + + expect(subcategory_banner).to have_no_logo + end end diff --git a/spec/system/page_objects/components/category_banner.rb b/spec/system/page_objects/components/category_banner.rb index 22437fb..448ad63 100644 --- a/spec/system/page_objects/components/category_banner.rb +++ b/spec/system/page_objects/components/category_banner.rb @@ -30,6 +30,14 @@ def has_no_description? has_no_css?("#{category_banner_selector} .category-title-description") end + def has_logo? + has_css?("#{category_banner_selector} .category-logo img[src]") + end + + def has_no_logo? + has_no_css?("#{category_banner_selector} .category-logo img[src]") + end + private def category_banner_selector From 590bda9f38544dc4a03d45fc6c2d3c45f1b26074 Mon Sep 17 00:00:00 2001 From: awesomerobot Date: Wed, 31 Jan 2024 14:20:02 -0500 Subject: [PATCH 2/3] utilize grid for layout --- common/common.scss | 36 ++++++++++++++++++++++++++++-------- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/common/common.scss b/common/common.scss index be8b881..958f7b3 100644 --- a/common/common.scss +++ b/common/common.scss @@ -5,6 +5,34 @@ body:not(.category-header) { } } +.category-title-contents { + display: grid; + grid-template-areas: "logo title" "logo description"; + grid-template-columns: auto 1fr; + + @include breakpoint(tablet) { + grid-template-areas: "logo" "title" "description"; + grid-template-columns: auto; + } + + .category-logo { + grid-area: logo; + align-self: center; + margin: 0 1em 0 0; + --max-height: 8em; + @include breakpoint(tablet) { + margin: 0 0 0.5em; + } + } + .category-title { + grid-area: title; + align-self: end; + } + .category-title-description { + grid-area: description; + } +} + div[class^="category-title-header"] { display: flex; width: 100%; @@ -56,14 +84,6 @@ div[class^="category-title-header"] { } } -.category-title-contents .category-logo { - margin: 0 1em 0 0; - @include breakpoint(tablet) { - display: block; - float: none; - } -} - @if $plugin_outlet == "header-list-container-bottom" { #header-list-area { display: flex; From 095de9f196ba4bf7b33bf853197999de74af2fa1 Mon Sep 17 00:00:00 2001 From: awesomerobot Date: Wed, 31 Jan 2024 14:37:35 -0500 Subject: [PATCH 3/3] fix default --- settings.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/settings.yml b/settings.yml index c41e3c0..ab7d18b 100644 --- a/settings.yml +++ b/settings.yml @@ -15,7 +15,7 @@ hide_if_no_description: description: "Hide banners if category description is not set" show_category_logo: - default: true + default: false description: "Displays the category logo as set in the category's settings" align_text: