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

AccountHeader: make avatar transition less dramatic

This commit is contained in:
Alex Gleason 2021-10-19 14:30:14 -05:00
parent 9cb3e682c1
commit 416310d302
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/soapbox/features/account/components/header.js
View File

@ -397,7 +397,6 @@ class Header extends ImmutablePureComponent {
const avatarSize = isSmallScreen ? 90 : 200; const avatarSize = isSmallScreen ? 90 : 200;
const deactivated = !account.getIn(['pleroma', 'is_active'], true); const deactivated = !account.getIn(['pleroma', 'is_active'], true);
const lockedIcon = account.get('locked') ? (<Icon id='lock' title={intl.formatMessage(messages.account_locked)} />) : '';
const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.get('display_name_html') }; const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.get('display_name_html') };
const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified'); const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified');
@ -430,7 +429,12 @@ class Header extends ImmutablePureComponent {
<span dangerouslySetInnerHTML={displayNameHtml} className={classNames('profile-info-panel__name-content', { 'with-badge': verified })} /> <span dangerouslySetInnerHTML={displayNameHtml} className={classNames('profile-info-panel__name-content', { 'with-badge': verified })} />
{verified && <VerificationBadge />} {verified && <VerificationBadge />}
{account.get('bot') && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />} {account.get('bot') && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
{ <small>@{getAcct(account, displayFqn)} {lockedIcon}</small> } <small>
@{getAcct(account, displayFqn)}
{account.get('locked') && (
<Icon src={require('@tabler/icons/icons/lock.svg')} title={intl.formatMessage(messages.account_locked)} />
)}
</small>
</div> </div>
</div> </div>
</div> </div>

8
app/styles/components/account-header.scss
View File

@ -143,7 +143,7 @@
&.is-locked { &.is-locked {
.account__header__avatar { .account__header__avatar {
top: -130px; top: -20px;
opacity: 0; opacity: 0;
animation: 0.3s fadeOut; animation: 0.3s fadeOut;
animation-fill-mode: forwards; animation-fill-mode: forwards;
@ -221,7 +221,7 @@
width: 265px; width: 265px;
height: 74px; height: 74px;
position: absolute; position: absolute;
top: 220px; top: 100px;
opacity: 0; opacity: 0;
animation: 0.3s fadeOut; animation: 0.3s fadeOut;
animation-fill-mode: forwards; animation-fill-mode: forwards;
@ -247,9 +247,9 @@
} }
small { small {
display: block; display: flex;
font-size: 14px; font-size: 14px;
line-height: 1.5; color: var(--primary-text-color--faint);
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;