djsundog/tootlab-mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-01-14 03:32:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Port 46483ae849bc06ee74f4745f4564b213e742c51c

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 { counterRenderer } from 'flavours/glitch/components/common_counter';
import ShortNumber from 'flavours/glitch/components/short_number'; import ShortNumber from 'flavours/glitch/components/short_number';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import classNames from 'classnames';
import { me } from '../initial_state'; import { me } from '../initial_state';
@ -61,6 +62,7 @@ class Account extends ImmutablePureComponent {
onMuteNotifications: PropTypes.func.isRequired, onMuteNotifications: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
hidden: PropTypes.bool, hidden: PropTypes.bool,
minimal: PropTypes.bool,
actionIcon: PropTypes.string, actionIcon: PropTypes.string,
actionTitle: PropTypes.string, actionTitle: PropTypes.string,
defaultAction: PropTypes.string, defaultAction: PropTypes.string,
@ -96,14 +98,14 @@ class Account extends ImmutablePureComponent {
}; };
render () { 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) { if (!account) {
return ( return (
<div className='account'> <div className={classNames('account', { 'account--minimal': minimal })}>
<div className='account__wrapper'> <div className='account__wrapper'>
<div className='account__display-name'> <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> <div>
<DisplayName /> <DisplayName />
@ -177,7 +179,7 @@ class Account extends ImmutablePureComponent {
} }
return ( return (
<div className='account'> <div className={classNames('account', { 'account--minimal': minimal })}>
<div className='account__wrapper'> <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')}`}> <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'> <div className='account__avatar-wrapper'>
@ -186,13 +188,15 @@ class Account extends ImmutablePureComponent {
<div> <div>
<DisplayName account={account} /> <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> </div>
</Permalink> </Permalink>
<div className='account__relationship'> {!minimal && (
{buttons} <div className='account__relationship'>
</div> {buttons}
</div>
)}
</div> </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'> <div className='server-banner__meta__column'>
<h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4> <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>
<div className='server-banner__meta__column'> <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'> <div className='about__meta__column'>
<h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4> <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>
<hr className='about__meta__divider' /> <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 { &__note {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;