diff options
| author | Ondřej Hruška <ondra@ondrovo.com> | 2017-07-09 09:07:14 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-07-09 09:07:14 +0200 |
| commit | 2fb78fefc6a7d0715b6c4c6e7915aaf53f0a51dc (patch) | |
| tree | 11d06cc57bcda86de8d4dfccf9733c293b66855b /app/javascript | |
| parent | dc2b8bdecd4cc84b64ac069406a8d6554e4f8cd4 (diff) | |
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
Diffstat (limited to 'app/javascript')
| -rw-r--r-- | app/javascript/mastodon/components/video_player.js | 4 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 10 |
2 files changed, 9 insertions, 5 deletions
diff --git a/app/javascript/mastodon/components/video_player.js b/app/javascript/mastodon/components/video_player.js index 7722f8296..5e43ee7e6 100644 --- a/app/javascript/mastodon/components/video_player.js +++ b/app/javascript/mastodon/components/video_player.js @@ -138,7 +138,7 @@ export default class VideoPlayer extends React.PureComponent { if (!this.state.visible) { if (sensitive) { 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} <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> @@ -146,7 +146,7 @@ export default class VideoPlayer extends React.PureComponent { ); } else { 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} <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> diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 6b766bf14..c26a243c1 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -2319,9 +2319,13 @@ button.icon-button.active i.fa-retweet { text-align: center; z-index: 100; - margin-top: 15px; // Add margin when used bare for NSFW video player - .media-gallery & { - margin-top: 0; + .status__content > & { + margin-top: 15px; // Add margin when used bare for NSFW video player + } + + &.full-width { + margin-left: -68px; + width: calc(100% + 80px); } } |