diff --git a/app/assets/javascripts/discourse/templates/components/categories-only.hbs b/app/assets/javascripts/discourse/templates/components/categories-only.hbs
index 852745c80fe..1e7838ced42 100644
--- a/app/assets/javascripts/discourse/templates/components/categories-only.hbs
+++ b/app/assets/javascripts/discourse/templates/components/categories-only.hbs
@@ -14,17 +14,23 @@
{{category-title-link category=c}}
-
- {{{dir-span c.description_excerpt}}}
-
-
+ {{#if c.description_excerpt}}
+
+ {{{dir-span c.description_excerpt}}}
+
+ {{/if}}
{{#if c.isGrandParent}}
-
+
{{#each c.subcategories as |subcategory|}}
{{category-title-link tagName="h4" category=subcategory}}
-
+ {{log subcategory}}
+ {{#if subcategory.description_excerpt}}
+
+ {{{dir-span subcategory.description_excerpt}}}
+
+ {{/if}}
{{#if subcategory.subcategories}}
{{#each subcategory.subcategories as |subsubcategory|}}
@@ -37,9 +43,11 @@
{{/each}}
{{else}}
-
- {{{dir-span subcategory.description_excerpt}}}
-
+ {{#if subcategory.description_excerpt}}
+
+ {{{dir-span subcategory.description_excerpt}}}
+
+ {{/if}}
{{/if}}
|
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 7ad6f5044ba..ae1b117c0db 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -11,6 +11,13 @@
vertical-align: text-top;
line-height: $line-height-medium;
}
+ &.with-topics {
+ .subcategories-with-subcategories {
+ .category-description {
+ display: none;
+ }
+ }
+ }
}
.category-boxes,
@@ -195,12 +202,24 @@
}
.categories-list .category {
- h3 .d-icon {
- color: $primary-medium;
- height: 0.76em;
- width: 0.76em;
- vertical-align: baseline;
- margin-right: 0.15em;
+ h3,
+ h4 {
+ margin-bottom: 0;
+ .d-icon {
+ color: $primary-high;
+ height: 0.76em;
+ width: 0.76em;
+ vertical-align: baseline;
+ margin-right: 0.15em;
+ }
+ }
+ .category-description {
+ margin-top: 0.5em;
+ overflow: hidden;
+ color: $primary-high;
+ }
+ .category-logo.aspect-image {
+ margin-top: 0.5em;
}
}
@@ -210,3 +229,15 @@
margin-right: 0;
}
}
+
+.category-list.subcategories-with-subcategories {
+ margin-top: 1em;
+ margin-bottom: 0;
+ border-top: 1px solid $primary-low;
+ .category-description {
+ font-size: $font-down-1;
+ }
+ .category-logo.aspect-image {
+ --max-height: 75px;
+ }
+}
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index af20bf971ab..50801d9d340 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -151,4 +151,10 @@
.topic-featured-link {
padding-left: 8px;
}
+
+ .subcategories-with-subcategories {
+ .category-description {
+ display: none;
+ }
+ }
}
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index f8091d8759b..c0e42a9be7b 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -218,7 +218,6 @@
// Category list
// --------------------------------------------------
.categories-list .category-list {
- margin-left: -10px;
margin-bottom: 2em;
td {
@@ -265,10 +264,22 @@
}
.subcategory-list-item.category {
+ display: block;
+ width: calc(100% + 20px);
+ margin: 1.25em 10px 0;
+ border-bottom: none !important;
+ border-top: 1px solid $primary-low !important;
+ &:last-of-type {
+ margin-top: 0;
+ margin-bottom: 1.25em;
+ border-bottom: 1px solid $primary-low !important;
+ }
td:first-of-type {
padding: 12px 0px;
}
-
+ .category-logo.aspect-image {
+ display: none;
+ }
.subcategories {
padding-left: 10px;
}
@@ -283,9 +294,8 @@ tr.category-topic-link {
.category-list-item,
.subcategory-list-item {
- padding: 5px 0 2px 3px;
+ padding: 0 0 0 3px;
border-left: 6px solid;
- border-top: 1px solid;
h3,
h4 {
@@ -326,8 +336,11 @@ tr.category-topic-link {
padding-bottom: 15px;
}
- .subcategories-list td {
- padding-top: 15px;
+ .subcategories-list {
+ border-bottom: none;
+ td {
+ padding-top: 15px;
+ }
}
.topic-list > tbody > tr {
@@ -376,6 +389,13 @@ tr.category-topic-link {
}
}
+.category-list-item {
+ padding: 0.5em 0 0.25em;
+ border-top: 1px solid $primary-low !important;
+ border-bottom: 1px solid $primary-low !important;
+ margin-bottom: 2em;
+}
+
.category-box {
h3 {
margin: 0 0 0.5em 0;
|