From 0091b28ffea9baa7f5b95f294b4b1221b8bbf018 Mon Sep 17 00:00:00 2001 From: Christian Schmidt Date: Sun, 23 Apr 2023 22:32:47 +0200 Subject: [PATCH] [Glitch] Use CSS to trim long card descriptions Port e713c545b89ec86742161775b834c7f56d4377c2 to glitch-soc Signed-off-by: Claire --- .../glitch/features/status/components/card.jsx | 16 ++-------------- .../glitch/styles/components/status.scss | 4 ++++ 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/app/javascript/flavours/glitch/features/status/components/card.jsx b/app/javascript/flavours/glitch/features/status/components/card.jsx index 359dbbc207..7e834b2dc1 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.jsx +++ b/app/javascript/flavours/glitch/features/status/components/card.jsx @@ -17,16 +17,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 => { @@ -54,7 +44,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, @@ -63,7 +52,6 @@ export default class Card extends React.PureComponent { }; static defaultProps = { - maxDescription: 50, compact: false, }; @@ -176,7 +164,7 @@ export default class Card extends React.PureComponent { } render () { - const { card, maxDescription, compact, defaultWidth } = this.props; + const { card, compact, defaultWidth } = this.props; const { width, embedded, revealed } = this.state; if (card === null) { @@ -195,7 +183,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/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index a1f3a2dacc..eb74e10825 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -833,6 +833,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 {