moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

HoverCard: Improve long bio situation

This commit is contained in:
Alex Gleason 2020-08-02 20:44:47 -05:00
parent 1266585aef
commit 24e7ce6e83
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/soapbox/features/profile_hover_card/profile_hover_card_container.js
View File

@ -38,28 +38,37 @@ class ProfileHoverCardContainer extends ImmutablePureComponent {
visible: true, visible: true,
} }
getBadges = () => {
const { account } = this.props;
let badges = [];
if (isAdmin(account)) badges.push(<Badge slug='admin' title='Admin' />);
if (isModerator(account)) badges.push(<Badge slug='moderator' title='Moderator' />);
if (account.getIn(['patron', 'is_patron'])) badges.push(<Badge slug='patron' title='Patron' />);
return badges;
}
render() { render() {
const { visible, accountId, account } = this.props; const { visible, accountId, account } = this.props;
if (!accountId) return null; if (!accountId) return null;
const accountBio = { __html: account.get('note_emojified') }; const accountBio = { __html: account.get('note_emojified') };
let followed_by = account.getIn(['relationship', 'followed_by']); const followedBy = account.getIn(['relationship', 'followed_by']);
const badges = this.getBadges();
return ( return (
<div className={classNames('profile-hover-card', { 'profile-hover-card--visible': visible })}> <div className={classNames('profile-hover-card', { 'profile-hover-card--visible': visible })}>
<div className='profile-hover-card__container'> <div className='profile-hover-card__container'>
{ followed_by ? {followedBy &&
<span className='relationship-tag'> <span className='relationship-tag'>
<FormattedMessage id='account.follows_you' defaultMessage='Follows you' /> <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
</span> </span>}
: '' }
<div className='profile-hover-card__action-button'><ActionButton account={account} /></div> <div className='profile-hover-card__action-button'><ActionButton account={account} /></div>
<UserPanel className='profile-hover-card__user' accountId={accountId} /> <UserPanel className='profile-hover-card__user' accountId={accountId} />
<div className='profile-hover-card__badges'> {badges.length > 0 &&
{isAdmin(account) && <Badge slug='admin' title='Admin' />} <div className='profile-hover-card__badges'>
{isModerator(account) && <Badge slug='moderator' title='Moderator' />} {badges}
{account.getIn(['patron', 'is_patron']) && <Badge slug='patron' title='Patron' />} </div>}
</div> {account.getIn(['source', 'note'], '').length > 0 &&
<div className='profile-hover-card__bio' dangerouslySetInnerHTML={accountBio} /> <div className='profile-hover-card__bio' dangerouslySetInnerHTML={accountBio} />}
</div> </div>
</div> </div>
); );

14
app/styles/components/profile_hover_card.scss
View File

@ -14,7 +14,7 @@
transition-property: opacity; transition-property: opacity;
transition-duration: 0.2s; transition-duration: 0.2s;
transition-delay: 0.7s; transition-delay: 0.7s;
width: 265px; width: 300px;
z-index: 998; z-index: 998;
left: -10px; left: -10px;
padding-top: 20px; padding-top: 20px;
@ -73,6 +73,18 @@
.profile-hover-card__bio { .profile-hover-card__bio {
margin: 0 20px 20px; margin: 0 20px 20px;
max-height: 4em;
&::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 20px;
bottom: 0;
left: 0;
background: linear-gradient(0deg, var(--foreground-color) 0%, var(--foreground-color), 80%, transparent);
}
} }
} }