diff options
| author | Thibaut Girka <thib@sitedethib.com> | 2018-09-03 20:46:00 +0200 |
|---|---|---|
| committer | ThibG <thib@sitedethib.com> | 2018-09-04 13:31:55 +0200 |
| commit | be644e3b7cd441650d2657914917df08104e3b46 (patch) | |
| tree | 845daf9d0a8d3e7c1b6da41835941319f1d587fe /app/javascript/flavours/glitch/components | |
| parent | 8183d2ed556c37245066789d8d6bb3c6966da670 (diff) | |
Media gallery styling closer to upstream's
Diffstat (limited to 'app/javascript/flavours/glitch/components')
| -rw-r--r-- | app/javascript/flavours/glitch/components/media_gallery.js | 9 |
1 files changed, 6 insertions, 3 deletions
diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index a68d983b8..fa27757f3 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -163,7 +163,8 @@ class Item extends React.PureComponent { sizes={sizes} alt={attachment.get('description')} title={attachment.get('description')} - style={{ objectPosition: `${x}% ${y}%` }} /> + style={{ objectPosition: `${x}% ${y}%` }} + /> </a> ); } else if (attachment.get('type') === 'gifv') { @@ -191,7 +192,7 @@ class Item extends React.PureComponent { } return ( - <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}> + <div className={classNames('media-gallery__item', { standalone, letterbox })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}> {thumbnail} </div> ); @@ -261,6 +262,8 @@ export default class MediaGallery extends React.PureComponent { if (this.isStandaloneEligible() && width) { style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); + } else if (width) { + style.height = width / (16/9); } if (!visible) { @@ -280,7 +283,7 @@ export default class MediaGallery extends React.PureComponent { } } - const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth }); + const computedClass = classNames('media-gallery', { 'full-width': fullwidth }); return ( <div className={computedClass} style={style} ref={this.handleRef}> |