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

Updated recommendations portal modal design

Browse source 
refs https://github.com/TryGhost/Product/issues/3898
This commit is contained in:
Djordje Vlaisavljevic 2023-09-21 16:11:45 +01:00
parent f98467611c
commit 006d902116
1 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
apps/portal/src/components/pages/RecommendationsPage.js
View file

@ -21,7 +21,7 @@ export const RecommendationsPageStyles = `
.gh-portal-recommendation-item-header { .gh-portal-recommendation-item-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
cursor: pointer; cursor: pointer;
} }
@ -48,9 +48,10 @@ export const RecommendationsPageStyles = `
.gh-portal-recommendation-item .gh-portal-recommendation-description-container p { .gh-portal-recommendation-item .gh-portal-recommendation-description-container p {
font-size: 1.35rem; font-size: 1.35rem;
padding-left: 28px; padding-left: 30px;
font-weight: 400; font-weight: 400;
letter-spacing: 0.1px; letter-spacing: 0.1px;
margin-top: 4px;
} }
.gh-portal-recommendation-description-hidden { .gh-portal-recommendation-description-hidden {
@ -82,23 +83,28 @@ export const RecommendationsPageStyles = `
opacity: 0.8; opacity: 0.8;
} }
.gh-portal-recommendation-item .gh-portal-btn-list {
height: 28px;
}
.gh-portal-recommendation-subscribed { .gh-portal-recommendation-subscribed {
display: flex; display: flex;
padding-left: 30px;
align-items: center; align-items: center;
gap: 6px; gap: 4px;
font-size: 1.5rem; font-size: 1.35rem;
letter-spacing: 0.3px; font-weight: 400;
letter-spacing: 0.1px;
line-height: 1.3em; line-height: 1.3em;
animation: 0.5s ease-in-out fadeIn; animation: 0.5s ease-in-out fadeIn;
} }
.gh-portal-recommendation-subscribed.with-reason { .gh-portal-recommendation-subscribed.with-reason {
position: absolute; position: absolute;
margin-top: 5px;
} }
.gh-portal-recommendation-subscribed.without-reason { .gh-portal-recommendation-subscribed.without-reason {
margin-top: 10px; margin-top: 5px;
} }
.gh-portal-recommendation-subscribed span { .gh-portal-recommendation-subscribed span {
@ -106,7 +112,9 @@ export const RecommendationsPageStyles = `
} }
.gh-portal-recommendation-checkmark-icon { .gh-portal-recommendation-checkmark-icon {
height: 20px; height: 16px;
width: 16px;
padding: 0 2px;
color: #30cf43; color: #30cf43;
} }
@ -114,6 +122,10 @@ export const RecommendationsPageStyles = `
position: relative !important; position: relative !important;
height: 24px; height: 24px;
} }
.gh-portal-recommendation-item-action {
min-height: 28px;
}
`; `;
// Fisher-Yates shuffle // Fisher-Yates shuffle
@ -238,11 +250,11 @@ const RecommendationItem = (recommendation) => {
<ArrowIcon className="gh-portal-recommendation-arrow-icon" /> <ArrowIcon className="gh-portal-recommendation-arrow-icon" />
</div> </div>
<div className="gh-portal-recommendation-description-container"> <div className="gh-portal-recommendation-description-container">
{subscribed && <div className={'gh-portal-recommendation-subscribed ' + (reason ? 'with-reason' : 'without-reason')}><CheckmarkIcon className="gh-portal-recommendation-checkmark-icon" alt=''/><span>{t('Verification link sent, check your inbox')}</span></div>} {subscribed && <div className={'gh-portal-recommendation-subscribed ' + (reason ? 'with-reason' : 'without-reason')}><span>{t('Verification link sent, check your inbox')}</span><CheckmarkIcon className="gh-portal-recommendation-checkmark-icon" alt=''/></div>}
{reason && <p className={subscribed ? 'gh-portal-recommendation-description-hidden' : ''}>{reason}</p>} {reason && <p className={subscribed ? 'gh-portal-recommendation-description-hidden' : ''}>{reason}</p>}
</div> </div>
</div> </div>
<div> <div className="gh-portal-recommendation-item-action">
{!subscribed && loading && <span className='gh-portal-recommendations-loading-container'><LoaderIcon className={'gh-portal-loadingicon dark'} /></span>} {!subscribed && loading && <span className='gh-portal-recommendations-loading-container'><LoaderIcon className={'gh-portal-loadingicon dark'} /></span>}
{!subscribed && !loading && allowOneClickSubscribe && <button type="button" className="gh-portal-btn gh-portal-btn-list" onClick={clickHandler}>{t('Subscribe')}</button>} {!subscribed && !loading && allowOneClickSubscribe && <button type="button" className="gh-portal-btn gh-portal-btn-list" onClick={clickHandler}>{t('Subscribe')}</button>}
</div> </div>