From be92babd008a7356738dec1aa7f36500638d00e5 Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Tue, 27 Jun 2017 13:46:37 +0200 Subject: [PATCH] Responsive images in media gallery (#3963) * feat(components/media_gallery): Responsive images * fix(components/media_gallery): Link to image URL --- .../mastodon/components/media_gallery.js | 18 ++++++++++++++---- 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 78ff351308c..2cb1ce51c80 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 = ( - + > + + ); } 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 91ebd91fd19..84732ed4a9b 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 {