me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

applied blackle's fix for gallery offset with full-width media

Browse source
This commit is contained in:
Ondřej Hruška 2017-09-22 21:47:14 +02:00
parent 123d22f3b8
commit 1325ec8b1d
2 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/mastodon/features/status/components/detailed_status.js
View file

@ -53,6 +53,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
media={status.getIn(['media_attachments', 0])} media={status.getIn(['media_attachments', 0])}
letterbox={settings.getIn(['media', 'letterbox'])} letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])}
height={250} height={250}
onOpenVideo={this.props.onOpenVideo} onOpenVideo={this.props.onOpenVideo}
autoplay autoplay
@ -65,6 +66,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'])}
height={250} height={250}
onOpenMedia={this.props.onOpenMedia} onOpenMedia={this.props.onOpenMedia}
autoPlayGif={this.props.autoPlayGif} autoPlayGif={this.props.autoPlayGif}

30
app/javascript/styles/components.scss
View file

@ -1,6 +1,14 @@
@import 'variables'; @import 'variables';
@import 'variables-glitch'; @import 'variables-glitch';
@mixin fullwidth-gallery {
&.full-width {
margin-left: -22px;
margin-right: -22px;
width: inherit;
}
}
.app-body { .app-body {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
@ -2706,10 +2714,7 @@ button.icon-button.active i.fa-retweet {
margin-top: 15px; // Add margin when used bare for NSFW video player margin-top: 15px; // Add margin when used bare for NSFW video player
} }
&.full-width { @include fullwidth-gallery;
margin-left: -68px;
width: calc(100% + 80px);
}
} }
.media-spoiler__warning { .media-spoiler__warning {
@ -4135,15 +4140,12 @@ button.icon-button.active i.fa-retweet {
background: $base-shadow-color; background: $base-shadow-color;
width: 100%; width: 100%;
&.full-width {
margin-left: -68px;
width: calc(100% + 80px);
}
.detailed-status & { .detailed-status & {
margin-left:-10px; margin-left:-10px;
width: calc(100% + 22px); width: calc(100% + 22px);
} }
@include fullwidth-gallery;
} }
.media-gallery__item { .media-gallery__item {
@ -4214,10 +4216,7 @@ button.icon-button.active i.fa-retweet {
position: relative; position: relative;
width: 100%; width: 100%;
&.full-width { @include fullwidth-gallery;
margin-left: -68px;
width: calc(100% + 80px);
}
} }
.status__video-player-video { .status__video-player-video {
@ -4273,10 +4272,7 @@ button.icon-button.active i.fa-retweet {
position: relative; position: relative;
width: 100%; width: 100%;
&.full-width { @include fullwidth-gallery;
margin-left: -68px;
width: calc(100% + 80px);
}
border: 0; border: 0;
display: block; display: block;