From 706f1a629475a8eee682685fb0119c180207cd6b Mon Sep 17 00:00:00 2001 From: Kris Date: Thu, 9 Jul 2020 20:51:43 -0400 Subject: [PATCH] DEV: Remove text-ellipsis component and use CSS line-clamp instead (#10196) --- .../discourse/app/components/text-overflow.js | 27 ---------------- .../components/categories-boxes-topic.hbs | 2 +- .../templates/components/categories-boxes.hbs | 2 +- .../components/user-card-contents.hbs | 22 ++++++------- .../common/base/category-list.scss | 8 ++--- .../common/components/user-card.scss | 3 ++ .../components/text-overflow-test.js | 32 ------------------- 7 files changed, 20 insertions(+), 76 deletions(-) delete mode 100644 app/assets/javascripts/discourse/app/components/text-overflow.js delete mode 100644 test/javascripts/components/text-overflow-test.js diff --git a/app/assets/javascripts/discourse/app/components/text-overflow.js b/app/assets/javascripts/discourse/app/components/text-overflow.js deleted file mode 100644 index 201172f1ef..0000000000 --- a/app/assets/javascripts/discourse/app/components/text-overflow.js +++ /dev/null @@ -1,27 +0,0 @@ -import { next } from "@ember/runloop"; -import { htmlSafe } from "@ember/template"; -import Component from "@ember/component"; - -export default Component.extend({ - text: null, - - init() { - this._super(...arguments); - - this.set("text", htmlSafe(this.text)); - }, - - didInsertElement() { - this._super(...arguments); - - next(null, () => { - const $this = $(this.element); - - if ($this) { - $this.find("br").replaceWith(" "); - $this.find("hr").remove(); - $this.ellipsis(); - } - }); - } -}); diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-boxes-topic.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-boxes-topic.hbs index 63277909ec..988069494c 100644 --- a/app/assets/javascripts/discourse/app/templates/components/categories-boxes-topic.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/categories-boxes-topic.hbs @@ -1,5 +1,5 @@ {{d-icon topicStatusIcon}} - {{text-overflow class="overflow" text=topic.fancyTitle}} + {{html-safe topic.fancyTitle}} diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs index 1b224b7c58..4ab2dcddb0 100644 --- a/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs @@ -27,7 +27,7 @@ {{#unless c.isMuted}}
- {{text-overflow class="overflow" text=c.description_excerpt}} + {{html-safe c.description_excerpt}}
{{#if c.isGrandParent}} {{#each c.subcategories as |subcategory|}} diff --git a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs index 5b40fe9e97..68b1800d83 100644 --- a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs @@ -130,9 +130,9 @@
{{d-icon "ban"}} {{#if this.user.suspendedForever}} - {{i18n 'user.suspended_permanently'}} + {{i18n "user.suspended_permanently"}} {{else}} - {{i18n 'user.suspended_notice' date=this.user.suspendedTillDate}} + {{i18n "user.suspended_notice" date=this.user.suspendedTillDate}} {{/if}}
@@ -142,7 +142,7 @@
{{else}} {{#if this.user.bio_excerpt}} -
{{text-overflow class="overflow" text=this.user.bio_excerpt}}
+
{{html-safe this.user.bio_excerpt}}
{{/if}} {{/if}} @@ -165,7 +165,7 @@ {{d-icon "globe"}} {{#if this.linkWebsite}} {{!-- template-lint-disable --}} - {{this.user.website_name}} {{else}} {{this.user.website_name}} @@ -193,17 +193,17 @@ {{#unless this.user.profile_hidden}}
{{#if this.user.last_posted_at}} -

{{i18n 'last_post'}} +

{{i18n "last_post"}} {{format-date this.user.last_posted_at leaveAgo="true"}}

{{/if}} -

{{i18n 'joined'}} +

{{i18n "joined"}} {{format-date this.user.created_at leaveAgo="true"}}

{{#if this.user.time_read}}

- {{i18n 'time_read'}} + {{i18n "time_read"}} {{format-duration this.user.time_read}} {{#if this.showRecentTimeRead}} - ({{i18n 'time_read_recently' time_read=this.recentTimeRead}}) + ({{i18n "time_read_recently" time_read=this.recentTimeRead}}) {{/if}}

{{/if}} @@ -253,9 +253,9 @@ {{user-badge badge=ub.badge user=this.user}} {{/each}} {{#if this.showMoreBadges}} - - {{#link-to 'user.badges' this.user}} - {{i18n 'badges.more_badges' count=this.moreBadgesCount}} + + {{#link-to "user.badges" this.user}} + {{i18n "badges.more_badges" count=this.moreBadgesCount}} {{/link-to}} {{/if}} diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss index 782415c5dc..9387f2e148 100644 --- a/app/assets/stylesheets/common/base/category-list.scss +++ b/app/assets/stylesheets/common/base/category-list.scss @@ -120,11 +120,12 @@ } .description { - padding-bottom: 1em; + margin-bottom: 1em; text-align: center; font-size: $font-0; color: dark-light-choose($primary-medium, $secondary-high); position: relative; + @include line-clamp(4); // allow clicks to fall through the description text to the category below... pointer-events: none; @@ -263,9 +264,8 @@ padding: 4px 0; display: flex; align-items: baseline; - .overflow { - max-height: 3em; - overflow: hidden; + a { + @include line-clamp(2); } .d-icon { margin-right: 0.15em; diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss index 92ca3a5af0..cf6db6107e 100644 --- a/app/assets/stylesheets/common/components/user-card.scss +++ b/app/assets/stylesheets/common/components/user-card.scss @@ -57,6 +57,9 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards a.card-huge-avatar { outline: none; } + .bio { + @include line-clamp(2); + } } &.no-bg { .card-content { diff --git a/test/javascripts/components/text-overflow-test.js b/test/javascripts/components/text-overflow-test.js deleted file mode 100644 index 3741e54a2e..0000000000 --- a/test/javascripts/components/text-overflow-test.js +++ /dev/null @@ -1,32 +0,0 @@ -import componentTest from "helpers/component-test"; - -moduleForComponent("text-overflow", { integration: true }); - -componentTest("default", { - template: ` - - -
{{text-overflow class='overflow' text=text}}
`, - - beforeEach() { - this.set( - "text", - "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\nFusce convallis faucibus tortor quis vestibulum.
\nPhasellus pharetra dolor eget imperdiet tempor.
\nQuisque hendrerit magna id consectetur rutrum.
\nNulla vel tortor leo.
\nFusce ullamcorper lacus quis sodales ornare.
" - ); - }, - - test(assert) { - const text = find(".overflow") - .text() - .trim(); - - assert.ok(text.startsWith("Lorem ipsum dolor sit amet")); - assert.ok(text.endsWith("...")); - } -});