FEATURE: Add mobile support for subcategories-with-featured-topics (#16118)

Follow-up to eb2e3b510d
This commit is contained in:
David Taylor 2022-03-08 22:06:27 +00:00 committed by GitHub
parent 5335b40a87
commit 3ad9c2cdb6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 5 deletions

View File

@ -11,6 +11,11 @@ const subcategoryStyleComponentNames = {
boxes_with_featured_topics: "categories_boxes_with_topics",
};
const mobileCompatibleViews = [
"categories_with_featured_topics",
"subcategories_with_featured_topics",
];
export default DiscoveryController.extend({
discovery: controller(),
@ -21,9 +26,11 @@ export default DiscoveryController.extend({
@discourseComputed("model.parentCategory")
categoryPageStyle(parentCategory) {
let style = this.site.mobileView
? "categories_with_featured_topics"
: this.siteSettings.desktop_category_page_style;
let style = this.siteSettings.desktop_category_page_style;
if (this.site.mobileView && !mobileCompatibleViews.includes(style)) {
style = mobileCompatibleViews[0];
}
if (parentCategory) {
style =

View File

@ -2,7 +2,7 @@
<table class="category-list subcategory-list with-topics">
<thead>
<tr>
<th class="category">
<th class="parent-category">
{{category-title-link category=category}}
<span class="stat" title={{category.statTitle}}>{{html-safe category.stat}}</span>
</th>

View File

@ -0,0 +1,16 @@
{{#each categories as |category|}}
<div class="category-list subcategory-list with-topics">
<div class="parent-category">
{{category-title-link category=category}}
<span class="stat" title={{category.statTitle}}>{{html-safe category.stat}}</span>
</div>
<div class="subcategories">
{{#each category.subcategories as |subCategory|}}
{{parent-category-row category=subCategory showTopics=true}}
{{else}}
{{!-- No subcategories... so just show the parent to avoid confusion --}}
{{parent-category-row category=category showTopics=true}}
{{/each}}
</div>
</div>
{{/each}}

View File

@ -28,7 +28,7 @@
}
.subcategory-list {
th.category {
.parent-category {
h3 {
display: inline;
}