Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-13 15:58:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] fix: Fix cramped layout of follower recommendations on small viewports

Browse Source 
Port 2c828748a3 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-06-11 17:15:12 +02:00
committed by Claire
parent 0629ea4cba
commit 1a732157d4
6 changed files with 267 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
app/javascript/flavours/glitch/components/account.tsx
View File

@@ -72,6 +72,7 @@ interface AccountProps {
minimal?: boolean;
defaultAction?: 'block' | 'mute';
withBio?: boolean;
withMenu?: boolean;
}
export const Account: React.FC<AccountProps> = ({
@@ -81,6 +82,7 @@ export const Account: React.FC<AccountProps> = ({
minimal,
defaultAction,
withBio,
withMenu = true,
}) => {
const intl = useIntl();
const { signedIn } = useIdentity();
@@ -226,9 +228,10 @@ export const Account: React.FC<AccountProps> = ({
);
}
let button: React.ReactNode, dropdown: React.ReactNode;
let button: React.ReactNode;
let dropdown: React.ReactNode;
if (menu.length > 0) {
if (menu.length > 0 && withMenu) {
dropdown = (
<Dropdown
items={menu}
@@ -280,43 +283,69 @@ export const Account: React.FC<AccountProps> = ({
}
return (
<div className={classNames('account', { 'account--minimal': minimal })}>
<div className='account__wrapper'>
<Permalink
className='account__display-name'
title={account?.acct}
href={account?.url}
to={`/@${account?.acct}`}
data-hover-card-account={id}
>
<div className='account__avatar-wrapper'>
{account ? (
<Avatar account={account} size={size} />
<div
className={classNames('account', {
'account--minimal': minimal,
})}
>
<div
className={classNames('account__wrapper', {
'account__wrapper--with-bio': account && withBio,
})}
>
<div className='account__info-wrapper'>
<Permalink
className='account__display-name'
title={account?.acct}
href={account?.url}
to={`/@${account?.acct}`}
data-hover-card-account={id}
>
<div className='account__avatar-wrapper'>
{account ? (
<Avatar account={account} size={size} />
) : (
<Skeleton width={size} height={size} />
)}
</div>
<div className='account__contents'>
<DisplayName account={account} />
{!minimal && (
<div className='account__details'>
{account ? (
<>
<ShortNumber
value={account.followers_count}
renderer={FollowersCounter}
/>{' '}
{verification} {muteTimeRemaining}
</>
) : (
<Skeleton width='7ch' />
)}
</div>
)}
</div>
</Permalink>
{account &&
withBio &&
(account.note.length > 0 ? (
<div
className='account__note translate'
dangerouslySetInnerHTML={{ __html: account.note_emojified }}
/>
) : (
<Skeleton width={size} height={size} />
)}
</div>
<div className='account__contents'>
<DisplayName account={account} />
{!minimal && (
<div className='account__details'>
{account ? (
<>
<ShortNumber
value={account.followers_count}
renderer={FollowersCounter}
/>{' '}
{verification} {muteTimeRemaining}
</>
) : (
<Skeleton width='7ch' />
)}
<div className='account__note account__note--missing'>
<FormattedMessage
id='account.no_bio'
defaultMessage='No description provided.'
/>
</div>
)}
</div>
</Permalink>
))}
</div>
{!minimal && (
<div className='account__relationship'>
@@ -325,22 +354,6 @@ export const Account: React.FC<AccountProps> = ({
</div>
)}
</div>
{account &&
withBio &&
(account.note.length > 0 ? (
<div
className='account__note translate'
dangerouslySetInnerHTML={{ __html: account.note_emojified }}
/>
) : (
<div className='account__note account__note--missing'>
<FormattedMessage
id='account.no_bio'
defaultMessage='No description provided.'
/>
</div>
))}
</div>
);
};

4
app/javascript/flavours/glitch/components/avatar.tsx
View File

@@ -18,6 +18,7 @@ interface Props {
withLink?: boolean;
counter?: number | string;
counterBorderColor?: string;
className?: string;
}
export const Avatar: React.FC<Props> = ({
@@ -27,6 +28,7 @@ export const Avatar: React.FC<Props> = ({
inline = false,
withLink = false,
style: styleFromParent,
className,
counter,
counterBorderColor,
}) => {
@@ -52,7 +54,7 @@ export const Avatar: React.FC<Props> = ({
const avatar = (
<div
className={classNames('account__avatar', {
className={classNames(className, 'account__avatar', {
'account__avatar--inline': inline,
'account__avatar--loading': loading,
})}