mastofe

commit: be92babd008a7356738dec1aa7f36500638d00e5
parent: e2dd576a1b20c324c88afadaaa4f23e554b73ec7
Author: Sorin Davidoi <sorin.davidoi@gmail.com>
Date:   Tue, 27 Jun 2017 13:46:37 +0200

Responsive images in media gallery (#3963)

* feat(components/media_gallery): Responsive images

* fix(components/media_gallery): Link to image URL

Diffstat:
M
app/javascript/mastodon/components/media_gallery.js
18
++++++++++++++----
M
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
@@ -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
@@ -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 {