me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Glitch] Fix design issues with sensitive preview cards

Browse source 
Port 1d2b0d2121 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
ThibG 2020-06-25 22:42:01 +02:00 committed by Thibaut Girka
parent 9a26d2e127
commit 327f6309e4
2 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/javascript/flavours/glitch/features/status/components/card.js
View file

@ -156,7 +156,9 @@ export default class Card extends React.PureComponent {
this.setState({ previewLoaded: true }); this.setState({ previewLoaded: true });
} }
handleReveal = () => { handleReveal = e => {
e.preventDefault();
e.stopPropagation();
this.setState({ revealed: true }); this.setState({ revealed: true });
} }
@ -244,7 +246,7 @@ export default class Card extends React.PureComponent {
} }
return ( return (
<div className={className} ref={this.setRef}> <div className={className} ref={this.setRef} onClick={revealed ? null : this.handleReveal} role={revealed ? 'button' : null}>
{embed} {embed}
{!compact && description} {!compact && description}
</div> </div>
@ -254,14 +256,12 @@ export default class Card extends React.PureComponent {
<div className='status-card__image'> <div className='status-card__image'>
{canvas} {canvas}
{thumbnail} {thumbnail}
{!revealed && spoilerButton}
</div> </div>
); );
} else { } else {
embed = ( embed = (
<div className='status-card__image'> <div className='status-card__image'>
<Icon id='file-text' /> <Icon id='file-text' />
{!revealed && spoilerButton}
</div> </div>
); );
} }
@ -270,6 +270,7 @@ export default class Card extends React.PureComponent {
<a href={card.get('url')} className={className} target='_blank' rel='noopener noreferrer' ref={this.setRef}> <a href={card.get('url')} className={className} target='_blank' rel='noopener noreferrer' ref={this.setRef}>
{embed} {embed}
{description} {description}
{!revealed && spoilerButton}
</a> </a>
); );
} }

1
app/javascript/flavours/glitch/styles/components/status.scss
View file

@ -776,6 +776,7 @@ a.status__display-name,
} }
.status-card { .status-card {
position: relative;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid lighten($ui-base-color, 8%);