OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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 isComplimentary = isComplimentaryMember({member});
const hasOnlyFree = hasOnlyFreeProduct({site});
useEffect(() => {
setSelectedProduct(defaultProductId);
@ -978,6 +979,11 @@ function ProductsSection({onPlanSelect, products, type = null, handleChooseSignu
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;
return (
<ProductsContext.Provider value={{
@ -987,7 +993,7 @@ function ProductsSection({onPlanSelect, products, type = null, handleChooseSignu
}}>
<section className={className}>
{(!(hasOnlyFreeProduct({site})) ?
{(!(hasOnlyFree) ?
<ProductPriceSwitch
products={products}
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.signin .gh-portal-input {
margin-bottom: 8px;
margin-bottom: 12px;
}
.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 {
width: 100%;
max-width: 420px;
margin: -16px auto 36px;
margin: 0 auto;
}
.gh-portal-signup-terms-wrapper.free-only {
margin: 0 auto;
.signup.single-field .gh-portal-signup-terms-wrapper {
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 {
@ -499,6 +507,7 @@ class SignupPage extends React.Component {
renderSignupTerms() {
const {site} = this.context;
if (site.portal_signup_terms_html === null || site.portal_signup_terms_html === '') {
return null;
}