From e713c545b89ec86742161775b834c7f56d4377c2 Mon Sep 17 00:00:00 2001 From: Christian Schmidt Date: Sun, 23 Apr 2023 22:32:47 +0200 Subject: [PATCH] Use CSS to trim long card descriptions (#24265) --- app/helpers/statuses_helper.rb | 1 - .../mastodon/features/status/components/card.jsx | 16 ++-------------- app/javascript/styles/mastodon/components.scss | 4 ++++ 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/app/helpers/statuses_helper.rb b/app/helpers/statuses_helper.rb index d1e3fddaf..e670571d2 100644 --- a/app/helpers/statuses_helper.rb +++ b/app/helpers/statuses_helper.rb @@ -175,7 +175,6 @@ module StatusesHelper def render_card_component(status, **options) component_params = { sensitive: sensitized?(status, current_account), - maxDescription: 160, card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json, }.merge(**options) diff --git a/app/javascript/mastodon/features/status/components/card.jsx b/app/javascript/mastodon/features/status/components/card.jsx index b588c83e4..b67f671c5 100644 --- a/app/javascript/mastodon/features/status/components/card.jsx +++ b/app/javascript/mastodon/features/status/components/card.jsx @@ -25,16 +25,6 @@ const getHostname = url => { return parser.hostname; }; -const trim = (text, len) => { - const cut = text.indexOf(' ', len); - - if (cut === -1) { - return text; - } - - return text.slice(0, cut) + (text.length > len ? '…' : ''); -}; - const domParser = new DOMParser(); const addAutoPlay = html => { @@ -62,7 +52,6 @@ export default class Card extends React.PureComponent { static propTypes = { card: ImmutablePropTypes.map, - maxDescription: PropTypes.number, onOpenMedia: PropTypes.func.isRequired, compact: PropTypes.bool, defaultWidth: PropTypes.number, @@ -71,7 +60,6 @@ export default class Card extends React.PureComponent { }; static defaultProps = { - maxDescription: 50, compact: false, }; @@ -184,7 +172,7 @@ export default class Card extends React.PureComponent { } render () { - const { card, maxDescription, compact } = this.props; + const { card, compact } = this.props; const { width, embedded, revealed } = this.state; if (card === null) { @@ -203,7 +191,7 @@ export default class Card extends React.PureComponent { const description = (
{title} - {!(horizontal || compact) &&

{trim(card.get('description') || '', maxDescription)}

} + {!(horizontal || compact) &&

{card.get('description')}

} {provider}
); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index bd7c61e40..a0863004d 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3735,6 +3735,10 @@ a.status-card { .status-card__description { color: $darker-text-color; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; } .status-card__host {