specter/mastodon
1
0
Fork 0
forked from fedi/mastodon
Code Pull requests Activity

Responsive images in media gallery (#3963)

Browse source 
* feat(components/media_gallery): Responsive images

* fix(components/media_gallery): Link to image URL
This commit is contained in:
Sorin Davidoi 2017-06-27 13:46:37 +02:00 committed by Eugen Rochko
parent e2dd576a1b
commit be92babd00
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 = '';
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 = (
<a // eslint-disable-line jsx-a11y/anchor-has-content
<a
className='media-gallery__item-thumbnail'
href={attachment.get('remote_url') || attachment.get('url')}
href={attachment.get('remote_url') || originalUrl}
onClick={this.handleClick}
target='_blank'
style={{ backgroundImage: `url(${attachment.get('preview_url')})` }}
/>
>
<img src={previewUrl} srcSet={srcSet} sizes={sizes} alt='' />
</a>
);
} else if (attachment.get('type') === 'gifv') {
const autoPlay = !isIOS() && this.props.autoPlayGif;

9
app/javascript/styles/components.scss
View file

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