From 06dfc9d46d6e757ccda76acbf80f4c6c9e702d75 Mon Sep 17 00:00:00 2001 From: awesomerobot Date: Wed, 23 Nov 2022 21:06:57 -0500 Subject: [PATCH] UX: Update mobile categories page style, refactor --- .../discourse/app/helpers/cold-age-class.js | 35 ---- .../components/category-title-link.hbs | 10 + .../components/mobile-category-topic.hbs | 2 +- .../mobile/components/parent-category-row.hbs | 46 ++--- app/assets/stylesheets/mobile/_index.scss | 1 + app/assets/stylesheets/mobile/categories.scss | 158 ++++++++++++++ app/assets/stylesheets/mobile/topic-list.scss | 192 +----------------- config/locales/client.en.yml | 4 +- 8 files changed, 189 insertions(+), 259 deletions(-) delete mode 100644 app/assets/javascripts/discourse/app/helpers/cold-age-class.js create mode 100644 app/assets/stylesheets/mobile/categories.scss diff --git a/app/assets/javascripts/discourse/app/helpers/cold-age-class.js b/app/assets/javascripts/discourse/app/helpers/cold-age-class.js deleted file mode 100644 index ff696982cc..0000000000 --- a/app/assets/javascripts/discourse/app/helpers/cold-age-class.js +++ /dev/null @@ -1,35 +0,0 @@ -import { helperContext, registerUnbound } from "discourse-common/lib/helpers"; - -function daysSinceEpoch(dt) { - // 1000 * 60 * 60 * 24 = days since epoch - return dt.getTime() / 86400000; -} - -registerUnbound("cold-age-class", function (dt, params) { - let className = params["class"] || "age"; - - if (!dt) { - return className; - } - - let startDate = params.startDate || new Date(); - - // Show heat on age - let nowDays = daysSinceEpoch(startDate), - epochDays = daysSinceEpoch(new Date(dt)); - - let siteSettings = helperContext().siteSettings; - if (nowDays - epochDays > siteSettings.cold_age_days_high) { - return className + " coldmap-high"; - } - if (nowDays - epochDays > siteSettings.cold_age_days_medium) { - return className + " coldmap-med"; - } - if (nowDays - epochDays > siteSettings.cold_age_days_low) { - return className + " coldmap-low"; - } - - return className; -}); - -export { daysSinceEpoch }; diff --git a/app/assets/javascripts/discourse/app/templates/components/category-title-link.hbs b/app/assets/javascripts/discourse/app/templates/components/category-title-link.hbs index 89b6b1a777..0d5ba73d6e 100644 --- a/app/assets/javascripts/discourse/app/templates/components/category-title-link.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/category-title-link.hbs @@ -5,6 +5,16 @@ {{d-icon this.lockIcon}} {{/if}} {{dir-span this.category.name}} + {{#if this.site.mobileView}} +
+ {{html-safe this.category.statTotal}} +
+ {{#unless this.category.pickAll}} +
+ {{html-safe this.category.stat}} +
+ {{/unless}} + {{/if}} {{#if this.category.uploaded_logo.url}} diff --git a/app/assets/javascripts/discourse/app/templates/components/mobile-category-topic.hbs b/app/assets/javascripts/discourse/app/templates/components/mobile-category-topic.hbs index f3350cf9dc..cafd208b22 100644 --- a/app/assets/javascripts/discourse/app/templates/components/mobile-category-topic.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/mobile-category-topic.hbs @@ -5,7 +5,7 @@ {{#if this.topic.unseen}} {{/if}} - {{format-age this.topic.last_posted_at}} + {{format-age this.topic.last_posted_at}} {{raw "list/post-count-or-badges" topic=this.topic postBadgesEnabled="true"}} diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row.hbs index b281ee60d9..66cf0f3592 100644 --- a/app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row.hbs +++ b/app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row.hbs @@ -4,8 +4,23 @@ - + + + {{/if}} {{#if this.category.description_excerpt}} @@ -22,36 +37,7 @@ {{/each}} {{/if}} {{/unless}} - {{#if this.category.isGrandParent}} - {{#each this.category.subcategories as |subcategory|}} - - {{/each}} - {{else if this.category.subcategories}} - - - - {{/if}}
+ + {{#if this.category.isGrandParent}} + {{#each this.category.subcategories as |subcategory|}} + + {{/each}} + {{else if this.category.subcategories}} +
+
+ {{#each this.category.subcategories as |subcategory|}} + + {{/each}} +
+
-
- {{#each this.category.subcategories as |subcategory|}} - - {{/each}} -
-
- {{/unless}} diff --git a/app/assets/stylesheets/mobile/_index.scss b/app/assets/stylesheets/mobile/_index.scss index 1fc0b0e8d7..cd5b006933 100644 --- a/app/assets/stylesheets/mobile/_index.scss +++ b/app/assets/stylesheets/mobile/_index.scss @@ -6,6 +6,7 @@ @import "admin_reports"; @import "alert"; @import "buttons"; +@import "categories"; @import "compose"; @import "dashboard"; @import "directory"; diff --git a/app/assets/stylesheets/mobile/categories.scss b/app/assets/stylesheets/mobile/categories.scss new file mode 100644 index 0000000000..bbc67bc238 --- /dev/null +++ b/app/assets/stylesheets/mobile/categories.scss @@ -0,0 +1,158 @@ +.categories-list .category-list { + td { + padding: 0.75em 1.5em 0.75em 0; + color: var(--primary-medium); + } + th { + padding: 0.75em 0 1em; + .category-stat { + font-size: var(--font-down-3); + font-weight: normal; + margin-left: auto; + color: var(--primary-medium); + } + } + tbody { + border-top: none; + } +} + +.category-list-item { + border-top: 1px solid; + border-bottom: 1px solid; + border-top-color: var(--primary-low) !important; // overrides inline style + border-bottom-color: var(--primary-low) !important; // overrides inline style + margin: 1em 0 2em; + + &.category { + padding-left: 0.75em; + + .posts { + padding-right: 0; + text-align: right; + vertical-align: top; + .topic-post-badges { + margin-right: -0.25em; // visual alignment + } + } + + .topic-inset a { + margin-right: 0.25em; + } + } +} + +.category-topic-link { + border-top: 1px solid var(--primary-low); + &:last-of-type { + border-bottom: none; + } + &.visited { + .age { + color: var(--primary-low-mid); + } + } +} + +.category-list-item, +.subcategory-list-item { + padding: 0; + border-left: 5px solid; + + .category-logo.aspect-image { + margin-bottom: 0; + } + + h3, + h4 { + max-width: 100%; + padding: 0; + .d-icon { + margin-right: 5px; + } + a[href] { + color: var(--primary); + } + } + + h3 { + font-size: var(--font-up-2); + } + + h4 { + font-size: var(--font-up-1); + } + + .category-name { + max-width: 75vw; + } + + .age { + margin-right: 0.25em; + } + + .subcategories-list { + .subcategories { + padding-left: 0.15em; // visual alignment + .category-name { + font-size: var(--font-down-1); + } + } + } + + .category-topic-link .main-link .age { + font-size: var(--font-down-1); + } + + .category-description td { + padding-top: 0; + padding-bottom: 15px; + } + + .subcategories-list { + border-bottom: none; + td { + padding-top: 0.25em; + padding-bottom: 0.25em; + } + } + + .category-topic-link { + .num { + padding: 1em 0; + white-space: nowrap; + } + .topic-excerpt { + width: 110%; + } + } + + .posters { + float: left; + } +} + +.subcategory-list-item.category { + // sub-sub categories + display: block; + border-top: 1px solid; + border-top-color: var(--primary-low) !important; // overrides inline style + border-bottom-color: transparent !important; // overrides inline style + td { + padding-left: 0.5em; + } + &:first-of-type { + margin-top: 1em; + } + &:last-of-type { + border-bottom-color: var( + --primary-low + ) !important; // overrides inline style + } + .category-text-title { + font-size: var(--font-down-1); + } + .category-logo.aspect-image { + display: none; + } +} diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 39d4a02878..d29a0388dc 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -194,208 +194,18 @@ } } -// Category list +// Misc. stuff // -------------------------------------------------- -.categories-list .category-list { - margin-bottom: 2em; - - td { - padding: 12px 5px; - color: var(--primary-med-or-secondary-high); - vertical-align: top; - } - - th { - padding: 10px 0 0; - } - - td:first-of-type { - padding-left: 10px; - } - - tbody { - border-top: none; - .category { - border-left: 6px solid; - } - } -} - -.category-list-item.category { - tr:first-of-type { - border: none; - } - // Allow percentage widths on table cells to include their padding - box-sizing: border-box; - *, - *:before, - *:after { - box-sizing: inherit; - } - - .posts { - vertical-align: top; - } - - .age { - margin-left: 5px; - } - - // numbers get dimmer as they get colder - .coldmap { - &-high { - opacity: 0.4; - } - - &-med { - opacity: 0.6; - } - - &-low { - opacity: 0.8; - } - } -} - -.subcategory-list-item.category { - display: block; - width: calc(100% + 20px); - margin: 1.25em 10px 0; - border-bottom: none !important; - border-top: 1px solid var(--primary-low) !important; - &:last-of-type { - margin-top: 0; - margin-bottom: 1.25em; - border-bottom: 1px solid var(--primary-low) !important; - } - td:first-of-type { - padding: 12px 0px; - } - .category-logo.aspect-image { - display: none; - } - .subcategories { - padding-left: 10px; - } -} - -tr.category-topic-link { - border-bottom: 1px solid var(--primary-low); - &:last-of-type { - border-bottom: none; - } -} - -.category-list-item, -.subcategory-list-item { - padding: 0 0 0 3px; - border-left: 6px solid; - - h3, - h4 { - max-width: 100%; - padding: 0 0 0 10px; - .d-icon { - margin-right: 5px; - } - a[href] { - color: var(--primary); - } - } - - h3 { - font-size: var(--font-up-2); - } - - h4 { - font-size: var(--font-up-1); - } - - .category-name { - max-width: 80vw; - } - - .category-topic-link .main-link, - .subcategories-list td, - .category-description td { - padding-left: 10px; - } - - .category-topic-link .main-link .age { - font-size: var(--font-down-1); - } - - .category-description td { - padding-top: 0; - padding-bottom: 15px; - } - - .subcategories-list { - border-bottom: none; - td { - padding-top: 15px; - } - } - - th .badge-category { - margin: 0; - } - - .category-topic-link { - .num { - white-space: nowrap; - } - .topic-excerpt { - width: 110%; - } - } - - .posters { - float: left; - } - > footer { - border-top: 1px solid var(--primary-low); - padding: 7px 10px; - .category-stat { - float: left; - margin: 3px 1em 0 0; - font-weight: normal; - font-size: var(--font-down-1); - .value { - font-weight: bold; - } - } - .btn { - float: right; - margin-left: 7px; - } - } -} - -.category-list-item { - padding: 0.5em 0 0.25em; - border-top: 1px solid var(--primary-low) !important; - border-bottom: 1px solid var(--primary-low) !important; - margin: 1em 0 2em; -} - .category-box { h3 { margin: 0 0 0.5em 0; } } -.category-topics-count a { - color: var(--primary); -} - .topic-list-bottom { margin: 20px 0 0 0; } -// Misc. stuff -// -------------------------------------------------- - .dropdown { position: relative; } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 96521f563f..1cb96f9f7a 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1011,8 +1011,8 @@ en: week: "week" month: "month" topic_stat_all_time: - one: "%{number} total" - other: "%{number} total" + one: "%{number} topic" + other: "%{number} topics" topic_stat_sentence_week: one: "%{count} new topic in the past week." other: "%{count} new topics in the past week."