TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-24 19:33:02 +03:00
Code Issues Projects Releases Wiki Activity

Added "Maybe later" button to recommendations modal

Browse Source 
refs https://github.com/TryGhost/Product/issues/3824
This commit is contained in:
Djordje Vlaisavljevic 2023-09-25 15:11:26 +01:00
parent c62483c95b
commit 21bdd38b37
1 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/portal/src/components/pages/RecommendationsPage.js
View File

@ -10,6 +10,11 @@ import {ReactComponent as CheckmarkIcon} from '../../images/icons/check-circle.s
import {getRefDomain} from '../../utils/helpers'; import {getRefDomain} from '../../utils/helpers';
export const RecommendationsPageStyles = ` export const RecommendationsPageStyles = `
.gh-portal-recommendations-header .gh-portal-main-title {
padding: 0 32px;
text-wrap: balance;
}
.gh-portal-recommendation-item { .gh-portal-recommendation-item {
min-height: 38px; min-height: 38px;
} }
@ -126,6 +131,14 @@ export const RecommendationsPageStyles = `
.gh-portal-recommendation-item-action { .gh-portal-recommendation-item-action {
min-height: 28px; min-height: 28px;
} }
.gh-portal-popup-container.recommendations .gh-portal-action-footer
.gh-portal-btn-recommendations-later {
margin: 8px auto 24px;
color: var(--grey6);
font-weight: 400;
}
`; `;
// Fisher-Yates shuffle // Fisher-Yates shuffle
@ -153,7 +166,7 @@ const RecommendationIcon = ({title, favicon, featuredImage}) => {
}; };
if (!icon) { if (!icon) {
return null; return <div className="gh-portal-recommendation-item-favicon"></div>;
} }
return (<img className="gh-portal-recommendation-item-favicon" src={icon} alt={title} onError={hideIcon} />); return (<img className="gh-portal-recommendation-item-favicon" src={icon} alt={title} onError={hideIcon} />);
@ -303,7 +316,7 @@ const RecommendationsPage = () => {
}, []); }, []);
const heading = pageData && pageData.signup ? t('Welcome to {{siteTitle}}', {siteTitle: title, interpolation: {escapeValue: false}}) : t('Recommendations'); const heading = pageData && pageData.signup ? t('Welcome to {{siteTitle}}', {siteTitle: title, interpolation: {escapeValue: false}}) : t('Recommendations');
const subheading = pageData && pageData.signup ? t('Thanks for subscribing. Here are a few other sites you may enjoy. ') : t('Here are a few other sites you may enjoy.'); const subheading = pageData && pageData.signup ? t('Thank you for subscribing. Before you start reading, below are a few other sites you may enjoy.') : t('Here are a few other sites you may enjoy.');
if (!recommendationsEnabled) { if (!recommendationsEnabled) {
return null; return null;
@ -328,11 +341,14 @@ const RecommendationsPage = () => {
))} ))}
</div> </div>
{numToShow < recommendations.length && ( {((numToShow < recommendations.length) || (pageData && pageData.signup)) && (
<footer className='gh-portal-action-footer'> <footer className='gh-portal-action-footer'>
<button className='gh-portal-btn gh-portal-center' style={{width: '100%'}} onClick={showAllRecommendations}> {(numToShow < recommendations.length) && <button className='gh-portal-btn gh-portal-center' style={{width: '100%'}} onClick={showAllRecommendations}>
<span>{t('Show all')}</span> <span>{t('Show all')}</span>
</button> </button>}
{(pageData && pageData.signup) && <button className='gh-portal-btn gh-portal-center gh-portal-btn-link gh-portal-btn-recommendations-later' style={{width: '100%'}} onClick={showAllRecommendations}>
<span>{t('Maybe later')}</span>
</button>}
</footer> </footer>
)} )}
</div> </div>