mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-25 02:31:59 -05:00
Updated mobile styles for plan selection
This commit is contained in:
parent
a061771138
commit
160e5e6e7d
4 changed files with 33 additions and 10 deletions
|
@ -14,7 +14,7 @@ const DEV_MODE_DATA = {
|
|||
showPopup: true,
|
||||
site: Fixtures.site,
|
||||
member: Fixtures.member.paid,
|
||||
page: 'accountHome'
|
||||
page: 'signup'
|
||||
};
|
||||
export default class App extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
|
@ -587,7 +587,7 @@ const MobileStyles = `
|
|||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.gh-portal-plan-feature {
|
||||
.gh-portal-plan-featurewrapper {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 32px;
|
||||
|
@ -618,6 +618,21 @@ const MobileStyles = `
|
|||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.gh-portal-plans-container.hide-checkbox .gh-portal-plan-name,
|
||||
.gh-portal-plans-container.hide-checkbox .gh-portal-plan-featurewrapper,
|
||||
.gh-portal-content.signup.singleplan .gh-portal-plan-name,
|
||||
.gh-portal-content.signup.singleplan .gh-portal-plan-featurewrapper {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.gh-portal-plans-container.hide-checkbox .gh-portal-plan-featurewrapper {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.gh-portal-plans-container.hide-checkbox .gh-portal-plan-featurewrapper .gh-portal-plan-current {
|
||||
margin: 0 0 0 12px;
|
||||
}
|
||||
|
||||
.gh-portal-input {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 16px;
|
||||
|
|
|
@ -87,16 +87,22 @@ export const PlanSectionStyles = `
|
|||
color: var(--grey7);
|
||||
}
|
||||
|
||||
.gh-portal-plan-featurewrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--grey12);
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-portal-plan-feature {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.25em;
|
||||
text-align: center;
|
||||
letter-spacing: 0.2px;
|
||||
border-top: 1px solid var(--grey12);
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.gh-portal-plan-checkbox {
|
||||
|
@ -275,10 +281,12 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
|
|||
<Checkbox name={name} isChecked={isChecked} onPlanSelect={onPlanSelect} />
|
||||
<h4 className='gh-portal-plan-name'>{name}</h4>
|
||||
<PriceLabel name={name} currency={currency} price={price} />
|
||||
<div className='gh-portal-plan-feature'>
|
||||
{planDetails.feature}
|
||||
<div className='gh-portal-plan-featurewrapper'>
|
||||
<div className='gh-portal-plan-feature'>
|
||||
{planDetails.feature}
|
||||
</div>
|
||||
{(changePlan && selectedPlan === name ? <span className='gh-portal-plan-current'>Current plan</span> : '')}
|
||||
</div>
|
||||
{(changePlan && selectedPlan === name ? <span className='gh-portal-plan-current'>Current plan</span> : '')}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
@ -15,7 +15,7 @@ export const site = {
|
|||
is_stripe_configured: true,
|
||||
portal_button: true,
|
||||
portal_name: true,
|
||||
portal_plans: ['free', 'monthly', 'yearly'],
|
||||
portal_plans: ['monthly', 'yearly'],
|
||||
portal_button_icon: 'icon-1',
|
||||
portal_button_signup_text: 'Subscribe now',
|
||||
portal_button_style: 'icon-and-text',
|
||||
|
|
Loading…
Add table
Reference in a new issue