fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-16 23:22:01 +00:00
Code Issues Packages Projects Releases 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 c2b479efec
commit 31dd261375
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')}
media={status.getIn(['media_attachments', 0])}
letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])}
height={250}
onOpenVideo={this.props.onOpenVideo}
autoplay
@ -65,6 +66,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'])}
height={250}
onOpenMedia={this.props.onOpenMedia}
autoPlayGif={this.props.autoPlayGif}

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

@ -1,6 +1,14 @@
@import 'variables';
@import 'variables-glitch';
@mixin fullwidth-gallery {
&.full-width {
margin-left: -22px;
margin-right: -22px;
width: inherit;
}
}
.app-body {
-webkit-overflow-scrolling: touch;
-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
}
&.full-width {
margin-left: -68px;
width: calc(100% + 80px);
}
@include fullwidth-gallery;
}
.media-spoiler__warning {
@ -4135,15 +4140,12 @@ button.icon-button.active i.fa-retweet {
background: $base-shadow-color;
width: 100%;
&.full-width {
margin-left: -68px;
width: calc(100% + 80px);
}
.detailed-status & {
margin-left:-10px;
width: calc(100% + 22px);
}
@include fullwidth-gallery;
}
.media-gallery__item {
@ -4214,10 +4216,7 @@ button.icon-button.active i.fa-retweet {
position: relative;
width: 100%;
&.full-width {
margin-left: -68px;
width: calc(100% + 80px);
}
@include fullwidth-gallery;
}
.status__video-player-video {
@ -4273,10 +4272,7 @@ button.icon-button.active i.fa-retweet {
position: relative;
width: 100%;
&.full-width {
margin-left: -68px;
width: calc(100% + 80px);
}
@include fullwidth-gallery;
border: 0;
display: block;