diff options
| author | Sorin Davidoi <sorin.davidoi@gmail.com> | 2017-06-27 13:46:37 +0200 |
|---|---|---|
| committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-06-27 13:46:37 +0200 |
| commit | be92babd008a7356738dec1aa7f36500638d00e5 (patch) | |
| tree | ecab90f8c20da07534300c96407d418967deb3b1 /app/javascript | |
| parent | e2dd576a1b20c324c88afadaaa4f23e554b73ec7 (diff) | |
Responsive images in media gallery (#3963)
* feat(components/media_gallery): Responsive images * fix(components/media_gallery): Link to image URL
Diffstat (limited to 'app/javascript')
| -rw-r--r-- | app/javascript/mastodon/components/media_gallery.js | 18 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 11 |
2 files changed, 22 insertions, 7 deletions
diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index 78ff35130..2cb1ce51c 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -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; diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 91ebd91fd..84732ed4a 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -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; - width: 100%; + height: 100%; + + &, + img { + width: 100%; + } } .media-gallery__gifv { |