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

Updated recommendations settings design (#17957)

Browse Source 
refs https://github.com/TryGhost/Product/issues/3786, https://github.com/TryGhost/Product/issues/3773

- Moved Recommendations under Memberships section in settings sidebar
- Updated design for recommendations to work better with small favicons
This commit is contained in:
Djordje Vlaisavljevic 2023-09-04 16:21:37 +01:00 committed by GitHub
parent 8ba5470c5e
commit cd4fa044c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/admin-x-settings/src/components/Sidebar.tsx
View File

@ -46,7 +46,6 @@ const Sidebar: React.FC = () => {
{/* <SettingNavItem navid='theme' title="Theme" onClick={handleSectionClick} /> */}
<SettingNavItem navid='design' title="Branding and design" onClick={handleSectionClick} />
<SettingNavItem navid='navigation' title="Navigation" onClick={handleSectionClick} />
{hasRecommendations && <SettingNavItem navid='recommendations' title="Recommendations" onClick={handleSectionClick} />}
</SettingNavSection>
<SettingNavSection title="Membership">
@ -55,6 +54,7 @@ const Sidebar: React.FC = () => {
<SettingNavItem navid='tiers' title="Tiers" onClick={handleSectionClick} />
{hasTipsAndDonations && <SettingNavItem navid='tips-or-donations' title="Tips or donations" onClick={handleSectionClick} />}
<SettingNavItem navid='analytics' title="Analytics" onClick={handleSectionClick} />
{hasRecommendations && <SettingNavItem navid='recommendations' title="Recommendations" onClick={handleSectionClick} />}
</SettingNavSection>
<SettingNavSection title="Email newsletters">

9
apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
View File

@ -1,4 +1,3 @@
import Avatar from '../../../../admin-x-ds/global/Avatar';
import Button from '../../../../admin-x-ds/global/Button';
import ConfirmationModal from '../../../../admin-x-ds/global/modal/ConfirmationModal';
import NiceModal from '@ebay/nice-modal-react';
@ -42,10 +41,12 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
<TableRow action={action} hideActions>
<TableCell onClick={showDetails}>
<div className='group flex items-center gap-3 hover:cursor-pointer'>
{recommendation.favicon && <Avatar image={recommendation.favicon} labelColor='white' />}
<div className={`flex grow flex-col`}>
<span className='mb-0.5 font-medium'>{recommendation.title}</span>
<span className='text-xs leading-snug text-grey-700'>{recommendation.reason || 'No reason'}</span>
<div className="mb-1 flex items-center gap-2">
{recommendation.favicon && <img alt={recommendation.title} className="h-5 w-5 rounded-sm" src={recommendation.favicon} />}
<span className='line-clamp-1'>{recommendation.title}</span>
</div>
<span className='line-clamp-1 text-xs leading-snug text-grey-700'>{recommendation.reason || 'No reason added'}</span>
</div>
</div>
</TableCell>

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

@ -1,4 +1,3 @@
import Avatar from '../../../../admin-x-ds/global/Avatar';
import Form from '../../../../admin-x-ds/global/form/Form';
import Heading from '../../../../admin-x-ds/global/Heading';
import React from 'react';
@ -20,14 +19,15 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
>
<div>
<Heading className='mb-2 block text-2xs font-semibold uppercase tracking-wider text-grey-700'>Preview</Heading>
<a className='flex items-center gap-3 rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
{(formState.favicon || formState.featured_image) && <Avatar image={formState.favicon ?? formState.featured_image!} labelColor='white' />}
<div className={`flex grow flex-col`}>
<span className='word-wrap mb-0.5 font-medium'>{formState.title}</span>
<span className='word-wrap text-xs leading-snug text-grey-700'>{formState.url}</span>
<a className='flex flex-col rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
<div className="mb-1 flex items-center gap-2">
{(formState.favicon || formState.featured_image) && <img alt={formState.title} className="h-5 w-5 rounded-sm" src={formState.favicon ?? formState.featured_image!} />}
<span className='line-clamp-1 font-medium'>{formState.title}</span>
</div>
<span className='line-clamp-1 text-xs leading-snug text-grey-700'>{formState.url}</span>
</a>
</div>
<TextField
error={Boolean(errors.title)}
hint={errors.title}