Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Improved recommendations stats design

Browse source 
refs https://github.com/TryGhost/Product/issues/4024
This commit is contained in:
Djordje Vlaisavljevic 2023-10-11 16:55:48 +01:00
parent f917cf91ef
commit 8822725c01
2 changed files with 26 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/admin-x-settings/src/components/settings/site/recommendations/IncomingRecommendationList.tsx
View file

@ -9,6 +9,7 @@ import useRouting from '../../../../hooks/useRouting';
import {IncomingRecommendation} from '../../../../api/recommendations'; import {IncomingRecommendation} from '../../../../api/recommendations';
import {PaginationData} from '../../../../hooks/usePagination'; import {PaginationData} from '../../../../hooks/usePagination';
import {ReferrerHistoryItem} from '../../../../api/referrers'; import {ReferrerHistoryItem} from '../../../../api/referrers';
import {numberWithCommas} from '../../../../utils/helpers';
interface IncomingRecommendationListProps { interface IncomingRecommendationListProps {
incomingRecommendations: IncomingRecommendation[], incomingRecommendations: IncomingRecommendation[],
@ -67,10 +68,19 @@ const IncomingRecommendationItem: React.FC<{incomingRecommendation: IncomingReco
</div> </div>
</div> </div>
</TableCell> </TableCell>
<TableCell className='hidden align-middle md:!visible md:!table-cell' onClick={showDetails}>
{signups === 0 ? <span className="text-grey-500">-</span> : (<div className='-mt-px flex grow items-end gap-1'><span>{signups}</span><span className='-mb-px whitespace-nowrap text-sm lowercase text-grey-700'>{freeMembersLabel}</span></div>)} <TableCell className='hidden !pr-1 pl-0 text-right align-middle md:!visible md:!table-cell' onClick={showDetails}>
{(signups === 0) ? (<span className="text-grey-500 dark:text-grey-900">-</span>) : (<div className='-mt-px text-right'>
<span className='text-right'>{numberWithCommas(signups)}</span>
</div>)}
</TableCell> </TableCell>
{incomingRecommendation.recommending_back && <TableCell className='group-hover/table-row:visible md:invisible'><div className='mt-1 whitespace-nowrap text-right text-sm leading-[1.8] text-grey-700'>Recommending back</div></TableCell>} <TableCell className='hidden align-middle md:!visible md:!table-cell' onClick={showDetails}>
{(signups === 0) ? (null) : (<div className='-mt-px text-left'>
<span className='-mb-px inline-block min-w-[60px] whitespace-nowrap text-left text-sm lowercase text-grey-700'>{freeMembersLabel}</span>
</div>)}
</TableCell>
{incomingRecommendation.recommending_back && <TableCell className='group-hover/table-row:visible md:invisible'><div className='mt-1 whitespace-nowrap text-right text-sm text-grey-700'>Recommending back</div></TableCell>}
</TableRow> </TableRow>
); );
}; };

22
apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
View file

@ -1,19 +1,19 @@
import Button from '../../../../admin-x-ds/global/Button';
import EditRecommendationModal from './EditRecommendationModal';
import Link from '../../../../admin-x-ds/global/Link';
import NiceModal from '@ebay/nice-modal-react';
import NoValueLabel from '../../../../admin-x-ds/global/NoValueLabel'; import NoValueLabel from '../../../../admin-x-ds/global/NoValueLabel';
import React, {useState} from 'react'; import React, {useState} from 'react';
import RecommendationIcon from './RecommendationIcon'; import RecommendationIcon from './RecommendationIcon';
import Table, {ShowMoreData} from '../../../../admin-x-ds/global/Table'; import Table, {ShowMoreData} from '../../../../admin-x-ds/global/Table';
import TableCell from '../../../../admin-x-ds/global/TableCell'; import TableCell from '../../../../admin-x-ds/global/TableCell';
// import TableHead from '../../../../admin-x-ds/global/TableHead';
import Button from '../../../../admin-x-ds/global/Button';
import EditRecommendationModal from './EditRecommendationModal';
import Link from '../../../../admin-x-ds/global/Link';
import NiceModal from '@ebay/nice-modal-react';
import TableRow from '../../../../admin-x-ds/global/TableRow'; import TableRow from '../../../../admin-x-ds/global/TableRow';
import Tooltip from '../../../../admin-x-ds/global/Tooltip'; import Tooltip from '../../../../admin-x-ds/global/Tooltip';
import useRouting from '../../../../hooks/useRouting'; import useRouting from '../../../../hooks/useRouting';
import useSettingGroup from '../../../../hooks/useSettingGroup'; import useSettingGroup from '../../../../hooks/useSettingGroup';
import {PaginationData} from '../../../../hooks/usePagination'; import {PaginationData} from '../../../../hooks/usePagination';
import {Recommendation} from '../../../../api/recommendations'; import {Recommendation} from '../../../../api/recommendations';
import {numberWithCommas} from '../../../../utils/helpers';
interface RecommendationListProps { interface RecommendationListProps {
recommendations: Recommendation[], recommendations: Recommendation[],
@ -53,10 +53,14 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
</div> </div>
</div> </div>
</TableCell> </TableCell>
<TableCell className='hidden w-8 align-middle md:!visible md:!table-cell' onClick={showDetails}> <TableCell className='hidden !pr-1 pl-0 text-right align-middle md:!visible md:!table-cell' onClick={showDetails}>
{(count === 0) ? (<span className="text-grey-500 dark:text-grey-900">-</span>) : (<div className='-mt-px flex grow items-end gap-1'> {(count === 0) ? (<span className="text-grey-500 dark:text-grey-900">-</span>) : (<div className='-mt-px items-end gap-1 text-right'>
<span>{count}</span> <span className='text-right'>{numberWithCommas(count)}</span>
<span className='-mb-px whitespace-nowrap text-sm lowercase text-grey-700'>{showSubscribers ? newMembers : clicks}</span> </div>)}
</TableCell>
<TableCell className='hidden align-middle md:!visible md:!table-cell' onClick={showDetails}>
{(count === 0) ? (null) : (<div className='-mt-px items-end gap-1 text-left'>
<span className='-mb-px inline-block min-w-[60px] whitespace-nowrap text-left text-sm lowercase text-grey-700'>{showSubscribers ? newMembers : clicks}</span>
</div>)} </div>)}
</TableCell> </TableCell>
</TableRow> </TableRow>