diff --git a/app/assets/javascripts/discourse/templates/mobile/components/categories-only.hbs b/app/assets/javascripts/discourse/templates/mobile/components/categories-only.hbs deleted file mode 100644 index 8f064ab82d8..00000000000 --- a/app/assets/javascripts/discourse/templates/mobile/components/categories-only.hbs +++ /dev/null @@ -1,59 +0,0 @@ -{{#if categories}} -
- {{#each categories as |c|}} -
- - - - - - {{#if c.description_excerpt}} - - - - {{/if}} - - {{#if showTopics}} - {{#each c.topics as |t|}} - {{mobile-category-topic topic=t}} - {{/each}} - {{/if}} - - {{#if c.subcategories}} - - - - {{/if}} - -
- {{category-title-link category=c}} -
- {{{c.description_excerpt}}} -
-
- {{#each c.subcategories as |subcategory|}} - {{category-link subcategory}} - {{/each}} -
-
- -
- {{/each}} -
-{{/if}} diff --git a/app/assets/javascripts/discourse/templates/mobile/components/categories-with-featured-topics.hbs b/app/assets/javascripts/discourse/templates/mobile/components/categories-with-featured-topics.hbs deleted file mode 100644 index 9243d150285..00000000000 --- a/app/assets/javascripts/discourse/templates/mobile/components/categories-with-featured-topics.hbs +++ /dev/null @@ -1,3 +0,0 @@ -{{categories-only categories=categories - latestTopicOnly=latestTopicOnly - showTopics="true"}} diff --git a/app/assets/javascripts/discourse/templates/mobile/discovery/categories.hbs b/app/assets/javascripts/discourse/templates/mobile/discovery/categories.hbs index 29d0abb762b..2c93702e92f 100644 --- a/app/assets/javascripts/discourse/templates/mobile/discovery/categories.hbs +++ b/app/assets/javascripts/discourse/templates/mobile/discovery/categories.hbs @@ -1,6 +1,53 @@ -{{#discovery-categories refresh="refresh"}} - {{component categoryPageStyle - categories=model.categories - latestTopicOnly=latestTopicOnly - topics=model.topics}} -{{/discovery-categories}} \ No newline at end of file +{{#each model.categories as |c|}} +
+ + + + + + {{#if c.description_excerpt}} + + + + {{/if}} + + {{#each c.topics as |t|}} + {{mobile-category-topic topic=t}} + {{/each}} + + {{#if c.subcategories}} + + + + {{/if}} + +
+ {{category-title-link category=c}} +
+ {{{c.description_excerpt}}} +
+
+ {{#each c.subcategories as |subcategory|}} + {{category-link subcategory}} + {{/each}} +
+
+ +
+{{/each}} diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss deleted file mode 100644 index 4818ecc2d0d..00000000000 --- a/app/assets/stylesheets/common/base/category-list.scss +++ /dev/null @@ -1,136 +0,0 @@ -.category-boxes, .category-boxes-with-topics { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - margin-top: 1em; - margin-bottom: 1em; - width: 100%; - - .category-box { - display: flex; - flex-direction: row; - align-content: flex-start; - - box-sizing: border-box; - border: 2px solid blend-primary-secondary(20%); - - .mobile-view & { - width: 100%; - } - - .logo { - display: block; - height: 40px; - margin: 0 auto 1em auto; - } - - h3 .fa { - color: $primary; - } - } - - &.no-logos { - .logo { - display: none; - } - } -} - -.category-boxes { - .category-box { - width: 23%; - margin: 0 1% 1.5em 1%; - > a { - width: 100%; - padding: 0; - } - } - - .category-box-heading { - padding: 1em 1em 0 1em; - } - - .description { - padding: 0 1em 1em 1em; - text-align: center; - font-size: 1.05em; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); - .overflow { - max-height: 6em; - overflow: hidden; - text-overflow: ellipsis; - } - } - - h3 { - font-size: 1.5em; - margin-bottom: 0.5em; - margin-top: 0.25em; - line-height: 1.1em; - text-align: center; - } - - &.no-logos { - .category-box a { - padding: 3em 1em; - } - } -} - -.category-boxes-with-topics { - .category-box { - width: 31%; - margin: 0 1% 1.5em 1%; - padding: 0; - border-width: 0 0 0 6px; - border-style: solid; - border-color: blend-primary-secondary(20%); - } - .category-box-inner { - width: 100%; - padding: 0; - border-width: 2px 2px 2px 0; - border-style: solid; - border-color: blend-primary-secondary(20%); - } - - h3 { - font-size: 1.2em; - text-align: center; - } - - .category-box-heading { - padding: 1em 1em 0.5em 1em; - a[href] { - width: 100%; - color: $primary; - } - } - - .featured-topics { - padding: 0.5em 1em 1em 1em; - ul { - color: blend-primary-secondary(70%); - list-style: none; - padding: 0; - margin: 0; - } - li { - padding: 0; - margin-left: 1.5em; - .overflow { - max-height: 3em; - overflow: hidden; - text-overflow: ellipsis; - } - } - li:before { - content: '\f0f6'; - font-family: 'FontAwesome'; - float: left; - margin-left: -1.5em; - } - li.topic-pinned:before { content: '\f08d'; } - li.topic-closed:before, li.topic-archived:before { content: '\f023'; } - } -} diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss index d33120135f9..2a6a53add6a 100644 --- a/app/assets/stylesheets/desktop/category-list.scss +++ b/app/assets/stylesheets/desktop/category-list.scss @@ -176,3 +176,140 @@ } } } + +.category-boxes, .category-boxes-with-topics { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + margin-top: 1em; + margin-bottom: 1em; + width: 100%; + + .category-box { + display: flex; + flex-direction: row; + align-content: flex-start; + + box-sizing: border-box; + border: 2px solid blend-primary-secondary(20%); + + .mobile-view & { + width: 100%; + } + + .logo { + display: block; + height: 40px; + margin: 0 auto 1em auto; + } + + h3 .fa { + color: $primary; + } + } + + &.no-logos { + .logo { + display: none; + } + } +} + +.category-boxes { + .category-box { + width: 23%; + margin: 0 1% 1.5em 1%; + > a { + width: 100%; + padding: 0; + } + } + + .category-box-heading { + padding: 1em 1em 0 1em; + } + + .description { + padding: 0 1em 1em 1em; + text-align: center; + font-size: 1.05em; + color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + .overflow { + max-height: 6em; + overflow: hidden; + text-overflow: ellipsis; + } + } + + h3 { + font-size: 1.5em; + margin-bottom: 0.5em; + margin-top: 0.25em; + line-height: 1.1em; + text-align: center; + } + + &.no-logos { + .category-box a { + padding: 3em 1em; + } + } +} + +.category-boxes-with-topics { + .category-box { + width: 31%; + margin: 0 1% 1.5em 1%; + padding: 0; + border-width: 0 0 0 6px; + border-style: solid; + border-color: blend-primary-secondary(20%); + } + .category-box-inner { + width: 100%; + padding: 0; + border-width: 2px 2px 2px 0; + border-style: solid; + border-color: blend-primary-secondary(20%); + } + + h3 { + font-size: 1.2em; + text-align: center; + } + + .category-box-heading { + padding: 1em 1em 0.5em 1em; + a[href] { + width: 100%; + color: $primary; + } + } + + .featured-topics { + padding: 0.5em 1em 1em 1em; + ul { + color: blend-primary-secondary(70%); + list-style: none; + padding: 0; + margin: 0; + } + li { + padding: 0; + margin-left: 1.5em; + .overflow { + max-height: 3em; + overflow: hidden; + text-overflow: ellipsis; + } + } + li:before { + content: '\f0f6'; + font-family: 'FontAwesome'; + float: left; + margin-left: -1.5em; + } + li.topic-pinned:before { content: '\f08d'; } + li.topic-closed:before, li.topic-archived:before { content: '\f023'; } + } +} diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index d66aa8115ac..17644a5f27c 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -130,31 +130,8 @@ // Category list // -------------------------------------------------- -.categories-list .category-list { - margin-left: -10px; - margin-bottom: 2em; - - td { - padding: 12px 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); - vertical-align: top; - } - - td:first-of-type { - padding-left: 10px; - } - - tbody { - tr { - border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -75%); - &:first-of-type { - border-top: 3px solid dark-light-diff($primary, $secondary, 90%, -75%); - } - } - .category { - border-left: 6px solid; - } - } +.categories-list .list-container { + margin-left: -10px; // Extend past the .wrap padding to the edge of the window } .category-list-item.category { @@ -300,11 +277,6 @@ tr.category-topic-link { } } -.category-box { - h3 { - margin: 0 0 0.5em 0; - } -} .topic-list-bottom { margin: 20px 0 0 0; @@ -419,7 +391,6 @@ ol.category-breadcrumb { .category-logo { display: block; max-width: 100%; - max-height: 150px; padding: 8px 0; } @@ -449,6 +420,6 @@ td .main-link { } } -.category-list.with-topics .category-list-item .category-description { +.category-list-item .category-description { display: none; }