treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Ensure link thumbnails are not stretched to super low quality 

Port front-end changes from 46cce9ee4b to glitch-soc
lolsob-rspec
Thibaut Girka 2018-09-10 17:51:00 +02:00 committed by ThibG
parent 9b7139099f
commit c48345969f
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/flavours/glitch/features/status/components/card.js
View File

@ -59,6 +59,8 @@ export default class Card extends React.PureComponent {
renderLink () { renderLink () {
const { card, maxDescription } = this.props; const { card, maxDescription } = this.props;
const { width } = this.state;
const horizontal = card.get('width') > card.get('height') && (card.get('width') + 100 >= width);
let image = ''; let image = '';
let provider = card.get('provider_name'); let provider = card.get('provider_name');
@ -75,17 +77,15 @@ export default class Card extends React.PureComponent {
provider = decodeIDNA(getHostname(card.get('url'))); provider = decodeIDNA(getHostname(card.get('url')));
} }
const className = classnames('status-card', { const className = classnames('status-card', { horizontal });
'horizontal': card.get('width') > card.get('height'),
});
return ( return (
<a href={card.get('url')} className={className} target='_blank' rel='noopener'> <a href={card.get('url')} className={className} target='_blank' rel='noopener' ref={this.setRef}>
{image} {image}
<div className='status-card__content'> <div className='status-card__content'>
<strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong> <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>
<p className='status-card__description'>{(card.get('description') || '').substring(0, maxDescription)}</p> {!horizontal && <p className='status-card__description'>{(card.get('description') || '').substring(0, maxDescription)}</p>}
<span className='status-card__host'>{provider}</span> <span className='status-card__host'>{provider}</span>
</div> </div>
</a> </a>