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 201172f1efe..00000000000 --- 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 63277909ec0..988069494c2 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 1b224b7c584..4ab2dcddb0a 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 5b40fe9e975..68b1800d834 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 782415c5dcb..9387f2e1488 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 92ca3a5af08..cf6db6107e7 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 3741e54a2e4..00000000000 --- 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("...")); - } -});