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,
site: Fixtures.site,
member: Fixtures.member.paid,
page: 'accountHome'
page: 'signup'
};
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 {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-radius: 0 0 5px 5px;
border-top: none;
}
.gh-portal-plans-container.has-multiple-products.is-change-plan .gh-portal-plan-section {
min-height: 90px;
}
.gh-portal-plan-product {
@ -387,7 +391,7 @@ export const PlanSectionStyles = `
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);
}
@ -628,7 +632,6 @@ export function SingleProductPlansSection({product, plans, selectedPlan, onPlanS
return (
<section className="gh-portal-plans">
<label className='gh-portal-input-label'>{site.title} membership</label>
<div className={className}>
<PlanOptions plans={plans} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} changePlan={changePlan} />
</div>

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

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