OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved alignment and spacing of ViewContainer component

Browse Source 
ref https://linear.app/tryghost/issue/MOM-261/improve-alignment-and-spacing-of-viewcontainer-component

- It now looks a lot better when it's set to be page-level and has tabs and actions
This commit is contained in:
Djordje Vlaisavljevic 2024-07-09 20:42:49 +01:00
parent 81ba4c7f4f
commit c6e001280c
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/admin-x-activitypub/src/components/ListIndex.tsx
View File

@ -40,7 +40,7 @@ const ActivityPubComponent: React.FC = () => {
{
id: 'inbox',
title: 'Inbox',
contents: <div className='grid grid-cols-6 items-start gap-8'>
contents: <div className='grid grid-cols-6 items-start gap-8 pt-8'>
<ul className={`order-2 col-span-6 flex flex-col pb-8 lg:order-1 ${selectedOption.value === 'inbox' ? 'lg:col-span-4' : 'lg:col-span-3'}`}>
{activities && activities.some(activity => activity.type === 'Create' && activity.object.type === 'Article') ? (activities.slice().reverse().map(activity => (
activity.type === 'Create' && activity.object.type === 'Article' &&
@ -63,9 +63,9 @@ const ActivityPubComponent: React.FC = () => {
{
id: 'activity',
title: 'Activity',
contents: <div className='grid grid-cols-6 items-start gap-8'><List className='col-span-4'>
contents: <div className='grid grid-cols-6 items-start gap-8 pt-8'><List className='col-span-4'>
{activities && activities.slice().reverse().map(activity => (
activity.type === 'Like' && <ListItem avatar={<Avatar image={activity.actor.icon} size='sm' />} id='list-item' title={<div><span className='font-medium'>{activity.actor.name}</span><span className='text-grey-800'> liked your post </span><span className='font-medium'>{activity.object.name}</span></div>}></ListItem>
activity.type === 'Like' && <ListItem avatar={<Avatar image={activity.actor.icon?.url} size='sm' />} id='list-item' title={<div><span className='font-medium'>{activity.actor.name}</span><span className='text-grey-800'> liked your post </span><span className='font-medium'>{activity.object.name}</span></div>}></ListItem>
))}
</List>
<Sidebar followersCount={followersCount} followingCount={followingCount} updateRoute={updateRoute} />
@ -74,7 +74,7 @@ const ActivityPubComponent: React.FC = () => {
{
id: 'likes',
title: 'Likes',
contents: <div className='grid grid-cols-6 items-start gap-8'>
contents: <div className='grid grid-cols-6 items-start gap-8 pt-8'>
<ul className='order-2 col-span-6 flex flex-col lg:order-1 lg:col-span-4'>
{activities && activities.slice().reverse().map(activity => (
activity.type === 'Create' && activity.object.type === 'Article' &&
@ -110,7 +110,7 @@ const ActivityPubComponent: React.FC = () => {
setSelectedOption({label: 'Feed', value: 'feed'});
}
}
]} clearBg={false} link outlineOnMobile />]}
]} clearBg={true} link outlineOnMobile />]}
firstOnPage={true}
primaryAction={{
title: 'Follow',
@ -242,7 +242,7 @@ const ObjectContentDisplay: React.FC<{actor: ActorProperties, object: ObjectProp
<div className='border-1 group/article relative z-10 flex cursor-pointer flex-col items-start justify-between border-b border-b-grey-200 py-6' data-test-activity>
<div className='relative z-10 mb-3 flex w-full items-center gap-3'>
<img className='w-8' src={actor.icon.url}/>
<img className='w-8' src={actor.icon?.url}/>
<div>
<p className='text-base font-bold' data-test-activity-heading>{actor.name}</p>
<div className='*:text-base *:text-grey-900'>

4
apps/admin-x-design-system/src/global/layout/ViewContainer.tsx
View File

@ -179,8 +179,8 @@ const ViewContainer: React.FC<ViewContainerProps> = ({
toolbarContainerClassName = clsx(
'flex justify-between gap-5',
(type === 'page' && actions?.length) ? 'flex-col md:flex-row md:items-end' : 'items-end',
(firstOnPage && type === 'page') ? 'pb-3 tablet:pb-8' : (tabs?.length ? '' : 'pb-2'),
(type === 'page' && actions?.length) ? (tabs?.length ? 'flex-col md:flex-row md:items-start' : 'flex-col md:flex-row md:items-end') : 'items-end',
(firstOnPage && type === 'page' && !tabs?.length) ? 'pb-3 tablet:pb-8' : (tabs?.length ? '' : 'pb-2'),
toolbarBorder && 'border-b border-grey-200 dark:border-grey-900',
toolbarContainerClassName
);