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 mobile styles for the offers in AdminX

Browse source
This commit is contained in:
Sodbileg Gansukh 2023-11-27 14:11:57 +08:00
parent b4ee76af5e
commit b111b7c719
2 changed files with 38 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/admin-x-settings/src/components/settings/growth/Offers.tsx
View file

@ -12,7 +12,7 @@ import {useRouting} from '@tryghost/admin-x-framework/routing';
const OfferContainer: React.FC<{offerTitle: string, tier: Tier, cadence: string, redemptions: number, type: string, amount: number, currency: string, offerId: string, offerCode: string, goToOfferEdit: (offerId: string) => void}> = (
{offerTitle, tier, cadence, redemptions, type, amount, currency, offerId, offerCode, goToOfferEdit}) => {
const {discountColor, discountOffer} = getOfferDiscount(type, amount, cadence, currency || 'USD', tier);
return <div className='group flex aspect-square cursor-pointer flex-col justify-between break-words rounded-sm border border-transparent bg-grey-100 p-5 transition-all hover:border-grey-100 hover:bg-grey-75 hover:shadow-sm dark:bg-grey-950 dark:hover:border-grey-800' onClick={() => goToOfferEdit(offerId)}>
return <div className='group flex h-full cursor-pointer flex-col justify-between gap-4 break-words rounded-sm border border-transparent bg-grey-100 p-5 transition-all hover:border-grey-100 hover:bg-grey-75 hover:shadow-sm dark:bg-grey-950 dark:hover:border-grey-800 min-[900px]:min-h-[187px]' onClick={() => goToOfferEdit(offerId)}>
<span className='text-[1.65rem] font-bold leading-tight tracking-tight'>{offerTitle}</span>
<div className='flex flex-col'>
<span className={`text-sm font-semibold uppercase ${discountColor}`}>{discountOffer}</span>
@ -65,7 +65,7 @@ const Offers: React.FC<{ keywords: string[] }> = ({keywords}) => {
title='Offers'
>
<div>
<div className='grid grid-cols-3 gap-4'>
<div className='grid grid-cols-1 gap-4 min-[900px]:grid-cols-3'>
{
latestThree.map((offer) => {
const offerTier = paidActiveTiers.find(tier => tier.id === offer?.tier.id);

70
apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
View file

@ -183,7 +183,7 @@ export const OffersIndexModal = () => {
}
});
const cardLayoutOutput = <div className='mt-8 grid grid-cols-3 gap-6'>
const cardLayoutOutput = <div className='mt-8 grid grid-cols-1 gap-6 min-[600px]:grid-cols-2 min-[900px]:grid-cols-3'>
{sortedOffers.filter((offer) => {
const offerTier = allTiers?.find(tier => tier.id === offer?.tier.id);
//Check to filter out offers with archived offerTier
@ -215,43 +215,45 @@ export const OffersIndexModal = () => {
})}
</div>;
const listLayoutOutput = <table className='m-0 w-full'>
<tr className='border-b border-b-grey-300'>
<th className='px-5 py-2.5 pl-0 text-xs font-normal text-grey-700'>{sortedOffers.length} {sortedOffers.length > 1 ? 'offers' : 'offer'}</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Tier</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Terms</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Price</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Redemptions</th>
<th className='min-w-[80px] px-5 py-2.5 pr-0 text-xs font-normal text-grey-700'></th>
</tr>
{sortedOffers.filter((offer) => {
const offerTier = allTiers?.find(tier => tier.id === offer?.tier.id);
//Check to filter out offers with archived offerTier
return (selectedTab === 'active' && (offer.status === 'active' && offerTier && offerTier.active === true)) ||
(selectedTab === 'archived' && (offer.status === 'archived' || (offerTier && offerTier.active === false)));
}).map((offer) => {
const offerTier = allTiers?.find(tier => tier.id === offer?.tier.id);
const listLayoutOutput = <div className='overflow-x-auto'>
<table className='m-0 w-full'>
<tr className='border-b border-b-grey-300'>
<th className='px-5 py-2.5 pl-0 text-xs font-normal text-grey-700'>{sortedOffers.length} {sortedOffers.length > 1 ? 'offers' : 'offer'}</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Tier</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Terms</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Price</th>
<th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Redemptions</th>
<th className='min-w-[80px] px-5 py-2.5 pr-0 text-xs font-normal text-grey-700'></th>
</tr>
{sortedOffers.filter((offer) => {
const offerTier = allTiers?.find(tier => tier.id === offer?.tier.id);
//Check to filter out offers with archived offerTier
return (selectedTab === 'active' && (offer.status === 'active' && offerTier && offerTier.active === true)) ||
(selectedTab === 'archived' && (offer.status === 'archived' || (offerTier && offerTier.active === false)));
}).map((offer) => {
const offerTier = allTiers?.find(tier => tier.id === offer?.tier.id);
if (!offerTier) {
return null;
}
if (!offerTier) {
return null;
}
const isTierArchived = offerTier?.active === false;
const isTierArchived = offerTier?.active === false;
const {discountColor, discountOffer, originalPriceWithCurrency, updatedPriceWithCurrency} = getOfferDiscount(offer.type, offer.amount, offer.cadence, offer.currency || 'USD', offerTier);
const {discountColor, discountOffer, originalPriceWithCurrency, updatedPriceWithCurrency} = getOfferDiscount(offer.type, offer.amount, offer.cadence, offer.currency || 'USD', offerTier);
return (
<tr className={`group ${isTierArchived ? 'opacity-50' : ''} ${isTierArchived ? 'pointer-events-none' : ''} border-b border-b-grey-200`}>
<td className='p-0 font-semibold'><a className='block cursor-pointer p-5 pl-0' onClick={() => handleOfferEdit(offer?.id ? offer.id : '')}>{offer?.name}</a></td>
<td className='p-0 text-sm'><a className='block cursor-pointer p-5' onClick={() => handleOfferEdit(offer?.id ? offer.id : '')}>{offerTier.name} {getOfferCadence(offer.cadence)}</a></td>
<td className='p-0 text-sm'><a className='block cursor-pointer p-5' onClick={() => handleOfferEdit(offer?.id ? offer.id : '')}><span className={`font-semibold uppercase ${discountColor}`}>{discountOffer}</span> — {getOfferDuration(offer.duration)}</a></td>
<td className='p-0 text-sm'><a className='block cursor-pointer p-5' onClick={() => handleOfferEdit(offer?.id ? offer.id : '')}>{updatedPriceWithCurrency} <span className='text-grey-700 line-through'>{originalPriceWithCurrency}</span></a></td>
<td className='p-0 text-sm'><a className='block cursor-pointer p-5 hover:underline' href={createRedemptionFilterUrl(offer.id ? offer.id : '')}>{offer.redemption_count}</a></td>
<td className='min-w-[80px] p-5 pr-0 text-right text-sm leading-none'><CopyLinkButton offerCode={offer.code} /></td>
</tr>
);
})}
</table>;
return (
<tr className={`group ${isTierArchived ? 'opacity-50' : ''} ${isTierArchived ? 'pointer-events-none' : ''} border-b border-b-grey-200`}>
<td className='min-w-[200px] p-0 font-semibold'><a className='block cursor-pointer p-5 pl-0' onClick={() => handleOfferEdit(offer?.id ? offer.id : '')}>{offer?.name}</a></td>
<td className='whitespace-nowrap p-0 text-sm'><a className='block cursor-pointer p-5' onClick={() => handleOfferEdit(offer?.id ? offer.id : '')}>{offerTier.name} {getOfferCadence(offer.cadence)}</a></td>
<td className='whitespace-nowrap p-0 text-sm'><a className='block cursor-pointer p-5' onClick={() => handleOfferEdit(offer?.id ? offer.id : '')}><span className={`font-semibold uppercase ${discountColor}`}>{discountOffer}</span> — {getOfferDuration(offer.duration)}</a></td>
<td className='whitespace-nowrap p-0 text-sm'><a className='block cursor-pointer p-5' onClick={() => handleOfferEdit(offer?.id ? offer.id : '')}>{updatedPriceWithCurrency} <span className='text-grey-700 line-through'>{originalPriceWithCurrency}</span></a></td>
<td className='whitespace-nowrap p-0 text-sm'><a className='block cursor-pointer p-5 hover:underline' href={createRedemptionFilterUrl(offer.id ? offer.id : '')}>{offer.redemption_count}</a></td>
<td className='min-w-[80px] whitespace-nowrap p-5 pr-0 text-right text-sm leading-none'><CopyLinkButton offerCode={offer.code} /></td>
</tr>
);
})}
</table>
</div>;
return <Modal
afterClose={() => {