[Glitch] Use CSS to trim long card descriptions

Port e713c545b8 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/59/head^2
Christian Schmidt 2023-04-23 22:32:47 +02:00 committed by Claire
parent 11b34a903a
commit 0091b28ffe
2 changed files with 6 additions and 14 deletions

View File

@ -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 = (
<div className='status-card__content' lang={language}>
{title}
{!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
{!(horizontal || compact) && <p className='status-card__description' title={card.get('description')}>{card.get('description')}</p>}
<span className='status-card__host'>{provider}</span>
</div>
);

View File

@ -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 {