From be644e3b7cd441650d2657914917df08104e3b46 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 3 Sep 2018 20:46:00 +0200 Subject: Media gallery styling closer to upstream's --- .../flavours/glitch/components/media_gallery.js | 9 ++++++--- .../features/status/components/detailed_status.js | 1 + app/javascript/flavours/glitch/styles/_mixins.scss | 1 + .../flavours/glitch/styles/components/media.scss | 20 ++++++++++++-------- 4 files changed, 20 insertions(+), 11 deletions(-) (limited to 'app/javascript') 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}%` }} + /> ); } else if (attachment.get('type') === 'gifv') { @@ -191,7 +192,7 @@ class Item extends React.PureComponent { } return ( -
+
{thumbnail}
); @@ -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 (
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; &, -- cgit