treehouse
/
mastodon
19
8
Fork 5
Code Issues 32 Pull Requests Projects 1 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
lolsob-rspec
Ondřej Hruška 2017-07-09 09:07:14 +02:00 committed by GitHub
parent 319e8e3041
commit 0b15430dbe
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 (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>

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

@ -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);
}
}