about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
authorThibG <thib@sitedethib.com>2020-06-25 22:42:01 +0200
committerGitHub <noreply@github.com>2020-06-25 22:42:01 +0200
commit1d2b0d2121550bf973e8a334cfa29c6d8749c52c (patch)
treecf746b157d988589ad7a5e904c18a5e90bc0ad79 /app/javascript
parent8ed2f9409cb50421ebdaccb3f65228f0bd1b7764 (diff)
Fix design issues with sensitive preview cards (#14126)
* Fix design issues with sensitive preview cards

* Center “sensitive” label on preview image for interactive cards

* Add “button” role to sensitive preview card text
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/mastodon/features/status/components/card.js9
-rw-r--r--app/javascript/styles/mastodon/components.scss1
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 4442ab495..e35b1fd5f 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 (
-        <div className={className} ref={this.setRef}>
+        <div className={className} ref={this.setRef} onClick={revealed ? null : this.handleReveal} role={revealed ? 'button' : null}>
           {embed}
           {!compact && description}
         </div>
@@ -289,14 +291,12 @@ export default class Card extends React.PureComponent {
         <div className='status-card__image'>
           {canvas}
           {thumbnail}
-          {!revealed && spoilerButton}
         </div>
       );
     } else {
       embed = (
         <div className='status-card__image'>
           <Icon id='file-text' />
-          {!revealed && spoilerButton}
         </div>
       );
     }
@@ -305,6 +305,7 @@ export default class Card extends React.PureComponent {
       <a href={card.get('url')} className={className} target='_blank' rel='noopener noreferrer' ref={this.setRef}>
         {embed}
         {description}
+        {!revealed && spoilerButton}
       </a>
     );
   }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index fb9dca41b..2ff9073db 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%);