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

Responsive images in media gallery (#3963) 

* feat(components/media_gallery): Responsive images

* fix(components/media_gallery): Link to image URL
lolsob-rspec
Sorin Davidoi 2017-06-27 13:46:37 +02:00 committed by Eugen Rochko
parent 57a3bc1b4f
commit d6006ecb4b
2 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/mastodon/components/media_gallery.js
View File

@ -85,14 +85,24 @@ class Item extends React.PureComponent {
let thumbnail = ''; let thumbnail = '';
if (attachment.get('type') === 'image') { if (attachment.get('type') === 'image') {
const previewUrl = attachment.get('preview_url');
const previewWidth = attachment.getIn(['meta', 'small', 'width']);
const originalUrl = attachment.get('url');
const originalWidth = attachment.getIn(['meta', 'original', 'width']);
const srcSet = `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w`;
const sizes = `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw`;
thumbnail = ( thumbnail = (
<a // eslint-disable-line jsx-a11y/anchor-has-content <a
className='media-gallery__item-thumbnail' className='media-gallery__item-thumbnail'
href={attachment.get('remote_url') || attachment.get('url')} href={attachment.get('remote_url') || originalUrl}
onClick={this.handleClick} onClick={this.handleClick}
target='_blank' target='_blank'
style={{ backgroundImage: `url(${attachment.get('preview_url')})` }} >
/> <img src={previewUrl} srcSet={srcSet} sizes={sizes} alt='' />
</a>
); );
} else if (attachment.get('type') === 'gifv') { } else if (attachment.get('type') === 'gifv') {
const autoPlay = !isIOS() && this.props.autoPlayGif; const autoPlay = !isIOS() && this.props.autoPlayGif;

11
app/javascript/styles/components.scss
View File

@ -3453,10 +3453,15 @@ button.icon-button.active i.fa-retweet {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
cursor: zoom-in; cursor: zoom-in;
display: block; display: flex;
height: 100%; align-items: center;
text-decoration: none; text-decoration: none;
width: 100%; height: 100%;
&,
img {
width: 100%;
}
} }
.media-gallery__gifv { .media-gallery__gifv {