Use CSS to trim long card descriptions (#24265)

This commit is contained in:
Christian Schmidt 2023-04-23 22:32:47 +02:00 committed by GitHub
parent 4687967176
commit e713c545b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 15 deletions

View File

@ -175,7 +175,6 @@ module StatusesHelper
def render_card_component(status, **options) def render_card_component(status, **options)
component_params = { component_params = {
sensitive: sensitized?(status, current_account), sensitive: sensitized?(status, current_account),
maxDescription: 160,
card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json, card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json,
}.merge(**options) }.merge(**options)

View File

@ -25,16 +25,6 @@ const getHostname = url => {
return parser.hostname; 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 domParser = new DOMParser();
const addAutoPlay = html => { const addAutoPlay = html => {
@ -62,7 +52,6 @@ export default class Card extends React.PureComponent {
static propTypes = { static propTypes = {
card: ImmutablePropTypes.map, card: ImmutablePropTypes.map,
maxDescription: PropTypes.number,
onOpenMedia: PropTypes.func.isRequired, onOpenMedia: PropTypes.func.isRequired,
compact: PropTypes.bool, compact: PropTypes.bool,
defaultWidth: PropTypes.number, defaultWidth: PropTypes.number,
@ -71,7 +60,6 @@ export default class Card extends React.PureComponent {
}; };
static defaultProps = { static defaultProps = {
maxDescription: 50,
compact: false, compact: false,
}; };
@ -184,7 +172,7 @@ export default class Card extends React.PureComponent {
} }
render () { render () {
const { card, maxDescription, compact } = this.props; const { card, compact } = this.props;
const { width, embedded, revealed } = this.state; const { width, embedded, revealed } = this.state;
if (card === null) { if (card === null) {
@ -203,7 +191,7 @@ export default class Card extends React.PureComponent {
const description = ( const description = (
<div className='status-card__content' lang={language}> <div className='status-card__content' lang={language}>
{title} {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> <span className='status-card__host'>{provider}</span>
</div> </div>
); );

View File

@ -3735,6 +3735,10 @@ a.status-card {
.status-card__description { .status-card__description {
color: $darker-text-color; color: $darker-text-color;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
} }
.status-card__host { .status-card__host {