Updated Recommending you table design

refs https://github.com/TryGhost/Product/issues/3891
This commit is contained in:
Djordje Vlaisavljevic 2023-09-22 12:53:02 +01:00
parent f180e8762d
commit 267d8d05f1
2 changed files with 5 additions and 18 deletions

View File

@ -52,26 +52,19 @@ const IncomingRecommendationItem: React.FC<{mention: Mention, stats: ReferrerHis
<TableCell onClick={showDetails}>
<div className='group flex items-center gap-3 hover:cursor-pointer'>
<div className={`flex grow flex-col`}>
<div className="mb-1 flex items-center gap-2">
<div className="mb-0.5 flex items-center gap-3">
<RecommendationIcon favicon={mention.source_favicon} featured_image={mention.source_featured_image} title={mention.source_title || mention.source_site_title || cleanedSource} />
<span className='line-clamp-1'>{mention.source_title || mention.source_site_title || cleanedSource}</span>
</div>
<span className='line-clamp-1 text-xs leading-snug text-grey-700'>{mention.source_excerpt || cleanedSource}</span>
</div>
</div>
</TableCell>
<TableCell className='hidden md:!visible md:!table-cell' onClick={showDetails}>
<div className={`flex grow flex-col`}>
{(signups - paidConversions) === 0 && <span className="text-grey-500">-</span>}
{(signups - paidConversions) > 0 && <><span>{signups - paidConversions}</span><span className='whitespace-nowrap text-xs text-grey-700'>free members</span></>}
</div>
<TableCell className='hidden align-middle md:!visible md:!table-cell' onClick={showDetails}>
{(signups - paidConversions) === 0 ? <span className="text-grey-500">-</span> : (<div className='-mt-px flex grow items-end gap-1'><span>{signups - paidConversions}</span><span className='-mb-px whitespace-nowrap text-sm lowercase text-grey-700'>free members</span></div>)}
</TableCell>
{hasPaidColumn &&
<TableCell className='hidden md:!visible md:!table-cell' onClick={showDetails}>
<div className={`flex grow flex-col`}>
{paidConversions === 0 && <span className="text-grey-500">-</span>}
{paidConversions > 0 && <><span>{paidConversions}</span><span className='whitespace-nowrap text-xs text-grey-700'>paid members</span></>}
</div>
<TableCell className='hidden align-middle md:!visible md:!table-cell' onClick={showDetails}>
{paidConversions === 0 ? <span className="text-grey-500">-</span> : (<div className='-mt-px flex grow items-end gap-1'><span>{paidConversions}</span><span className='whitespace-nowrap text-xs text-grey-700'>paid members</span></div>)}
</TableCell>
}
</TableRow>

View File

@ -48,20 +48,14 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
<RecommendationIcon isGhostSite={isGhostSite} {...recommendation} />
<span className='line-clamp-1 font-medium'>{recommendation.title}</span>
</div>
{/* <span className='line-clamp-1 text-xs leading-snug text-grey-700'>{recommendation.url || 'No reason added'}</span> */}
</div>
</div>
</TableCell>
<TableCell className='hidden w-8 align-middle md:!visible md:!table-cell' onClick={showDetails}>
{/* {(count === 0) ? (<span className="text-grey-500">-</span>) : (<div className='flex grow flex-col'>
<span>{count}</span>
<span className='whitespace-nowrap text-xs text-grey-700'>{isGhostSite ? newMembers : clicks}</span>
</div>)} */}
{(count === 0) ? (<span className="text-grey-500">-</span>) : (<div className='-mt-px flex grow items-end gap-1'>
<span>{count}</span>
<span className='-mb-px whitespace-nowrap text-sm lowercase text-grey-700'>{isGhostSite ? newMembers : clicks}</span>
</div>)}
</TableCell>
</TableRow>
);