Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Portal signup page spacing fixes (#19791)

Browse source 
refs.
https://linear.app/tryghost/issue/DES-161/portal-signup-window-spacing-problem

The products section is returned even if there's only a free product in
the publication. This results in an extra, unnecessary space between the
signup form inputs and the signup button.
This commit is contained in:
Peter Zimon 2024-03-04 16:27:30 +01:00 • committed by GitHub
parent 8582462619
commit 6d6969f4b0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/portal/src/components/common/ProductsSection.js
View file

@ -947,6 +947,7 @@ function ProductsSection({onPlanSelect, products, type = null, handleChooseSignu
const activeInterval = getActiveInterval({portalPlans, portalDefaultPlan, selectedInterval}); const activeInterval = getActiveInterval({portalPlans, portalDefaultPlan, selectedInterval});
const isComplimentary = isComplimentaryMember({member}); const isComplimentary = isComplimentaryMember({member});
const hasOnlyFree = hasOnlyFreeProduct({site});
useEffect(() => { useEffect(() => {
setSelectedProduct(defaultProductId); setSelectedProduct(defaultProductId);
@ -978,6 +979,11 @@ function ProductsSection({onPlanSelect, products, type = null, handleChooseSignu
className += ' gh-portal-upgrade-product'; className += ' gh-portal-upgrade-product';
} }
// If site doesn't have paid products then don't return an empty container
if (hasOnlyFree) {
return null;
}
let finalProduct = products.find(p => p.id === selectedProduct)?.id || products.find(p => p.type === 'paid')?.id; let finalProduct = products.find(p => p.id === selectedProduct)?.id || products.find(p => p.type === 'paid')?.id;
return ( return (
<ProductsContext.Provider value={{ <ProductsContext.Provider value={{
@ -987,7 +993,7 @@ function ProductsSection({onPlanSelect, products, type = null, handleChooseSignu
}}> }}>
<section className={className}> <section className={className}>
{(!(hasOnlyFreeProduct({site})) ? {(!(hasOnlyFree) ?
<ProductPriceSwitch <ProductPriceSwitch
products={products} products={products}
selectedInterval={activeInterval} selectedInterval={activeInterval}

17
apps/portal/src/components/pages/SignupPage.js
View file

@ -153,7 +153,7 @@ footer.gh-portal-signin-footer {
.gh-portal-content.signup.single-field .gh-portal-input, .gh-portal-content.signup.single-field .gh-portal-input,
.gh-portal-content.signin .gh-portal-input { .gh-portal-content.signin .gh-portal-input {
margin-bottom: 8px; margin-bottom: 12px;
} }
.gh-portal-content.signup.single-field + .gh-portal-signup-footer, .gh-portal-content.signup.single-field + .gh-portal-signup-footer,
@ -204,11 +204,19 @@ footer.gh-portal-signup-footer.invite-only .gh-portal-signup-message {
.gh-portal-signup-terms-wrapper { .gh-portal-signup-terms-wrapper {
width: 100%; width: 100%;
max-width: 420px; max-width: 420px;
margin: -16px auto 36px; margin: 0 auto;
} }
.gh-portal-signup-terms-wrapper.free-only { .signup.single-field .gh-portal-signup-terms-wrapper {
margin: 0 auto; margin-top: -16px;
}
.gh-portal-signup-terms {
margin: -16px 0 36px;
}
.gh-portal-signup-terms-wrapper.free-only .gh-portal-signup-terms {
margin: -16px 0 0;
} }
.gh-portal-products + .gh-portal-signup-terms-wrapper.free-only { .gh-portal-products + .gh-portal-signup-terms-wrapper.free-only {
@ -499,6 +507,7 @@ class SignupPage extends React.Component {
renderSignupTerms() { renderSignupTerms() {
const {site} = this.context; const {site} = this.context;
if (site.portal_signup_terms_html === null || site.portal_signup_terms_html === '') { if (site.portal_signup_terms_html === null || site.portal_signup_terms_html === '') {
return null; return null;
} }