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|}} 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;
{{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}}