Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -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 {
display: flex;
align-items: center;
gap: 8px;
gap: 10px;
cursor: pointer;
}
@ -48,9 +48,10 @@ export const RecommendationsPageStyles = `
.gh-portal-recommendation-item .gh-portal-recommendation-description-container p {
font-size: 1.35rem;
padding-left: 28px;
padding-left: 30px;
font-weight: 400;
letter-spacing: 0.1px;
margin-top: 4px;
}
.gh-portal-recommendation-description-hidden {
@ -82,23 +83,28 @@ export const RecommendationsPageStyles = `
opacity: 0.8;
}
.gh-portal-recommendation-item .gh-portal-btn-list {
height: 28px;
}
.gh-portal-recommendation-subscribed {
display: flex;
padding-left: 30px;
align-items: center;
gap: 6px;
font-size: 1.5rem;
letter-spacing: 0.3px;
gap: 4px;
font-size: 1.35rem;
font-weight: 400;
letter-spacing: 0.1px;
line-height: 1.3em;
animation: 0.5s ease-in-out fadeIn;
}
.gh-portal-recommendation-subscribed.with-reason {
position: absolute;
margin-top: 5px;
}
.gh-portal-recommendation-subscribed.without-reason {
margin-top: 10px;
margin-top: 5px;
}
.gh-portal-recommendation-subscribed span {
@ -106,7 +112,9 @@ export const RecommendationsPageStyles = `
}
.gh-portal-recommendation-checkmark-icon {
height: 20px;
height: 16px;
width: 16px;
padding: 0 2px;
color: #30cf43;
}
@ -114,6 +122,10 @@ export const RecommendationsPageStyles = `
position: relative !important;
height: 24px;
}
.gh-portal-recommendation-item-action {
min-height: 28px;
}
`;
// Fisher-Yates shuffle
@ -238,11 +250,11 @@ const RecommendationItem = (recommendation) => {
<ArrowIcon className="gh-portal-recommendation-arrow-icon" />
</div>
<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>}
</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 && allowOneClickSubscribe && <button type="button" className="gh-portal-btn gh-portal-btn-list" onClick={clickHandler}>{t('Subscribe')}</button>}
</div>