TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 14:43:08 +03:00
Code Issues Projects Releases Wiki Activity

Moved Preview above the form

Browse Source 
refs https://github.com/TryGhost/Product/issues/3857
This commit is contained in:
Djordje Vlaisavljevic 2023-09-20 14:32:24 +01:00
parent 9dea3d344a
commit 1bfedcfd00
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
View File

@ -21,6 +21,21 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
marginBottom={false}
marginTop
>
<div>
<Heading className='mb-2 block text-2xs font-semibold uppercase tracking-wider' grey={true} level={6}>Preview</Heading>
<a className='flex items-center justify-between rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
<div className='flex flex-col gap-[2px]'>
<div className="flex items-center gap-2">
<RecommendationIcon {...formState} />
<span className='line-clamp-1 text-[1.6rem] font-semibold text-grey-900'>{formState.title}</span>
</div>
{formState.reason && <span className='pl-[29px] text-[1.35rem] leading-snug text-grey-700'>{formState.reason}</span>}
</div>
{formState.one_click_subscribe && <span className='flex whitespace-nowrap pl-6 text-md font-semibold text-green'>Subscribe</span>}
</a>
{formState.one_click_subscribe && <Hint>This is a Ghost site, so your readers can subscribe with just one click</Hint>}
</div>
{showURL && <URLTextField
disabled={true}
title='URL'
@ -33,21 +48,6 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
})}
/>}
<div>
<Heading className='mb-2 block text-2xs font-semibold uppercase tracking-wider' grey={true} level={6}>Preview</Heading>
<a className='flex items-center justify-between rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
<div className='flex flex-col gap-1'>
<div className="flex items-center gap-2">
<RecommendationIcon {...formState} />
<span className='line-clamp-1 text-[1.6rem] font-semibold text-grey-900'>{formState.title}</span>
</div>
{formState.reason && <span className='text-md font-medium leading-snug text-grey-700'>{formState.reason}</span>}
</div>
{formState.one_click_subscribe && <span className='flex whitespace-nowrap text-md font-semibold text-green'>Subscribe</span>}
</a>
{formState.one_click_subscribe && <Hint>This is a Ghost site, so your readers can subscribe with just one click</Hint>}
</div>
<TextField
error={Boolean(errors.title)}
hint={errors.title}
@ -59,7 +59,7 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
clearBg={true}
hint='Optional, try to keep it under 156 characters'
rows={3}
title="Description"
title="Short description"
value={formState.reason ?? ''}
onChange={e => updateForm(state => ({...state, reason: e.target.value}))}
/>