Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-15 03:01:37 -05:00
Code Issues Activity

Updated mobile styles for plan selection

Browse source
This commit is contained in:
Peter Zimon 2020-09-24 12:45:42 +02:00
parent a061771138
commit 160e5e6e7d
4 changed files with 33 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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) {

17
ghost/portal/src/components/Frame.styles.js
View file

@ -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;

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

@ -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>
);
});

2
ghost/portal/src/utils/fixtures.js
View file

@ -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',