From 3ad3cee44cce2fe080636999b1b640c9558e5f53 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 21 May 2018 17:55:07 +0200 Subject: [Glitch] Use real container width in MediaGallery srcSet Port 22e067bf5c30a5aa7aec4b3c17dc112cacbe7873 to glitch-soc --- app/javascript/flavours/glitch/components/media_gallery.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 7f5150f7b..5d9c4cbca 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -40,6 +40,7 @@ class Item extends React.PureComponent { size: PropTypes.number.isRequired, letterbox: PropTypes.bool, onClick: PropTypes.func.isRequired, + displayWidth: PropTypes.number, }; static defaultProps = { @@ -78,7 +79,7 @@ class Item extends React.PureComponent { } render () { - const { attachment, index, size, standalone, letterbox } = this.props; + const { attachment, index, size, standalone, letterbox, displayWidth } = this.props; let width = 50; let height = 100; @@ -141,7 +142,7 @@ class Item extends React.PureComponent { const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number'; const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null; - const sizes = hasSize ? `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw` : null; + const sizes = hasSize ? `${displayWidth * (width / 100)}px` : null; const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0; const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0; @@ -272,9 +273,9 @@ export default class MediaGallery extends React.PureComponent { ); } else { if (this.isStandaloneEligible()) { - children = ; + children = ; } else { - children = media.take(4).map((attachment, i) => ); + children = media.take(4).map((attachment, i) => ); } } -- cgit