Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues 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', id: 'inbox',
title: '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'}`}> <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 => ( {activities && activities.some(activity => activity.type === 'Create' && activity.object.type === 'Article') ? (activities.slice().reverse().map(activity => (
activity.type === 'Create' && activity.object.type === 'Article' && activity.type === 'Create' && activity.object.type === 'Article' &&
@ -63,9 +63,9 @@ const ActivityPubComponent: React.FC = () => {
{ {
id: 'activity', id: 'activity',
title: '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 => ( {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> </List>
<Sidebar followersCount={followersCount} followingCount={followingCount} updateRoute={updateRoute} /> <Sidebar followersCount={followersCount} followingCount={followingCount} updateRoute={updateRoute} />
@ -74,7 +74,7 @@ const ActivityPubComponent: React.FC = () => {
{ {
id: 'likes', id: 'likes',
title: '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'> <ul className='order-2 col-span-6 flex flex-col lg:order-1 lg:col-span-4'>
{activities && activities.slice().reverse().map(activity => ( {activities && activities.slice().reverse().map(activity => (
activity.type === 'Create' && activity.object.type === 'Article' && activity.type === 'Create' && activity.object.type === 'Article' &&
@ -110,7 +110,7 @@ const ActivityPubComponent: React.FC = () => {
setSelectedOption({label: 'Feed', value: 'feed'}); setSelectedOption({label: 'Feed', value: 'feed'});
} }
} }
]} clearBg={false} link outlineOnMobile />]} ]} clearBg={true} link outlineOnMobile />]}
firstOnPage={true} firstOnPage={true}
primaryAction={{ primaryAction={{
title: 'Follow', 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='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'> <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> <div>
<p className='text-base font-bold' data-test-activity-heading>{actor.name}</p> <p className='text-base font-bold' data-test-activity-heading>{actor.name}</p>
<div className='*:text-base *:text-grey-900'> <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( toolbarContainerClassName = clsx(
'flex justify-between gap-5', 'flex justify-between gap-5',
(type === 'page' && actions?.length) ? 'flex-col md:flex-row md:items-end' : 'items-end', (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') ? 'pb-3 tablet:pb-8' : (tabs?.length ? '' : 'pb-2'), (firstOnPage && type === 'page' && !tabs?.length) ? 'pb-3 tablet:pb-8' : (tabs?.length ? '' : 'pb-2'),
toolbarBorder && 'border-b border-grey-200 dark:border-grey-900', toolbarBorder && 'border-b border-grey-200 dark:border-grey-900',
toolbarContainerClassName toolbarContainerClassName
); );