From 2fb78fefc6a7d0715b6c4c6e7915aaf53f0a51dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Sun, 9 Jul 2017 09:07:14 +0200
Subject: [PATCH] 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
---
 app/javascript/mastodon/components/video_player.js |  4 ++--
 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);
   }
 }