UX: Add tag and category classes & refactor (#8)

discourse · Mar 3, 2022 · fbbd4b5 · fbbd4b5
1 parent c769ac0
commit fbbd4b5
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 9 deletions.
diff --git a/about.json b/about.json
@@ -1,6 +1,6 @@
 {
   "name": "Discourse Docs Card Filter",
+  "component": true,
   "about_url": null,
-  "license_url": null,
-  "component": true
+  "license_url": null
 }
diff --git a/javascripts/discourse/components/category-wrapper.js b/javascripts/discourse/components/category-wrapper.js
@@ -62,6 +62,11 @@ export default Component.extend({
   categoryName(categoryName) {
     return categoryName;
   },
+
+  @discourseComputed("categoryInfo.slug")
+  categorySlug(categorySlug) {
+    return categorySlug;
+  },
 
   @discourseComputed("categoryInfo.description")
   hasDescription(description) {

diff --git a/javascripts/discourse/components/tag-wrapper.js b/javascripts/discourse/components/tag-wrapper.js
@@ -54,7 +54,7 @@ export default Component.extend({
 
   @discourseComputed("tag.id")
   tagTitle(tagTitle) {
-    return tagTitle;
+    return tagTitle.replaceAll("-", " ");
   },
 
   @discourseComputed("tag")

diff --git a/javascripts/discourse/templates/components/cards-filter.hbs b/javascripts/discourse/templates/components/cards-filter.hbs
@@ -1,4 +1,4 @@
-<div class="docs-cards-filter categories-filter tag-filter">
+<div class="docs-cards-filter">
   {{#if includedCategories}}
     {{#each includedCategories as |category|}}
       {{category-wrapper category=category categoryOrders=categoryOrders categoryIcons=categoryIcons updateSelectedCategory=updateSelectedCategory}}

diff --git a/javascripts/discourse/templates/components/category-wrapper.hbs b/javascripts/discourse/templates/components/category-wrapper.hbs
@@ -1,4 +1,4 @@
-<a class="docs-card-box category-card" onclick={{selectCategory}}>
+<a class="docs-card-box category-card {{categorySlug}}" onclick={{selectCategory}}>
   <div class="docs-card-box-header">
     {{#if categoryIcon}}
       {{d-icon categoryIcon}}

diff --git a/javascripts/discourse/templates/components/tag-wrapper.hbs b/javascripts/discourse/templates/components/tag-wrapper.hbs
@@ -1,4 +1,4 @@
-<a class="docs-card-box" onclick={{selectTag}}>
+<a class="docs-card-box tag-card {{tag.id}}" onclick={{selectTag}}>
   <div class="docs-card-box-header">
     {{#if tagIcon}}
       {{d-icon tagIcon}}

diff --git a/mobile/mobile.scss b/mobile/mobile.scss