about summary refs log tree commit diff
diff options
context:
space:
mode:
authorPFM <info@eyesight.jp>2017-09-06 20:55:47 +0900
committerEugen Rochko <eugen@zeonfederated.com>2017-09-06 13:55:47 +0200
commitd8d2a5474148c38ddc5754fc5d7cbf8083bab3bf (patch)
tree0ae86d328b6ed56df238525b23d8c7cfedbcb57f
parentfa21d004c7d8ea1c76d1106700f4e18a703e39fd (diff)
fix text position of NSFW for video file (#4819)
-rw-r--r--app/javascript/mastodon/components/video_player.js4
-rw-r--r--app/javascript/styles/components.scss16
2 files changed, 18 insertions, 2 deletions
diff --git a/app/javascript/mastodon/components/video_player.js b/app/javascript/mastodon/components/video_player.js
index 999cf42d9..2c834fb66 100644
--- a/app/javascript/mastodon/components/video_player.js
+++ b/app/javascript/mastodon/components/video_player.js
@@ -146,7 +146,7 @@ export default class VideoPlayer extends React.PureComponent {
     if (!this.state.visible) {
       if (sensitive) {
         return (
-          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler' onClick={this.handleVisibility}>
+          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler__video' 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>
@@ -154,7 +154,7 @@ export default class VideoPlayer extends React.PureComponent {
         );
       } else {
         return (
-          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler' onClick={this.handleVisibility}>
+          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler__video' 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 1b9763e90..bd7d0c3d4 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -2343,6 +2343,22 @@ button.icon-button.active i.fa-retweet {
   height: 100%;
 }
 
+.media-spoiler__video {
+  align-items: center;
+  background: $base-overlay-background;
+  color: $primary-text-color;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  position: relative;
+  text-align: center;
+  z-index: 100;
+}
+
 .media-spoiler__warning {
   display: block;
   font-size: 14px;