Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Refined change plan

Browse source
This commit is contained in:
Peter Zimon 2021-06-29 15:17:54 +02:00
parent e636542aa7
commit 0d82697542
3 changed files with 38 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/portal/src/App.js
View file

@ -19,7 +19,7 @@ const DEV_MODE_DATA = {
showPopup: true, showPopup: true,
site: Fixtures.site, site: Fixtures.site,
member: Fixtures.member.paid, member: Fixtures.member.paid,
page: 'accountHome' page: 'signup'
}; };
function SentryErrorBoundary({site, children}) { function SentryErrorBoundary({site, children}) {

11
ghost/portal/src/components/common/PlansSection.js
View file

@ -364,8 +364,12 @@ export const PlanSectionStyles = `
} }
.gh-portal-plans-container.has-multiple-products.is-change-plan { .gh-portal-plans-container.has-multiple-products.is-change-plan {
border-top-left-radius: 0; border-radius: 0 0 5px 5px;
border-top-right-radius: 0; border-top: none;
}
.gh-portal-plans-container.has-multiple-products.is-change-plan .gh-portal-plan-section {
min-height: 90px;
} }
.gh-portal-plan-product { .gh-portal-plan-product {
@ -387,7 +391,7 @@ export const PlanSectionStyles = `
border-bottom: 1px solid var(--grey12); border-bottom: 1px solid var(--grey12);
} }
.gh-portal-accountplans-main .gh-portal-plan-section:hover { .gh-portal-accountplans-main .gh-portal-plan-section:hover:not(.checked) {
background: var(--grey14); background: var(--grey14);
} }
@ -628,7 +632,6 @@ export function SingleProductPlansSection({product, plans, selectedPlan, onPlanS
return ( return (
<section className="gh-portal-plans"> <section className="gh-portal-plans">
<label className='gh-portal-input-label'>{site.title} membership</label>
<div className={className}> <div className={className}>
<PlanOptions plans={plans} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} changePlan={changePlan} /> <PlanOptions plans={plans} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} changePlan={changePlan} />
</div> </div>

36
ghost/portal/src/components/common/ProductsSection.js
View file

@ -126,7 +126,7 @@ export const ProductsSectionStyles = ({site}) => {
} }
.gh-portal-product-name { .gh-portal-product-name {
font-size: 1.2rem; font-size: 1.3rem;
font-weight: 500; font-weight: 500;
line-height: 1.45em; line-height: 1.45em;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@ -136,6 +136,7 @@ export const ProductsSectionStyles = ({site}) => {
min-height: 24px; min-height: 24px;
word-break: break-word; word-break: break-word;
width: 100%; width: 100%;
color: var(--grey1);
border-bottom: 1px solid var(--grey12); border-bottom: 1px solid var(--grey12);
padding: 8px 0 16px; padding: 8px 0 16px;
margin-bottom: 12px; margin-bottom: 12px;
@ -220,6 +221,10 @@ export const ProductsSectionStyles = ({site}) => {
display: none !important; display: none !important;
} }
.gh-portal-products-grid.change-plan {
padding: 0;
}
@media (max-width: 480px) { @media (max-width: 480px) {
.gh-portal-products { .gh-portal-products {
margin: 0 -32px; margin: 0 -32px;
@ -324,10 +329,17 @@ export const ProductsSectionStyles = ({site}) => {
.gh-portal-upgrade-product .gh-portal-products-grid { .gh-portal-upgrade-product .gh-portal-products-grid {
grid-template-columns: unset; grid-template-columns: unset;
grid-gap: 20px; grid-gap: 20px;
padding: 32px 0 0;
width: 100%; width: 100%;
} }
.gh-portal-upgrade-product .gh-portal-products-grid:not(.change-plan) {
padding: 32px 0 0;
}
.gh-portal-upgrade-product .gh-portal-products-grid.change-plan .gh-portal-product-card {
cursor: auto;
}
.gh-portal-upgrade-product .gh-portal-products-priceswitch { .gh-portal-upgrade-product .gh-portal-products-priceswitch {
padding-top: 18px; padding-top: 18px;
} }
@ -340,7 +352,7 @@ export const ProductsSectionStyles = ({site}) => {
min-height: 68px; min-height: 68px;
padding: 12px 20px; padding: 12px 20px;
background: none; background: none;
border: 1px solid var(--grey12); border: 1px solid var(--grey11);
box-shadow: none; box-shadow: none;
} }
@ -360,6 +372,7 @@ export const ProductsSectionStyles = ({site}) => {
.gh-portal-upgrade-product .gh-portal-product-description { .gh-portal-upgrade-product .gh-portal-product-description {
grid-column: 2 / 3; grid-column: 2 / 3;
grid-row: 2;
margin-bottom: 0px; margin-bottom: 0px;
text-align: left; text-align: left;
} }
@ -409,6 +422,19 @@ export const ProductsSectionStyles = ({site}) => {
.gh-portal-upgrade-product .gh-portal-product-benefit:last-of-type { .gh-portal-upgrade-product .gh-portal-product-benefit:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
.gh-portal-products-grid.change-plan .gh-portal-product-card-header {
grid-template-columns: auto;
grid-column: 1 / 3;
}
.gh-portal-products-grid.change-plan .gh-portal-product-name {
font-weight: 600;
}
.gh-portal-products-grid.change-plan .gh-portal-product-description {
grid-column: 1;
}
`; `;
}; };
@ -687,9 +713,7 @@ function ChangeProductCard({product, onPlanSelect}) {
return ( return (
<div> <div>
<div className={cardClass} key={product.id}> <div className={cardClass} key={product.id}>
<div className="gh-portal-product-card-header" style={{ <div className="gh-portal-product-card-header">
gridTemplateColumns: 'auto auto'
}}>
<h4 className="gh-portal-product-name">{product.name}</h4> <h4 className="gh-portal-product-name">{product.name}</h4>
<div className="gh-portal-product-description" style={{ <div className="gh-portal-product-description" style={{
gridColumn: '1/2' gridColumn: '1/2'