From 3ad9c2cdb67b9041386ee84502f4206bd0adb6e3 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Tue, 8 Mar 2022 22:06:27 +0000
Subject: [PATCH] FEATURE: Add mobile support for
 subcategories-with-featured-topics (#16118)

Follow-up to eb2e3b510d
---
 .../app/controllers/discovery/categories.js      | 13 ++++++++++---
 .../subcategories-with-featured-topics.hbs       |  2 +-
 .../subcategories-with-featured-topics.hbs       | 16 ++++++++++++++++
 .../stylesheets/common/base/category-list.scss   |  2 +-
 4 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/templates/mobile/components/subcategories-with-featured-topics.hbs

diff --git a/app/assets/javascripts/discourse/app/controllers/discovery/categories.js b/app/assets/javascripts/discourse/app/controllers/discovery/categories.js
index b834630deb5..4851ccf976c 100644
--- a/app/assets/javascripts/discourse/app/controllers/discovery/categories.js
+++ b/app/assets/javascripts/discourse/app/controllers/discovery/categories.js
@@ -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 =
diff --git a/app/assets/javascripts/discourse/app/templates/components/subcategories-with-featured-topics.hbs b/app/assets/javascripts/discourse/app/templates/components/subcategories-with-featured-topics.hbs
index 974b0ce7fe9..ca19c2539bc 100644
--- a/app/assets/javascripts/discourse/app/templates/components/subcategories-with-featured-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/subcategories-with-featured-topics.hbs
@@ -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>
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/subcategories-with-featured-topics.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/subcategories-with-featured-topics.hbs
new file mode 100644
index 00000000000..85e44924a6e
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/templates/mobile/components/subcategories-with-featured-topics.hbs
@@ -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}}
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 37eba8e9a7a..09f0f5682e7 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -28,7 +28,7 @@
 }
 
 .subcategory-list {
-  th.category {
+  .parent-category {
     h3 {
       display: inline;
     }