IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: improve categories page subcategory layout (#27612)

Browse Source
This commit is contained in:
Kris 2024-06-25 17:37:35 -04:00 committed by GitHub
parent 4e42dc8d60
commit e505a5a1d5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 43 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/app/components/category-list-item.js
View File

@ -36,4 +36,9 @@ export default Component.extend({
newTopicsCount() { newTopicsCount() {
return this.category.newTopicsCount; return this.category.newTopicsCount;
}, },
@discourseComputed("category.path")
slugPath(categoryPath) {
return categoryPath.substring("/c/".length);
},
}); });

1
app/assets/javascripts/discourse/app/components/category-unread.js
View File

@ -1,4 +1,5 @@
import Component from "@ember/component"; import Component from "@ember/component";
export default Component.extend({ export default Component.extend({
tagName: "span", tagName: "span",
classNames: ["category__badges"],
}); });

4
app/assets/javascripts/discourse/app/components/parent-category-row.hbs
View File

@ -57,10 +57,14 @@
/> />
{{/each}} {{/each}}
{{#if (gt this.category.unloadedSubcategoryCount 0)}} {{#if (gt this.category.unloadedSubcategoryCount 0)}}
<div class="subcategories__more-subcategories">
<LinkTo @route="discovery.subcategories" @model={{this.slugPath}}>
{{i18n {{i18n
"category_row.subcategory_count" "category_row.subcategory_count"
count=this.category.unloadedSubcategoryCount count=this.category.unloadedSubcategoryCount
}} }}
</LinkTo>
</div>
{{/if}} {{/if}}
</div> </div>
{{/if}} {{/if}}

30
app/assets/stylesheets/desktop/category-list.scss
View File

@ -47,22 +47,44 @@
display: block; display: block;
text-align: right; text-align: right;
padding-right: 0; padding-right: 0;
margin-top: 5px; &:first-child {
margin-top: 0.75em;
}
} }
} }
.subcategories { .subcategories {
margin-top: 0.25em; display: flex;
clear: both; flex-wrap: wrap;
gap: 0.15em 0.75em;
margin-top: 0.5em;
.subcategory { .subcategory {
display: inline-flex; display: inline-flex;
align-items: baseline; 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 { .badge-notification.unread-posts {
display: block; display: block;
padding: 0; padding: 0;
} }
&__more-subcategories {
font-size: var(--font-down-1);
a {
color: var(--primary-high);
}
}
} }
.featured-topic { .featured-topic {