diff --git a/app/assets/javascripts/discourse/app/components/category-list-item.js b/app/assets/javascripts/discourse/app/components/category-list-item.js index 12e41368404..eaef68762f2 100644 --- a/app/assets/javascripts/discourse/app/components/category-list-item.js +++ b/app/assets/javascripts/discourse/app/components/category-list-item.js @@ -36,4 +36,9 @@ export default Component.extend({ newTopicsCount() { return this.category.newTopicsCount; }, + + @discourseComputed("category.path") + slugPath(categoryPath) { + return categoryPath.substring("/c/".length); + }, }); diff --git a/app/assets/javascripts/discourse/app/components/category-unread.js b/app/assets/javascripts/discourse/app/components/category-unread.js index 66c77672aa3..4719d63b642 100644 --- a/app/assets/javascripts/discourse/app/components/category-unread.js +++ b/app/assets/javascripts/discourse/app/components/category-unread.js @@ -1,4 +1,5 @@ import Component from "@ember/component"; export default Component.extend({ tagName: "span", + classNames: ["category__badges"], }); diff --git a/app/assets/javascripts/discourse/app/components/parent-category-row.hbs b/app/assets/javascripts/discourse/app/components/parent-category-row.hbs index 11e58c209c9..d47f6101774 100644 --- a/app/assets/javascripts/discourse/app/components/parent-category-row.hbs +++ b/app/assets/javascripts/discourse/app/components/parent-category-row.hbs @@ -57,10 +57,14 @@ /> {{/each}} {{#if (gt this.category.unloadedSubcategoryCount 0)}} - {{i18n - "category_row.subcategory_count" - count=this.category.unloadedSubcategoryCount - }} +
+ + {{i18n + "category_row.subcategory_count" + count=this.category.unloadedSubcategoryCount + }} + +
{{/if}} {{/if}} diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/category-selector-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/category-selector-test.js index ecff80717b3..2ec3084867c 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/category-selector-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/category-selector-test.js @@ -50,7 +50,7 @@ module( ); assert.equal( this.subject.rowByIndex(1).el().innerText.replaceAll("\n", " "), - "Parent Category × 95 + 2 subcategories" + "Parent Category × 95 +2 subcategories" ); }); } diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss index b769fc21e4b..f8f9c1fbd70 100644 --- a/app/assets/stylesheets/desktop/category-list.scss +++ b/app/assets/stylesheets/desktop/category-list.scss @@ -47,22 +47,44 @@ display: block; text-align: right; padding-right: 0; - margin-top: 5px; + &:first-child { + margin-top: 0.75em; + } } } .subcategories { - margin-top: 0.25em; - clear: both; + display: flex; + flex-wrap: wrap; + gap: 0.15em 0.75em; + margin-top: 0.5em; .subcategory { display: inline-flex; align-items: baseline; - margin-right: 0.3em; + gap: 0.25em; + @include ellipsis; + .badge-category { + min-width: 0; + } + } + .category__badges { + display: flex; + gap: 0.25em; + .badge-notification { + top: 0; + padding: 0; + } } .badge-notification.unread-posts { display: block; padding: 0; } + &__more-subcategories { + font-size: var(--font-down-1); + a { + color: var(--primary-high); + } + } } .featured-topic { diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 48373b6d9a1..e076422e973 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -2406,8 +2406,8 @@ en: category_row: subcategory_count: - one: "+ %{count} subcategory" - other: "+ %{count} subcategories" + one: "+%{count} subcategory" + other: "+%{count} subcategories" topic_count: one: "%{count} topic in this category" other: "%{count} topics in this category"