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,
}
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() {
const { visible, accountId, account } = this.props;
if (!accountId) return null;
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 (
<div className={classNames('profile-hover-card', { 'profile-hover-card--visible': visible })}>
<div className='profile-hover-card__container'>
{ followed_by ?
{followedBy &&
<span className='relationship-tag'>
<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
</span>
: '' }
</span>}
<div className='profile-hover-card__action-button'><ActionButton account={account} /></div>
<UserPanel className='profile-hover-card__user' accountId={accountId} />
<div className='profile-hover-card__badges'>
{isAdmin(account) && <Badge slug='admin' title='Admin' />}
{isModerator(account) && <Badge slug='moderator' title='Moderator' />}
{account.getIn(['patron', 'is_patron']) && <Badge slug='patron' title='Patron' />}
</div>
<div className='profile-hover-card__bio' dangerouslySetInnerHTML={accountBio} />
{badges.length > 0 &&
<div className='profile-hover-card__badges'>
{badges}
</div>}
{account.getIn(['source', 'note'], '').length > 0 &&
<div className='profile-hover-card__bio' dangerouslySetInnerHTML={accountBio} />}
</div>
</div>
);

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

@ -14,7 +14,7 @@
transition-property: opacity;
transition-duration: 0.2s;
transition-delay: 0.7s;
width: 265px;
width: 300px;
z-index: 998;
left: -10px;
padding-top: 20px;
@ -73,6 +73,18 @@
.profile-hover-card__bio {
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);
}
}
}