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

Updated recommendations design (#18614)

Browse source 
refs https://github.com/TryGhost/Product/issues/4024, https://github.com/TryGhost/Product/issues/3938

- Improved email notification template
- Added `for you` next to the click/subscribe stats

---------

Co-authored-by: Sag <guptazy@gmail.com>
This commit is contained in:
Djordje Vlaisavljevic 2023-10-16 18:04:15 +01:00 • committed by GitHub
parent af29aef5c5
commit 08f81dbf90
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -39,7 +39,7 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
const isGhostSite = recommendation.one_click_subscribe;
const showSubscribers = isGhostSite && !!recommendation.count?.subscribers;
const count = (showSubscribers ? recommendation.count?.subscribers : recommendation.count?.clicks) || 0;
const newMembers = count === 1 ? 'new member' : 'new members';
const newMembers = count === 1 ? 'signup' : 'signups';
const clicks = count === 1 ? 'click' : 'clicks';
return (
@ -60,8 +60,8 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
</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>
{(count === 0) ? (null) : (<div className=''>
<span className='min-w-[60px] whitespace-nowrap text-left text-sm lowercase text-grey-700'>{showSubscribers ? newMembers : clicks}</span><span className='whitespace-nowrap text-left text-sm lowercase text-grey-700 opacity-0 transition-opacity group-hover/table-row:opacity-100'> from you</span>
</div>)}
</TableCell>
</TableRow>

12
ghost/core/test/e2e-server/services/__snapshots__/recommendation-emails.test.js.snap
View file

@ -135,11 +135,11 @@ exports[`Incoming Recommendation Emails Sends a different email if we receive a
<figure style=\\"margin:0 0 1.5em;padding:0;width:100%;\\">
<a style=\\"display:flex;min-height:110px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;background:#F9F9FA;border-radius:3px;border:1px solid #F9F9FA;color:#15171a;text-decoration:none\\" href=\\"https://www.otherghostsite.com/\\">
<div style=\\"display:inline-block; width:100%; padding:20px\\">
<div style=\\"display:flex;color:#15212a;font-size:13px;font-weight:400\\">
<div style=\\"color:#15212a;font-size:13px;font-weight:400\\">
<div style=\\"color:#15212a;font-size:16px;line-height:1.3em;font-weight:600\\">Other Ghost Site</div>
</div>
<div class=\\"kg-bookmark-description\\" style=\\"display:-webkit-box;overflow-y:hidden;margin-top:12px;max-height:40px;color:#738a94;font-size:13px;line-height:1.5em;font-weight:400;-webkit-line-clamp: 2; -webkit-box-orient: vertical;\\"></div>
<div class=\\"kg-bookmark-description\\" style=\\"display:-webkit-box;overflow-y:hidden;margin-top:6px;max-height:40px;color:#738a94;font-size:13px;line-height:1.5em;font-weight:400;-webkit-line-clamp: 2; -webkit-box-orient: vertical;\\"></div>
</div>
</a>
</figure>
@ -374,11 +374,11 @@ exports[`Incoming Recommendation Emails Sends an email if we receive a recommend
<figure style=\\"margin:0 0 1.5em;padding:0;width:100%;\\">
<a style=\\"display:flex;min-height:110px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;background:#F9F9FA;border-radius:3px;border:1px solid #F9F9FA;color:#15171a;text-decoration:none\\" href=\\"https://www.otherghostsite.com/\\">
<div style=\\"display:inline-block; width:100%; padding:20px\\">
<div style=\\"display:flex;color:#15212a;font-size:13px;font-weight:400\\">
<div style=\\"color:#15212a;font-size:13px;font-weight:400\\">
<div style=\\"color:#15212a;font-size:16px;line-height:1.3em;font-weight:600\\">Other Ghost Site</div>
</div>
<div class=\\"kg-bookmark-description\\" style=\\"display:-webkit-box;overflow-y:hidden;margin-top:12px;max-height:40px;color:#738a94;font-size:13px;line-height:1.5em;font-weight:400;-webkit-line-clamp: 2; -webkit-box-orient: vertical;\\"></div>
<div class=\\"kg-bookmark-description\\" style=\\"display:-webkit-box;overflow-y:hidden;margin-top:6px;max-height:40px;color:#738a94;font-size:13px;line-height:1.5em;font-weight:400;-webkit-line-clamp: 2; -webkit-box-orient: vertical;\\"></div>
</div>
</a>
</figure>
@ -595,11 +595,11 @@ exports[`Incoming Recommendation Emails Sends an email if we receive a recommend
<figure style=\\"margin:0 0 1.5em;padding:0;width:100%;\\">
<a style=\\"display:flex;min-height:110px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;background:#F9F9FA;border-radius:3px;border:1px solid #F9F9FA;color:#15171a;text-decoration:none\\" href=\\"https://www.otherghostsite.com/\\">
<div style=\\"display:inline-block; width:100%; padding:20px\\">
<div style=\\"display:flex;color:#15212a;font-size:13px;font-weight:400\\">
<div style=\\"color:#15212a;font-size:13px;font-weight:400\\">
<div style=\\"color:#15212a;font-size:16px;line-height:1.3em;font-weight:600\\">Other Ghost Site</div>
</div>
<div class=\\"kg-bookmark-description\\" style=\\"display:-webkit-box;overflow-y:hidden;margin-top:12px;max-height:40px;color:#738a94;font-size:13px;line-height:1.5em;font-weight:400;-webkit-line-clamp: 2; -webkit-box-orient: vertical;\\"></div>
<div class=\\"kg-bookmark-description\\" style=\\"display:-webkit-box;overflow-y:hidden;margin-top:6px;max-height:40px;color:#738a94;font-size:13px;line-height:1.5em;font-weight:400;-webkit-line-clamp: 2; -webkit-box-orient: vertical;\\"></div>
</div>
</a>
</figure>

6
ghost/staff-service/lib/email-templates/recommendation-received.hbs
View file

@ -36,11 +36,11 @@
<figure style="margin:0 0 1.5em;padding:0;width:100%;">
<a style="display:flex;min-height:110px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;background:#F9F9FA;border-radius:3px;border:1px solid #F9F9FA;color:#15171a;text-decoration:none" href="{{recommendation.url}}">
<div style="display:inline-block; width:100%; padding:20px">
<div style="display:flex;color:#15212a;font-size:13px;font-weight:400">
{{#if recommendation.favicon}}<img style="border:none;max-width:100%;margin-right:8px;width:20px;height:20px" src="{{recommendation.favicon}}" alt="">{{/if}}
<div style="color:#15212a;font-size:13px;font-weight:400">
{{#if recommendation.favicon}}<img style="border:none;max-width:100%;margin-right:8px;margin-bottom:8px;width:20px;height:20px" src="{{recommendation.favicon}}" alt="">{{/if}}
<div style="color:#15212a;font-size:16px;line-height:1.3em;font-weight:600">{{recommendation.title}}</div>
</div>
<div class="kg-bookmark-description" style="display:-webkit-box;overflow-y:hidden;margin-top:12px;max-height:40px;color:#738a94;font-size:13px;line-height:1.5em;font-weight:400;-webkit-line-clamp: 2; -webkit-box-orient: vertical;">{{recommendation.excerpt}}</div>
<div class="kg-bookmark-description" style="display:-webkit-box;overflow-y:hidden;margin-top:6px;max-height:40px;color:#738a94;font-size:13px;line-height:1.5em;font-weight:400;-webkit-line-clamp: 2; -webkit-box-orient: vertical;">{{recommendation.excerpt}}</div>
</div>
{{#if recommendation.featuredImage}}
<div style="min-width: 140px; max-width: 180px; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 0 2px 2px 0;background-image: url('{{recommendation.featuredImage}}')" class="new-mention-thumbnail">