monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix fullwidth media CSS bugs with NSFW video, and bad spoiler margin on static pages (#60) 

* Fix fullwidth style not applied to NSFW video correctly

* Fix botched video .media-spoiler margin on static pages
This commit is contained in:
Ondřej Hruška 2017-07-09 09:07:14 +02:00 committed by GitHub
parent dc2b8bdecd
commit 2fb78fefc6
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/components/video_player.js
View File

@ -138,7 +138,7 @@ export default class VideoPlayer extends React.PureComponent {
if (!this.state.visible) { if (!this.state.visible) {
if (sensitive) { if (sensitive) {
return ( return (
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}> <div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
{spoilerButton} {spoilerButton}
<span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span> <span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
@ -146,7 +146,7 @@ export default class VideoPlayer extends React.PureComponent {
); );
} else { } else {
return ( return (
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}> <div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
{spoilerButton} {spoilerButton}
<span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span> <span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>

8
app/javascript/styles/components.scss
View File

@ -2319,9 +2319,13 @@ button.icon-button.active i.fa-retweet {
text-align: center; text-align: center;
z-index: 100; z-index: 100;
.status__content > & {
margin-top: 15px; // Add margin when used bare for NSFW video player margin-top: 15px; // Add margin when used bare for NSFW video player
.media-gallery & { }
margin-top: 0;
&.full-width {
margin-left: -68px;
width: calc(100% + 80px);
} }
} }