diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js
index a68d983b86..fa27757f39 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 ee9eb02c6e..2e61e6d8c5 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 102723e39c..3ccecb8744 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 5a49c07fa8..ef75259414 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;
&,