monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Fix regressions from change in account row design in web UI 

Port 46483ae849

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2023-04-01 09:27:23 +02:00 committed by Claire
parent a262f990f8
commit e0aba64a64
4 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/javascript/flavours/glitch/components/account.jsx
View File

@ -9,6 +9,7 @@ import { Skeleton } from 'flavours/glitch/components/skeleton';
import { counterRenderer } from 'flavours/glitch/components/common_counter';
import ShortNumber from 'flavours/glitch/components/short_number';
import Icon from 'flavours/glitch/components/icon';
import classNames from 'classnames';
import { me } from '../initial_state';
@ -61,6 +62,7 @@ class Account extends ImmutablePureComponent {
onMuteNotifications: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
hidden: PropTypes.bool,
minimal: PropTypes.bool,
actionIcon: PropTypes.string,
actionTitle: PropTypes.string,
defaultAction: PropTypes.string,
@ -96,14 +98,14 @@ class Account extends ImmutablePureComponent {
};
render () {
const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props;
const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
if (!account) {
return (
<div className='account'>
<div className={classNames('account', { 'account--minimal': minimal })}>
<div className='account__wrapper'>
<div className='account__display-name'>
<div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div>
<div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div>
<div>
<DisplayName />
@ -177,7 +179,7 @@ class Account extends ImmutablePureComponent {
}
return (
<div className='account'>
<div className={classNames('account', { 'account--minimal': minimal })}>
<div className='account__wrapper'>
<Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
<div className='account__avatar-wrapper'>
@ -186,13 +188,15 @@ class Account extends ImmutablePureComponent {
<div>
<DisplayName account={account} />
<ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}
{!minimal && <><ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}</>}
</div>
</Permalink>
<div className='account__relationship'>
{buttons}
</div>
{!minimal && (
<div className='account__relationship'>
{buttons}
</div>
)}
</div>
</div>
);

2
app/javascript/flavours/glitch/components/server_banner.jsx
View File

@ -63,7 +63,7 @@ class ServerBanner extends PureComponent {
<div className='server-banner__meta__column'>
<h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
</div>
<div className='server-banner__meta__column'>

2
app/javascript/flavours/glitch/features/about/index.jsx
View File

@ -128,7 +128,7 @@ class About extends PureComponent {
<div className='about__meta__column'>
<h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
</div>
<hr className='about__meta__divider' />

12
app/javascript/flavours/glitch/styles/components/accounts.scss
View File

@ -21,6 +21,18 @@
}
}
&--minimal {
.account__display-name {
.display-name {
margin-bottom: 0;
}
.display-name strong {
display: block;
}
}
}
&__note {
overflow: hidden;
text-overflow: ellipsis;