From 8ccde140e5076ea166f6d50e263e8ffef7df8d24 Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Sun, 13 Aug 2017 12:13:02 -0400 Subject: [PATCH] Convert latest-topic-list to components and remove nested tables --- .../components/categories-only.js.es6 | 3 + .../components/latest-topic-list-item.js.es6 | 3 +- .../components/latest-topic-list.js.es6 | 3 + .../categories-and-latest-topics.hbs | 34 ++-------- .../components/latest-topic-list-item.hbs | 58 ++++++++--------- .../components/latest-topic-list.hbs | 16 +++++ .../stylesheets/common/base/_topic-list.scss | 38 +++++++++-- app/assets/stylesheets/desktop.scss | 1 + .../stylesheets/desktop/category-list.scss | 64 +++---------------- .../desktop/latest-topic-list.scss | 41 ++++++++++++ .../stylesheets/desktop/topic-list.scss | 9 ++- 11 files changed, 146 insertions(+), 124 deletions(-) create mode 100644 app/assets/javascripts/discourse/components/categories-only.js.es6 create mode 100644 app/assets/javascripts/discourse/components/latest-topic-list.js.es6 create mode 100644 app/assets/javascripts/discourse/templates/components/latest-topic-list.hbs create mode 100644 app/assets/stylesheets/desktop/latest-topic-list.scss diff --git a/app/assets/javascripts/discourse/components/categories-only.js.es6 b/app/assets/javascripts/discourse/components/categories-only.js.es6 new file mode 100644 index 00000000000..9250c1ae73b --- /dev/null +++ b/app/assets/javascripts/discourse/components/categories-only.js.es6 @@ -0,0 +1,3 @@ +export default Ember.Component.extend({ + tagName: '' +}); diff --git a/app/assets/javascripts/discourse/components/latest-topic-list-item.js.es6 b/app/assets/javascripts/discourse/components/latest-topic-list-item.js.es6 index 07a4c53b2f5..f92992e6f18 100644 --- a/app/assets/javascripts/discourse/components/latest-topic-list-item.js.es6 +++ b/app/assets/javascripts/discourse/components/latest-topic-list-item.js.es6 @@ -1,6 +1,7 @@ import { showEntrance } from "discourse/components/topic-list-item"; export default Ember.Component.extend({ - tagName: "tr", click: showEntrance, + attributeBindings: ['topic.id:data-topic-id'], + classNameBindings: [':latest-topic-list-item', 'topic.archived'] }); diff --git a/app/assets/javascripts/discourse/components/latest-topic-list.js.es6 b/app/assets/javascripts/discourse/components/latest-topic-list.js.es6 new file mode 100644 index 00000000000..664eb94c31e --- /dev/null +++ b/app/assets/javascripts/discourse/components/latest-topic-list.js.es6 @@ -0,0 +1,3 @@ +export default Ember.Component.extend({ + classNames: ['latest-topic-list'] +}); diff --git a/app/assets/javascripts/discourse/templates/components/categories-and-latest-topics.hbs b/app/assets/javascripts/discourse/templates/components/categories-and-latest-topics.hbs index c837733c189..1a32cea92d3 100644 --- a/app/assets/javascripts/discourse/templates/components/categories-and-latest-topics.hbs +++ b/app/assets/javascripts/discourse/templates/components/categories-and-latest-topics.hbs @@ -1,29 +1,7 @@ -{{categories-only categories=categories}} +
+ {{categories-only categories=categories}} +
- - - - - - - - {{#if topics}} - {{#each topics as |t|}} - {{latest-topic-list-item topic=t}} - {{/each}} - - - - {{else}} - - - - {{/if}} - -
{{i18n "filters.latest.title"}}
- {{i18n "more"}} -
-

{{i18n "topics.none.latest"}}

-
- -
+
+ {{latest-topic-list topics=topics}} +
diff --git a/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs b/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs index ab80c70c21f..a3666f6842d 100644 --- a/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs +++ b/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs @@ -1,33 +1,25 @@ - - - - - - {{raw "topic-status" topic=topic}} - {{topic-link topic}} - {{#if topic.featured_link}} - {{topic-featured-link topic}} - {{/if}} - {{topic-post-badges newPosts=topic.totalUnread unseen=topic.unseen url=topic.lastUnreadUrl}} - - - {{category-link topic.category}} - {{discourse-tags topic mode="list"}} - - - - - -
- {{#with topic.lastPoster as |lastPoster|}} - {{#user-link user=lastPoster}} - {{avatar lastPoster imageSize="large"}} - {{/user-link}} - {{/with}} - -
- {{raw "list/posts-count-column" topic=topic tagName="div"}} -
- {{format-date topic.bumpedAt format="tiny" noTitle="true"}} -
-
+
+ {{#user-link user=topic.lastPoster}} + {{avatar topic.lastPoster imageSize="large"}} + {{/user-link}} +
+
+
+ {{raw "topic-status" topic=topic}} + {{topic-link topic}} + {{#if topic.featured_link}} + {{topic-featured-link topic}} + {{/if}} + {{topic-post-badges newPosts=topic.totalUnread unseen=topic.unseen url=topic.lastUnreadUrl}} +
+
+ {{category-link topic.category}} + {{discourse-tags topic mode="list"}} +
+
+
+ {{raw "list/posts-count-column" topic=topic tagName="div"}} +
+ {{format-date topic.bumpedAt format="tiny" noTitle="true"}} +
+
diff --git a/app/assets/javascripts/discourse/templates/components/latest-topic-list.hbs b/app/assets/javascripts/discourse/templates/components/latest-topic-list.hbs new file mode 100644 index 00000000000..fa79f98fb93 --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/latest-topic-list.hbs @@ -0,0 +1,16 @@ +
+ {{i18n "filters.latest.title"}} +
+ +{{#if topics}} + {{#each topics as |t|}} + {{latest-topic-list-item topic=t}} + {{/each}} +
+ {{i18n "more"}} +
+{{else}} +
+

{{i18n "topics.none.latest"}}

+
+{{/if}} diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index 73460e47c32..ccd2ff1c072 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/app/assets/stylesheets/common/base/_topic-list.scss @@ -19,6 +19,25 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-medium; } .topic-list a.title.visited:not(.badge-notification) {color: $primary-medium; } +.topic-list-main-link { + font-size: 1.143em; + a.title { + padding: 15px 0; + word-break: break-word; + color: $primary; + } + + .anon & { + a.title:visited:not(.badge-notification) { + color: $primary-medium; + } + } + + a.title.visited:not(.badge-notification) { + color: $primary-medium; + } +} + .topic-list { width: 100%; border-collapse: collapse; @@ -58,7 +77,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary- } > tbody > tr:first-of-type { - border-top: 3px solid $primary-low; + border-top: 3px solid $primary-low; } th, @@ -81,11 +100,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary- } .main-link { - font-size: 1.143em; - a.title { - padding: 15px 0; - word-break: break-word; - } + @extend .topic-list-main-link; } .topic-featured-link { @@ -344,3 +359,14 @@ ol.category-breadcrumb { div.education { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } + +.list-cell { + padding: 12px 5px; + color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); +} + +.table-heading { + @extend .list-cell; + border-bottom: 2px solid $primary-low; +} + diff --git a/app/assets/stylesheets/desktop.scss b/app/assets/stylesheets/desktop.scss index 71f19278eda..211ed21e229 100644 --- a/app/assets/stylesheets/desktop.scss +++ b/app/assets/stylesheets/desktop.scss @@ -11,6 +11,7 @@ @import "desktop/modal"; @import "desktop/user-card"; @import "desktop/category-list"; +@import "desktop/latest-topic-list"; @import "desktop/topic-list"; @import "desktop/topic-post"; @import "desktop/topic"; diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss index e6926808ede..fb2de653449 100644 --- a/app/assets/stylesheets/desktop/category-list.scss +++ b/app/assets/stylesheets/desktop/category-list.scss @@ -3,8 +3,7 @@ width: 100%; td, th { - padding: 12px 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + @extend .list-cell; } td { @@ -90,9 +89,9 @@ tbody { tr { - border-bottom: 1px solid $primary-low; + border-bottom: 1px solid $primary-low; &:first-of-type { - border-top: 3px solid $primary-low; + border-top: 3px solid $primary-low; } } @@ -116,38 +115,15 @@ } .categories-and-latest { + display: flex; + flex-direction: row; - .category-list, - .topic-list-latest { - width: 48%; + div.column { + flex: 1; } - .category-list { - float: left; - } - - .topic-list-latest { - float: right; - th.latest { - line-height: 19px; - } - } - - .main-link { - width: 100%; - } - - .new-posts { - margin-left: 6px; - } - - .topic-stats { - text-align: right; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); - } - - .topic-last-activity a { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + div.column.categories { + margin-right: 2em; } .discourse-tag { @@ -157,25 +133,5 @@ .topic-featured-link { padding-left: 8px; } - - .topic-list { - .posts { - width: 100%; - text-align: right; - margin-bottom: 10px; - } - - .num.posts a { - padding: 0; - } - - .more-topics, - .no-topics { - border-bottom: none; - td { - padding-right: 0; - color: $primary; - } - } - } } + diff --git a/app/assets/stylesheets/desktop/latest-topic-list.scss b/app/assets/stylesheets/desktop/latest-topic-list.scss new file mode 100644 index 00000000000..db703a77b3d --- /dev/null +++ b/app/assets/stylesheets/desktop/latest-topic-list.scss @@ -0,0 +1,41 @@ +.latest-topic-list { + @extend .topic-list-icons; + + .table-heading { + padding: 12px 5px; + color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + } + + .no-topics, .more-topics { + margin-top: 1em; + } +} + +.latest-topic-list-item { + padding: 1em; + border-bottom: 1px solid $primary-low; + display: flex; + + align-items: center; + + .topic-poster { + width: 60px; + } + .main-link { + @extend .topic-list-main-link; + flex: 15; + + .top-row { + margin-bottom: 0.1em; + } + } + .topic-stats { + flex: 1; + text-align: right; + color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + } + + .topic-last-activity a { + color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + } +} diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index f877f044d6a..0754158f88d 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -33,12 +33,17 @@ // Base list // -------------------------------------------------- -.topic-list { - margin: 0 0 10px; +.topic-list-icons { .d-icon-thumb-tack { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } .d-icon-thumb-tack.unpinned { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } a.title {color: $primary;} .d-icon-bookmark { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } +} + +.topic-list { + @extend .topic-list-icons; + + margin: 0 0 10px; th, td { padding: 12px 5px;