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
This commit is contained in:
ThibG 2020-06-25 22:42:01 +02:00 committed by GitHub
parent 8ed2f9409c
commit 1d2b0d2121
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 4 deletions

View File

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

View File

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