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

Merge branch 'fix-composer-button' into 'develop' 

Improve spacing inside timelines

See merge request soapbox-pub/soapbox!2429
This commit is contained in:
Chewbacca 2023-04-11 15:38:22 +00:00
parent b83309670d e82ecdc05c
commit c388ff2896
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}
contextType={timelineId}
showGroup={showGroup}
variant={divideType === 'border' ? 'slim' : 'rounded'}
/>
);
};
@ -172,6 +173,7 @@ const StatusList: React.FC<IStatusList> = ({
onMoveDown={handleMoveDown}
contextType={timelineId}
showGroup={showGroup}
variant={divideType === 'border' ? 'slim' : 'default'}
/>
));
};
@ -245,7 +247,7 @@ const StatusList: React.FC<IStatusList> = ({
isLoading={isLoading}
showLoading={isLoading && statusIds.size === 0}
onLoadMore={handleLoadOlder}
placeholderComponent={PlaceholderStatus}
placeholderComponent={() => <PlaceholderStatus variant={divideType === 'border' ? 'slim' : 'rounded'} />}
placeholderCount={20}
ref={node}
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
hideActionBar?: boolean
hoverable?: boolean
variant?: 'default' | 'rounded'
variant?: 'default' | 'rounded' | 'slim'
showGroup?: boolean
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 {
/** The type of card. */
variant?: 'default' | 'rounded'
variant?: 'default' | 'rounded' | 'slim'
/** Card size preset. */
size?: CardSizes
/** Extra classnames for the <div> element. */
@ -37,6 +37,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
className={clsx({
'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded',
[sizes[size]]: variant === 'rounded',
'py-4': variant === 'slim',
}, className)}
>
{children}

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

@ -105,7 +105,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
if (!account) {
return (
<div className='-mx-4 -mt-4'>
<div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
<div>
<div className='relative h-32 w-full bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
</div>
@ -608,7 +608,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
const menu = makeMenu();
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') && (
<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}
hasMore={!!next}
onLoadMore={handleLoadMore}
placeholderComponent={() => <PlaceholderStatus thread />}
placeholderComponent={() => <PlaceholderStatus variant='slim' />}
initialTopMostItemIndex={0}
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) {
return (
<div className='-mx-4 -mt-4'>
<div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
<div>
<div className='relative h-32 w-full bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
</div>
@ -105,7 +105,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
};
return (
<div className='-mx-4 -mt-4'>
<div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
<div className='relative'>
{renderHeader()}

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

@ -56,7 +56,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
return (
<Stack space={2}>
{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}>
<Link to={`/@${account.acct}`}>
<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';
interface IPlaceholderStatus {
thread?: boolean
variant?: 'rounded' | 'slim'
}
/** Fake status to display while data is loading. */
const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) => (
const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant = 'rounded' }) => (
<div
className={clsx({
'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'>

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
<StatusContainer {...props} />
) : (
<PlaceholderStatus thread />
<PlaceholderStatus variant='slim' />
)}
</div>
);

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

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

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

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

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

@ -97,7 +97,7 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
return (
<>
<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'>
<Header account={account} />