me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Ensure link thumbnails are not stretched to super low quality (#5932)

Browse source
This commit is contained in:
Eugen Rochko 2017-12-09 00:56:16 +01:00 committed by GitHub
parent 70ce2a2095
commit c36b9cc5a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/javascript/mastodon/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>

7
app/javascript/styles/mastodon/components.scss
View file

@ -2273,14 +2273,19 @@ button.icon-button.active i.fa-retweet {
.status-card__image-image { .status-card__image-image {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
.status-card__title {
white-space: inherit;
}
} }
.status-card__image-image { .status-card__image-image {
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
display: block; display: block;
height: auto;
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%;
object-fit: cover;
} }
.load-more { .load-more {

2
app/models/preview_card.rb
View file

@ -33,7 +33,7 @@ class PreviewCard < ApplicationRecord
has_and_belongs_to_many :statuses has_and_belongs_to_many :statuses
has_attached_file :image, styles: { original: '280x280>' }, convert_options: { all: '-quality 80 -strip' } has_attached_file :image, styles: { original: '400x400>' }, convert_options: { all: '-quality 80 -strip' }
include Attachmentable include Attachmentable
include Remotable include Remotable