UX: Improve sub-sub-categories styling in categories list (#8593)

- Using h4 instead of h3 for sub-categories.
- Show category description if it does not have subcategories.
- Implemented equivalent for mobile-view.
- Include description_excerpt in basic serializer. This is needed for
  displaying second-level categories in category list.

Follow-up to 9253cb79e3.

app/assets/javascripts/discourse/templates/components/categories-only.hbs

@@ -21,9 +21,9 @@
             {{#if c.isGrandParent}}
               <table class="category-list">
                 {{#each c.subcategories as |subcategory|}}
-                  <tr data-category-id={{subcategory.id}} class="no-description {{if subcategory.uploaded_logo.url 'has-logo' 'no-logo'}}">
+                  <tr data-category-id={{subcategory.id}} class="{{if subcategory.description_excerpt 'has-description' 'no-description'}} {{if subcategory.uploaded_logo.url 'has-logo' 'no-logo'}}">
                     <td class="category" style={{border-color subcategory.color}}>
-                      {{category-title-link category=subcategory}}
+                      {{category-title-link tagName="h4" category=subcategory}}
 
                       {{#if subcategory.subcategories}}
                         <div class='subcategories'>
@@ -36,6 +36,10 @@
                             {{/unless}}
                           {{/each}}
                         </div>
+                      {{else}}
+                        <div class="category-description">
+                          {{{dir-span subcategory.description_excerpt}}}
+                        </div>
                       {{/if}}
                     </td>
                   </tr>

app/assets/javascripts/discourse/templates/mobile/components/categories-only.hbs

@@ -23,7 +23,27 @@
             {{/each}}
           {{/if}}
 
-          {{#if c.subcategories}}
+          {{#if c.isGrandParent}}
+            {{#each c.subcategories as |subcategory|}}
+              <tr data-category-id={{c.id}} class='subcategory-list-item category' style={{border-color subcategory.color}}>
+                <td>
+                  {{category-title-link tagName="h4" category=subcategory}}
+
+                  <div class="subcategories-list">
+                    {{#if subcategory.subcategories}}
+                      <div class='subcategories'>
+                        {{#each subcategory.subcategories as |subsubcategory|}}
+                          {{#unless subsubcategory.isMuted}}
+                            {{category-link subsubcategory}}
+                          {{/unless}}
+                        {{/each}}
+                      </div>
+                    {{/if}}
+                  </div>
+                </td>
+              </tr>
+            {{/each}}
+          {{else if c.subcategories}}
             <tr class="subcategories-list">
               <td>
                 <div class='subcategories'>

app/assets/stylesheets/desktop/category-list.scss

@@ -95,13 +95,21 @@
   tbody {
     .category {
       border-left: 6px solid;
-      h3 {
+      h3,
-        font-size: $font-up-2;
+      h4 {
         line-height: $line-height-medium;
         a[href] {
           color: $primary;
         }
       }
+
+      h3 {
+        font-size: $font-up-2;
+      }
+
+      h4 {
+        font-size: $font-up-1;
+      }
     }
 
     .latest {

app/assets/stylesheets/mobile/topic-list.scss

@@ -264,6 +264,16 @@
   }
 }
 
+.subcategory-list-item.category {
+  td:first-of-type {
+    padding: 12px 0px;
+  }
+
+  .subcategories {
+    padding-left: 10px;
+  }
+}
+
 tr.category-topic-link {
   border-bottom: 1px solid $primary-low;
   &:last-of-type {
@@ -271,14 +281,15 @@ tr.category-topic-link {
   }
 }
 
-.category-list-item {
+.category-list-item,
-  padding: 5px 0 2px;
+.subcategory-list-item {
+  padding: 5px 0 2px 3px;
   border-left: 6px solid;
   border-top: 1px solid;
 
-  h3 {
+  h3,
+  h4 {
     max-width: 100%;
-    font-size: $font-up-2;
     padding: 0 0 0 10px;
     .d-icon {
       margin-right: 5px;
@@ -288,6 +299,14 @@ tr.category-topic-link {
     }
   }
 
+  h3 {
+    font-size: $font-up-2;
+  }
+
+  h4 {
+    font-size: $font-up-1;
+  }
+
   .category-name {
     max-width: 80vw;
   }

app/models/category.rb

@@ -265,13 +265,22 @@ class Category < ActiveRecord::Base
   def description_text
     return nil unless self.description
 
-    @@cache ||= LruRedux::ThreadSafeCache.new(1000)
+    @@cache_text ||= LruRedux::ThreadSafeCache.new(1000)
-    @@cache.getset(self.description) do
+    @@cache_text.getset(self.description) do
       text = Nokogiri::HTML.fragment(self.description).text.strip
       Rack::Utils.escape_html(text).html_safe
     end
   end
 
+  def description_excerpt
+    return nil unless self.description
+
+    @@cache_excerpt ||= LruRedux::ThreadSafeCache.new(1000)
+    @@cache_excerpt.getset(self.description) do
+      PrettyText.excerpt(description, 300)
+    end
+  end
+
   def access_category_via_group
     Group
       .joins(:category_groups)

app/serializers/basic_category_serializer.rb

@@ -12,6 +12,7 @@ class BasicCategorySerializer < ApplicationSerializer
              :position,
              :description,
              :description_text,
+             :description_excerpt,
              :topic_url,
              :read_restricted,
              :permission,

app/serializers/category_detailed_serializer.rb

@@ -9,7 +9,6 @@ class CategoryDetailedSerializer < BasicCategorySerializer
              :topics_month,
              :topics_year,
              :topics_all_time,
-             :description_excerpt,
              :is_uncategorized,
              :subcategory_ids
 
@@ -27,10 +26,6 @@ class CategoryDetailedSerializer < BasicCategorySerializer
     is_uncategorized
   end
 
-  def description_excerpt
-    PrettyText.excerpt(description, 300) if description
-  end
-
   def include_subcategory_ids?
     subcategory_ids.present?
   end