From 1d2b0d2121550bf973e8a334cfa29c6d8749c52c Mon Sep 17 00:00:00 2001 From: ThibG Date: Thu, 25 Jun 2020 22:42:01 +0200 Subject: [PATCH] Fix design issues with sensitive preview cards (#14126) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix design issues with sensitive preview cards * Center “sensitive” label on preview image for interactive cards * Add “button” role to sensitive preview card text --- .../mastodon/features/status/components/card.js | 9 +++++---- app/javascript/styles/mastodon/components.scss | 1 + 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/app/javascript/mastodon/features/status/components/card.js b/app/javascript/mastodon/features/status/components/card.js index 4442ab4951..e35b1fd5fd 100644 --- a/app/javascript/mastodon/features/status/components/card.js +++ b/app/javascript/mastodon/features/status/components/card.js @@ -191,7 +191,9 @@ export default class Card extends React.PureComponent { this.setState({ previewLoaded: true }); } - handleReveal = () => { + handleReveal = e => { + e.preventDefault(); + e.stopPropagation(); this.setState({ revealed: true }); } @@ -279,7 +281,7 @@ export default class Card extends React.PureComponent { } return ( -
+
{embed} {!compact && description}
@@ -289,14 +291,12 @@ export default class Card extends React.PureComponent {
{canvas} {thumbnail} - {!revealed && spoilerButton}
); } else { embed = (
- {!revealed && spoilerButton}
); } @@ -305,6 +305,7 @@ export default class Card extends React.PureComponent { {embed} {description} + {!revealed && spoilerButton} ); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index fb9dca41b4..2ff9073db1 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3003,6 +3003,7 @@ a.account__display-name { } .status-card { + position: relative; display: flex; font-size: 14px; border: 1px solid lighten($ui-base-color, 8%);