UX: Category header restyle (#34081)

jordanvidrine · yuriyaran · commit 355de61b0f45 · 2025-08-21T15:32:23.000+03:00
diff --git a/app/assets/javascripts/discourse/app/components/category-logo.gjs b/app/assets/javascripts/discourse/app/components/category-logo.gjs
@@ -1,7 +1,7 @@
 import LightDarkImg from "discourse/components/light-dark-img";
 
 const CategoryLogo = <template>
-  <div class="category-logo aspect-image">
+  <div class="category-logo aspect-image" ...attributes>
     <LightDarkImg
       @lightImg={{@category.uploaded_logo}}
       @darkImg={{@category.uploaded_logo_dark}}
diff --git a/app/assets/javascripts/discourse/app/components/discovery/navigation.gjs b/app/assets/javascripts/discourse/app/components/discovery/navigation.gjs
@@ -2,15 +2,16 @@ import Component from "@glimmer/component";
 import { array } from "@ember/helper";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
 import AddCategoryTagClasses from "discourse/components/add-category-tag-classes";
 import CategoryLogo from "discourse/components/category-logo";
 import DNavigation from "discourse/components/d-navigation";
 import AccessibleDiscoveryHeading from "discourse/components/discovery/accessible-discovery-heading";
 import ReorderCategories from "discourse/components/modal/reorder-categories";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import bodyClass from "discourse/helpers/body-class";
+import categoryBadge from "discourse/helpers/category-badge";
 import concatClass from "discourse/helpers/concat-class";
-import dirSpan from "discourse/helpers/dir-span";
 import lazyHash from "discourse/helpers/lazy-hash";
 import { calculateFilterMode } from "discourse/lib/filter-mode";
 import { TRACKED_QUERY_PARAM_VALUE } from "discourse/lib/topic-list-tracked-filter";
@@ -70,6 +71,13 @@ export default class DiscoveryNavigation extends Component {
     this.modal.show(ReorderCategories);
   }
 
+  get headingClasses() {
+    return concatClass(
+      "category-heading",
+      this.args.category?.uploaded_logo?.url ? "--has-logo" : null
+    );
+  }
+
   <template>
     <AddCategoryTagClasses
       @category={{@category}}
@@ -89,21 +97,28 @@ export default class DiscoveryNavigation extends Component {
         @outletArgs={{lazyHash category=@category tag=@tag}}
       />
 
-      <section class="category-heading">
+      <section class={{this.headingClasses}}>
         {{#if @category.uploaded_logo.url}}
-          <CategoryLogo @category={{@category}} />
+          <CategoryLogo
+            @category={{@category}}
+            class="category-heading__logo"
+          />
           {{#if @category.description}}
-            <p>{{dirSpan @category.description htmlSafe="true"}}</p>
+            <div class="category-heading__content">
+              {{categoryBadge @category class="category-heading__badge"}}
+              <p class="category-heading__description">
+                {{htmlSafe @category.description}}
+              </p>
+            </div>
           {{/if}}
         {{/if}}
 
-        <span>
-          <PluginOutlet
-            @name="category-heading"
-            @connectorTagName="div"
-            @outletArgs={{lazyHash category=@category tag=@tag}}
-          />
-        </span>
+        <PluginOutlet
+          @name="category-heading"
+          @connectorTagName="div"
+          @outletArgs={{lazyHash category=@category tag=@tag}}
+        />
+
       </section>
     {{/if}}
 
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -1,5 +1,11 @@
 @use "lib/viewport";
 
+:root {
+  --category-header-logo-size: 3rem;
+  --category-description-width: 760px;
+  --category-header-border: 1px solid var(--content-border-color);
+}
+
 #navigation-bar {
   display: flex;
   flex-wrap: wrap;
@@ -46,11 +52,42 @@
 
 .category-heading {
   max-width: 100%;
-  font-size: var(--font-up-3);
 
-  p {
-    margin-top: 0;
+  &.--has-logo {
+    display: flex;
+    gap: var(--space-4);
+    margin-bottom: var(--space-6);
+    border: var(--category-header-border);
+    padding: var(--space-4);
+    border-radius: var(--d-border-radius);
+  }
+
+  &__logo.category-logo.aspect-image {
+    height: var(--category-header-logo-size);
+    width: var(--category-header-logo-size);
+    margin-top: calc(1rem - 1cap);
+    flex-shrink: 0;
+  }
+
+  &__description {
+    margin: 0;
     line-height: var(--line-height-large);
+    font-size: var(--font-0);
+    color: var(--category-boxes-description-text-color);
+    max-width: var(--category-description-width);
+  }
+
+  &__content {
+    flex-grow: 1;
+  }
+
+  &__content .badge-category__wrapper {
+    font-size: var(--font-up-3);
+  }
+
+  &__content .badge-category__name {
+    font-weight: bold;
+    color: var(--primary);
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
@@ -247,11 +247,6 @@
   }
 }
 
-.category-logo.aspect-image {
-  float: left;
-  margin: var(--space-1) var(--space-8) var(--space-8) 0;
-}
-
 /* Tablet (portrait) ----------- */
 
 // These styles kick in a little earlier when the sidebar appears

Original file line number	Diff line number	Diff line change
`@@ -247,11 +247,6 @@`
`247`	`247`	`}`
`248`	`248`	`}`
`249`	`249`
`250`		`-.category-logo.aspect-image {`
`251`		`- float: left;`
`252`		`- margin: var(--space-1) var(--space-8) var(--space-8) 0;`
`253`		`-}`
`254`		`-`
`255`	`250`	`/* Tablet (portrait) ----------- */`
`256`	`251`
`257`	`252`	`// These styles kick in a little earlier when the sidebar appears`