treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Media gallery styling closer to upstream's

lolsob-rspec
Thibaut Girka 2018-09-03 20:46:00 +02:00 committed by ThibG
parent d83eb4f9c7
commit 4567e42341
4 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/flavours/glitch/components/media_gallery.js
View File

@ -163,7 +163,8 @@ class Item extends React.PureComponent {
sizes={sizes} sizes={sizes}
alt={attachment.get('description')} alt={attachment.get('description')}
title={attachment.get('description')} title={attachment.get('description')}
style={{ objectPosition: `${x}% ${y}%` }} /> style={{ objectPosition: `${x}% ${y}%` }}
/>
</a> </a>
); );
} else if (attachment.get('type') === 'gifv') { } else if (attachment.get('type') === 'gifv') {
@ -191,7 +192,7 @@ class Item extends React.PureComponent {
} }
return ( 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} {thumbnail}
</div> </div>
); );
@ -261,6 +262,8 @@ export default class MediaGallery extends React.PureComponent {
if (this.isStandaloneEligible() && width) { if (this.isStandaloneEligible() && width) {
style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
} else if (width) {
style.height = width / (16/9);
} }
if (!visible) { 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 ( return (
<div className={computedClass} style={style} ref={this.handleRef}> <div className={computedClass} style={style} ref={this.handleRef}>

1
app/javascript/flavours/glitch/features/status/components/detailed_status.js
View File

@ -77,6 +77,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
media={status.get('media_attachments')} media={status.get('media_attachments')}
letterbox={settings.getIn(['media', 'letterbox'])} letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])}
onOpenMedia={this.props.onOpenMedia} onOpenMedia={this.props.onOpenMedia}
/> />
); );

1
app/javascript/flavours/glitch/styles/_mixins.scss
View File

@ -48,5 +48,6 @@
width: inherit; width: inherit;
max-width: none; max-width: none;
height: 250px; height: 250px;
border-radius: 0px;
} }
} }

20
app/javascript/flavours/glitch/styles/components/media.scss
View File

@ -78,17 +78,11 @@
box-sizing: border-box; box-sizing: border-box;
margin-top: 8px; margin-top: 8px;
overflow: hidden; overflow: hidden;
border-radius: 4px;
position: relative; position: relative;
background: $base-shadow-color;
width: 100%; width: 100%;
height: 110px; height: 110px;
.detailed-status & {
margin-left: -14px;
width: calc(100% + 28px);
height: 250px;
}
@include fullwidth-gallery; @include fullwidth-gallery;
} }
@ -98,6 +92,12 @@
display: block; display: block;
float: left; float: left;
position: relative; position: relative;
border-radius: 4px;
overflow: hidden;
.full-width & {
border-radius: 0;
}
&.standalone { &.standalone {
.media-gallery__item-gifv-thumbnail { .media-gallery__item-gifv-thumbnail {
@ -105,13 +105,17 @@
top: 0; top: 0;
} }
} }
&.letterbox {
background: $base-shadow-color;
}
} }
.media-gallery__item-thumbnail { .media-gallery__item-thumbnail {
cursor: zoom-in; cursor: zoom-in;
display: block; display: block;
text-decoration: none; text-decoration: none;
height: 100%; color: $secondary-text-color;
line-height: 0; line-height: 0;
&, &,