diff options
4 files changed, 20 insertions, 11 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}> diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index ee9eb02c6..2e61e6d8c 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -77,6 +77,7 @@ export default class DetailedStatus extends ImmutablePureComponent { sensitive={status.get('sensitive')} media={status.get('media_attachments')} letterbox={settings.getIn(['media', 'letterbox'])} + fullwidth={settings.getIn(['media', 'fullwidth'])} onOpenMedia={this.props.onOpenMedia} /> ); diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss index 102723e39..3ccecb874 100644 --- a/app/javascript/flavours/glitch/styles/_mixins.scss +++ b/app/javascript/flavours/glitch/styles/_mixins.scss @@ -48,5 +48,6 @@ width: inherit; max-width: none; height: 250px; + border-radius: 0px; } } diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 5a49c07fa..ef7525941 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -78,17 +78,11 @@ box-sizing: border-box; margin-top: 8px; overflow: hidden; + border-radius: 4px; position: relative; - background: $base-shadow-color; width: 100%; height: 110px; - .detailed-status & { - margin-left: -14px; - width: calc(100% + 28px); - height: 250px; - } - @include fullwidth-gallery; } @@ -98,6 +92,12 @@ display: block; float: left; position: relative; + border-radius: 4px; + overflow: hidden; + + .full-width & { + border-radius: 0; + } &.standalone { .media-gallery__item-gifv-thumbnail { @@ -105,13 +105,17 @@ top: 0; } } + + &.letterbox { + background: $base-shadow-color; + } } .media-gallery__item-thumbnail { cursor: zoom-in; display: block; text-decoration: none; - height: 100%; + color: $secondary-text-color; line-height: 0; &, |