DEV: Remove text-ellipsis component and use CSS line-clamp instead (#10196)
This commit is contained in:
Kris
GitHub
parent
831f3cab56
commit
706f1a6294
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{{d-icon topicStatusIcon}}
|
||||
|
||||
<a href={{topic.lastUnreadUrl}} class="title">
|
||||
{{text-overflow class="overflow" text=topic.fancyTitle}}
|
||||
{{html-safe topic.fancyTitle}}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
{{#unless c.isMuted}}
|
||||
<div class="description">
|
||||
{{text-overflow class="overflow" text=c.description_excerpt}}
|
||||
{{html-safe c.description_excerpt}}
|
||||
</div>
|
||||
{{#if c.isGrandParent}}
|
||||
{{#each c.subcategories as |subcategory|}}
|
||||
|
|
|
|||
|
|
@ -130,9 +130,9 @@
|
|||
<div class="suspension-date">
|
||||
{{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}}
|
||||
</div>
|
||||
<div class="suspension-reason">
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
</div>
|
||||
{{else}}
|
||||
{{#if this.user.bio_excerpt}}
|
||||
<div class="bio">{{text-overflow class="overflow" text=this.user.bio_excerpt}}</div>
|
||||
<div class="bio">{{html-safe this.user.bio_excerpt}}</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
{{d-icon "globe"}}
|
||||
{{#if this.linkWebsite}}
|
||||
{{!-- template-lint-disable --}}
|
||||
<a href="{{this.user.website}}" rel="noopener {{unless this.removeNoFollow 'nofollow ugc'}}"
|
||||
<a href="{{this.user.website}}" rel="noopener {{unless this.removeNoFollow "nofollow ugc"}}"
|
||||
target="_blank">{{this.user.website_name}}</a>
|
||||
{{else}}
|
||||
<span title={{this.user.website}}>{{this.user.website_name}}</span>
|
||||
|
|
@ -193,17 +193,17 @@
|
|||
{{#unless this.user.profile_hidden}}
|
||||
<div class="metadata">
|
||||
{{#if this.user.last_posted_at}}
|
||||
<h3><span class='desc'>{{i18n 'last_post'}}</span>
|
||||
<h3><span class="desc">{{i18n "last_post"}}</span>
|
||||
{{format-date this.user.last_posted_at leaveAgo="true"}}</h3>
|
||||
{{/if}}
|
||||
<h3><span class='desc'>{{i18n 'joined'}}</span>
|
||||
<h3><span class="desc">{{i18n "joined"}}</span>
|
||||
{{format-date this.user.created_at leaveAgo="true"}}</h3>
|
||||
{{#if this.user.time_read}}
|
||||
<h3 title="{{this.timeReadTooltip}}">
|
||||
<span class='desc'>{{i18n 'time_read'}}</span>
|
||||
<span class="desc">{{i18n "time_read"}}</span>
|
||||
{{format-duration this.user.time_read}}
|
||||
{{#if this.showRecentTimeRead}}
|
||||
<span>({{i18n 'time_read_recently' time_read=this.recentTimeRead}})</span>
|
||||
<span>({{i18n "time_read_recently" time_read=this.recentTimeRead}})</span>
|
||||
{{/if}}
|
||||
</h3>
|
||||
{{/if}}
|
||||
|
|
@ -253,9 +253,9 @@
|
|||
{{user-badge badge=ub.badge user=this.user}}
|
||||
{{/each}}
|
||||
{{#if this.showMoreBadges}}
|
||||
<span class='more-user-badges'>
|
||||
{{#link-to 'user.badges' this.user}}
|
||||
{{i18n 'badges.more_badges' count=this.moreBadgesCount}}
|
||||
<span class="more-user-badges">
|
||||
{{#link-to "user.badges" this.user}}
|
||||
{{i18n "badges.more_badges" count=this.moreBadgesCount}}
|
||||
{{/link-to}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
import componentTest from "helpers/component-test";
|
||||
|
||||
moduleForComponent("text-overflow", { integration: true });
|
||||
|
||||
componentTest("default", {
|
||||
template: `
|
||||
<style>
|
||||
.overflow {
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>{{text-overflow class='overflow' text=text}}</div>`,
|
||||
|
||||
beforeEach() {
|
||||
this.set(
|
||||
"text",
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\nFusce convallis faucibus tortor quis vestibulum.<br>\nPhasellus pharetra dolor eget imperdiet tempor.<br>\nQuisque hendrerit magna id consectetur rutrum.<br>\nNulla vel tortor leo.<br>\nFusce ullamcorper lacus quis sodales ornare.<br>"
|
||||
);
|
||||
},
|
||||
|
||||
test(assert) {
|
||||
const text = find(".overflow")
|
||||
.text()
|
||||
.trim();
|
||||
|
||||
assert.ok(text.startsWith("Lorem ipsum dolor sit amet"));
|
||||
assert.ok(text.endsWith("..."));
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue