mirror of https://github.com/Siphonay/mastodon
[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:
parent
a262f990f8
commit
e0aba64a64
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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'>
|
||||
|
|
|
@ -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' />
|
||||
|
|
|
@ -21,6 +21,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
&--minimal {
|
||||
.account__display-name {
|
||||
.display-name {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.display-name strong {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__note {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
Loading…
Reference in New Issue