tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Improve layout and spacing of number fields

Browse Source 
Port cf7a092053644407c1bcb23dd979bbb359b1f313 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion 2026-05-08 15:30:20 +02:00 committed by Claire
parent 012c6bc9f2
commit 15b5812e17
4 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/flavours/glitch/components/account_header/number_fields.tsx
View File

@ -11,6 +11,8 @@ import { FormattedDateWrapper } from '../formatted_date';
import { NumberFields, NumberFieldsItem } from '../number_fields'; import { NumberFields, NumberFieldsItem } from '../number_fields';
import { ShortNumber } from '../short_number'; import { ShortNumber } from '../short_number';
import classes from './styles.module.scss';
export const AccountNumberFields: FC<{ accountId: string }> = ({ export const AccountNumberFields: FC<{ accountId: string }> = ({
accountId, accountId,
}) => { }) => {
@ -33,7 +35,7 @@ export const AccountNumberFields: FC<{ accountId: string }> = ({
} }
return ( return (
<NumberFields> <NumberFields className={classes.numberFields}>
<NumberFieldsItem <NumberFieldsItem
label={ label={
<FormattedMessage id='account.followers' defaultMessage='Followers' /> <FormattedMessage id='account.followers' defaultMessage='Followers' />

6
app/javascript/flavours/glitch/components/account_header/styles.module.scss
View File

@ -263,6 +263,12 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
} }
} }
.numberFields {
@container (width >= #{$button-breakpoint}) {
--number-fields-gap: 40px;
}
}
.bio { .bio {
font-size: 15px; font-size: 15px;
color: var(--color-text-primary); color: var(--color-text-primary);

1
app/javascript/flavours/glitch/components/account_list_item/styles.module.scss
View File

@ -1,7 +1,6 @@
.wrapper { .wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: start;
gap: 12px; gap: 12px;
padding: 16px; padding: 16px;

4
app/javascript/flavours/glitch/components/number_fields/styles.module.scss
View File

@ -1,9 +1,11 @@
.list { .list {
--item-gap: var(--number-fields-gap, 24px);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0; margin: 0;
padding: 0; padding: 0;
gap: 4px 24px; gap: 4px var(--item-gap);
font-size: 13px; font-size: 13px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }