moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve alignment/spacing

This commit is contained in:
Chewbacca 2023-04-11 08:55:17 -04:00
parent dc8468adc2
commit e82ecdc05c
12 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/soapbox/components/status-list.tsx
View File

@ -139,6 +139,7 @@ const StatusList: React.FC<IStatusList> = ({
onMoveDown={handleMoveDown} onMoveDown={handleMoveDown}
contextType={timelineId} contextType={timelineId}
showGroup={showGroup} showGroup={showGroup}
variant={divideType === 'border' ? 'slim' : 'rounded'}
/> />
); );
}; };
@ -172,6 +173,7 @@ const StatusList: React.FC<IStatusList> = ({
onMoveDown={handleMoveDown} onMoveDown={handleMoveDown}
contextType={timelineId} contextType={timelineId}
showGroup={showGroup} showGroup={showGroup}
variant={divideType === 'border' ? 'slim' : 'default'}
/> />
)); ));
}; };
@ -245,7 +247,7 @@ const StatusList: React.FC<IStatusList> = ({
isLoading={isLoading} isLoading={isLoading}
showLoading={isLoading && statusIds.size === 0} showLoading={isLoading && statusIds.size === 0}
onLoadMore={handleLoadOlder} onLoadMore={handleLoadOlder}
placeholderComponent={PlaceholderStatus} placeholderComponent={() => <PlaceholderStatus variant={divideType === 'border' ? 'slim' : 'rounded'} />}
placeholderCount={20} placeholderCount={20}
ref={node} ref={node}
className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', { className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {

2
app/soapbox/components/status.tsx
View File

@ -50,7 +50,7 @@ export interface IStatus {
featured?: boolean featured?: boolean
hideActionBar?: boolean hideActionBar?: boolean
hoverable?: boolean hoverable?: boolean
variant?: 'default' | 'rounded' variant?: 'default' | 'rounded' | 'slim'
showGroup?: boolean showGroup?: boolean
accountAction?: React.ReactElement accountAction?: React.ReactElement
} }

3
app/soapbox/components/ui/card/card.tsx
View File

@ -20,7 +20,7 @@ export type CardSizes = keyof typeof sizes
interface ICard { interface ICard {
/** The type of card. */ /** The type of card. */
variant?: 'default' | 'rounded' variant?: 'default' | 'rounded' | 'slim'
/** Card size preset. */ /** Card size preset. */
size?: CardSizes size?: CardSizes
/** Extra classnames for the <div> element. */ /** Extra classnames for the <div> element. */
@ -37,6 +37,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
className={clsx({ className={clsx({
'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded', 'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded',
[sizes[size]]: variant === 'rounded', [sizes[size]]: variant === 'rounded',
'py-4': variant === 'slim',
}, className)} }, className)}
> >
{children} {children}

4
app/soapbox/features/account/components/header.tsx
View File

@ -105,7 +105,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
if (!account) { if (!account) {
return ( return (
<div className='-mx-4 -mt-4'> <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
<div> <div>
<div className='relative h-32 w-full bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' /> <div className='relative h-32 w-full bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
</div> </div>
@ -608,7 +608,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
const menu = makeMenu(); const menu = makeMenu();
return ( return (
<div className='-mx-4 -mt-4'> <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
{(account.moved && typeof account.moved === 'object') && ( {(account.moved && typeof account.moved === 'object') && (
<MovedNote from={account} to={account.moved} /> <MovedNote from={account} to={account.moved} />
)} )}

2
app/soapbox/features/event/event-discussion.tsx
View File

@ -184,7 +184,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
ref={scroller} ref={scroller}
hasMore={!!next} hasMore={!!next}
onLoadMore={handleLoadMore} onLoadMore={handleLoadMore}
placeholderComponent={() => <PlaceholderStatus thread />} placeholderComponent={() => <PlaceholderStatus variant='slim' />}
initialTopMostItemIndex={0} initialTopMostItemIndex={0}
emptyMessage={<FormattedMessage id='event.discussion.empty' defaultMessage='No one has commented this event yet. When someone does, they will appear here.' />} emptyMessage={<FormattedMessage id='event.discussion.empty' defaultMessage='No one has commented this event yet. When someone does, they will appear here.' />}
> >

4
app/soapbox/features/group/components/group-header.tsx
View File

@ -32,7 +32,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
if (!group) { if (!group) {
return ( return (
<div className='-mx-4 -mt-4'> <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
<div> <div>
<div className='relative h-32 w-full bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' /> <div className='relative h-32 w-full bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
</div> </div>
@ -105,7 +105,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
}; };
return ( return (
<div className='-mx-4 -mt-4'> <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
<div className='relative'> <div className='relative'>
{renderHeader()} {renderHeader()}

2
app/soapbox/features/group/group-timeline.tsx
View File

@ -56,7 +56,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
return ( return (
<Stack space={2}> <Stack space={2}>
{canComposeGroupStatus && ( {canComposeGroupStatus && (
<div className='border-b border-solid border-gray-200 px-2 py-4 dark:border-gray-800'> <div className='border-b border-solid border-gray-200 py-6 dark:border-gray-800'>
<HStack alignItems='start' space={4}> <HStack alignItems='start' space={4}>
<Link to={`/@${account.acct}`}> <Link to={`/@${account.acct}`}>
<Avatar src={account.avatar} size={46} /> <Avatar src={account.avatar} size={46} />

7
app/soapbox/features/placeholder/components/placeholder-status.tsx
View File

@ -8,15 +8,16 @@ import PlaceholderDisplayName from './placeholder-display-name';
import PlaceholderStatusContent from './placeholder-status-content'; import PlaceholderStatusContent from './placeholder-status-content';
interface IPlaceholderStatus { interface IPlaceholderStatus {
thread?: boolean variant?: 'rounded' | 'slim'
} }
/** Fake status to display while data is loading. */ /** Fake status to display while data is loading. */
const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) => ( const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant = 'rounded' }) => (
<div <div
className={clsx({ className={clsx({
'status-placeholder bg-white dark:bg-primary-900': true, 'status-placeholder bg-white dark:bg-primary-900': true,
'shadow-xl dark:shadow-none sm:rounded-xl px-4 py-6 sm:p-5': !thread, 'shadow-xl dark:shadow-none sm:rounded-xl px-4 py-6 sm:p-5': variant === 'rounded',
'py-4': variant === 'slim',
})} })}
> >
<div className='w-full animate-pulse overflow-hidden'> <div className='w-full animate-pulse overflow-hidden'>

2
app/soapbox/features/status/components/thread-status.tsx
View File

@ -46,7 +46,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
// @ts-ignore FIXME // @ts-ignore FIXME
<StatusContainer {...props} /> <StatusContainer {...props} />
) : ( ) : (
<PlaceholderStatus thread /> <PlaceholderStatus variant='slim' />
)} )}
</div> </div>
); );

2
app/soapbox/features/status/index.tsx
View File

@ -536,7 +536,7 @@ const Thread: React.FC<IThread> = (props) => {
ref={scroller} ref={scroller}
hasMore={!!next} hasMore={!!next}
onLoadMore={handleLoadMore} onLoadMore={handleLoadMore}
placeholderComponent={() => <PlaceholderStatus thread />} placeholderComponent={() => <PlaceholderStatus variant='slim' />}
initialTopMostItemIndex={ancestorsIds.size} initialTopMostItemIndex={ancestorsIds.size}
> >
{children} {children}

2
app/soapbox/pages/group-page.tsx
View File

@ -99,7 +99,7 @@ const GroupPage: React.FC<IGroupPage> = ({ params, children }) => {
return ( return (
<> <>
<Layout.Main> <Layout.Main>
<Column label={group ? group.display_name : ''} withHeader={false}> <Column size='lg' label={group ? group.display_name : ''} withHeader={false}>
<GroupHeader group={group} /> <GroupHeader group={group} />
<Tabs <Tabs

2
app/soapbox/pages/profile-page.tsx
View File

@ -97,7 +97,7 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
return ( return (
<> <>
<Layout.Main> <Layout.Main>
<Column label={account ? `@${getAcct(account, displayFqn)}` : ''} withHeader={false}> <Column size='lg' label={account ? `@${getAcct(account, displayFqn)}` : ''} withHeader={false}>
<div className='space-y-4'> <div className='space-y-4'>
<Header account={account} /> <Header account={account} />