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"