Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Improved inbox view UI (#21741)

Browse source 
ref
https://linear.app/ghost/issue/AP-609/give-inbox-ui-more-room-to-breathe

- Vertically centered feature image
- Timestamp next to the site title
- More consistent spacing in hover state
This commit is contained in:
Djordje Vlaisavljevic 2024-11-27 13:11:56 +00:00 committed by GitHub
parent 029177fa69
commit 60ff94943b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 34 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/admin-x-activitypub/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@tryghost/admin-x-activitypub",
"version": "0.3.23",
"version": "0.3.24",
"license": "MIT",
"repository": {
"type": "git",

2
apps/admin-x-activitypub/src/components/Inbox.tsx
View file

@ -86,7 +86,7 @@ const Inbox: React.FC<InboxProps> = ({layout}) => {
</div>
) : activities.length > 0 ? (
<>
<div className={`mx-auto flex min-h-[calc(100dvh_-_117px)] items-start gap-8`}>
<div className={`mx-auto flex min-h-[calc(100dvh_-_117px)] items-start gap-9`}>
<div className='flex w-full min-w-0 flex-col items-center'>
<div className={`flex w-full min-w-0 flex-col items-start ${layout === 'inbox' ? 'xxxl:max-w-[800px]' : 'max-w-[500px]'}`}>
{layout === 'feed' && <div className='relative mx-[-12px] mb-4 mt-10 flex w-[calc(100%+24px)] items-center p-3'>

14
apps/admin-x-activitypub/src/components/feed/FeedItem.tsx
View file

@ -94,7 +94,7 @@ export function renderFeedAttachment(object: ObjectProperties, layout: string) {
function renderInboxAttachment(object: ObjectProperties) {
const attachment = getAttachment(object);
const videoAttachmentStyles = 'ml-8 shrink-0 rounded-md h-[91px] w-[121px] relative';
const videoAttachmentStyles = 'ml-8 md:ml-9 shrink-0 rounded-md h-[91px] w-[121px] relative';
const imageAttachmentStyles = clsx('object-cover outline outline-1 -outline-offset-1 outline-black/[0.05]', videoAttachmentStyles);
if (!attachment) {
@ -392,11 +392,12 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
return (
<>
{object && (
<div className='group/article relative -mx-4 -my-px flex min-h-[112px] min-w-0 cursor-pointer flex-col justify-between rounded-md px-4 py-7 hover:bg-grey-75' data-layout='inbox' data-object-id={object.id} onClick={onClick}>
<div className='z-10 mb-1.5 flex w-full min-w-0 items-center gap-1.5 text-base text-grey-700 group-hover/article:border-transparent'>
<div className='group/article relative -mx-6 -my-px flex min-h-[112px] min-w-0 cursor-pointer items-center justify-between rounded-md p-6 hover:bg-grey-75' data-layout='inbox' data-object-id={object.id} onClick={onClick}>
<div>
<div className='z-10 mb-1.5 flex w-full min-w-0 items-center gap-1.5 text-base group-hover/article:border-transparent'>
<APAvatar author={author} size='2xs'/>
<span className='min-w-0 truncate break-all font-medium text-grey-900' title={getUsername(author)} data-test-activity-heading>{author.name}</span>
<span className='ml-auto shrink-0 whitespace-nowrap' title={`${timestamp}`}>{getRelativeTimestamp(date)}</span>
<span className='shrink-0 whitespace-nowrap text-grey-700 before:mr-1 before:content-["·"]' title={`${timestamp}`}>{getRelativeTimestamp(date)}</span>
</div>
<div className='flex'>
<div className='flex min-h-[73px] w-full min-w-0 flex-col items-start justify-start gap-1'>
@ -410,8 +411,7 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
<div dangerouslySetInnerHTML={({__html: stripHtml(object.preview?.content ?? object.content)})} className='ap-note-content line-clamp-2 w-full max-w-[600px] text-pretty text-base leading-normal text-grey-700'></div>
<span className='mt-1 shrink-0 whitespace-nowrap leading-none text-grey-700'>{object.content && `${getReadingTime(object.content)}`}</span>
</div>
{renderInboxAttachment(object)}
<div className='invisible absolute right-4 top-[22px] z-[49] flex gap-3 rounded-full bg-white px-3 py-2 shadow-md-heavy group-hover/article:visible'>
<div className='invisible absolute right-4 top-1/2 z-[49] flex -translate-y-1/2 flex-col gap-3 rounded-full bg-white px-2 py-3 shadow-md group-hover/article:visible'>
<FeedItemStats
commentCount={commentCount}
layout={layout}
@ -424,6 +424,8 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
</div>
</div>
</div>
{renderInboxAttachment(object)}
</div>
)}
</>
);

2
apps/admin-x-activitypub/src/components/feed/FeedItemStats.tsx
View file

@ -39,7 +39,7 @@ const FeedItemStats: React.FC<FeedItemStatsProps> = ({
setTimeout(() => setIsClicked(false), 300);
};
return (<div className={`flex ${(layout === 'inbox') ? 'gap-3' : 'gap-5'}`}>
return (<div className={`flex ${(layout === 'inbox') ? 'flex-col gap-3' : 'gap-5'}`}>
<div className='flex gap-1'>
<Button
className={`self-start text-grey-900 transition-opacity hover:opacity-60 ${isClicked ? 'bump' : ''} ${isLiked ? 'ap-red-heart text-red *:!fill-red hover:text-red' : ''}`}