Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

Commit c127fc0

Browse files
nisarhassan12nisarhassan12
committed
[pricing] adjust the plans so that they are accessible on mobile.
Fixes #624
1 parent 43829f4 commit c127fc0

File tree

3 files changed

+79
-55
lines changed

3 files changed

+79
-55
lines changed

‎src/components/pricing/Plans.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import styled from '@emotion/styled'
66
import { sizes } from '../../styles/variables'
77

88
const Styled = styled.div`
9+
padding: 5rem 0;
10+
911
.links {
1012
display: flex;
1113
justify-content: space-between;

‎src/components/pricing/PricingBoxes.tsx

Lines changed: 55 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Styled = styled.div`
1919
}
2020
2121
.pricing {
22-
padding-bottom: 5rem;
22+
padding: 0;
2323
2424
&__boxes {
2525
display: flex;
@@ -38,7 +38,14 @@ const Styled = styled.div`
3838
flex-direction: column;
3939
align-items: center;
4040
}
41+
}
42+
}
4143
44+
.container--1 {
45+
padding: 10rem 0 0;
46+
47+
@media(max-width: ${sizes.breakpoints.md}) {
48+
padding: 5rem 0 0;
4249
}
4350
}
4451
`
@@ -91,7 +98,7 @@ const plans: PricingBoxProps[] = [
9198
btnText: 'Buy Now',
9299
btnBackground: true,
93100
link: 'https://gitpod.io/subscription/',
94-
subAction: <a href="https://gitpod.io/teams/" target="_blank" className="sub-action">Create Team<PopOver textPosition="bottom" description="Get your entire team onto Gitpod with a single invoice"/></a>
101+
subAction: <a href="https://gitpod.io/teams/" target="_blank" className="sub-action">Create Team<PopOver textPosition="bottom" description="Get your entire team onto Gitpod with a single invoice" /></a>
95102
},
96103
{
97104
title: 'Unlimited',
@@ -101,20 +108,31 @@ const plans: PricingBoxProps[] = [
101108
features: ['Private & Public Repos', <span className="span">16 Parallel Workspaces <PopOver description="The maximum number of workspaces a user can run at the same time" /></span>, <span className="span">1h Timeout <PopOver description="Workspaces without user activity are stopped after 1 hour" /></span>, <span className="span">3h Timeout Boost <PopOver description="You can manually boost the timeout to 3 hours within a running workspace" /></span>],
102109
btnText: 'Buy Now',
103110
link: 'https://gitpod.io/subscription/',
104-
subAction: <a href="https://gitpod.io/teams/" target="_blank" className="sub-action">Create Team<PopOver textPosition="bottom" description="Get your entire team onto Gitpod with a single invoice"/></a>
111+
subAction: <a href="https://gitpod.io/teams/" target="_blank" className="sub-action">Create Team<PopOver textPosition="bottom" description="Get your entire team onto Gitpod with a single invoice" /></a>
105112
}
106113
]
107114

108115
const PricingContainer = styled.div`
109116
background-color: ${colors.white};
110-
padding: 3rem;
111-
margin: 0 -500px;
117+
padding: 3rem 0;
112118
justify-content: flex-start;
113119
border: 1px solid ${colors.offWhite2};
120+
border-left: none;
121+
border-right: none;
122+
123+
.hide {
124+
display: none;
125+
}
126+
127+
.show {
128+
display: flex;
129+
flex-wrap: wrap;
130+
}
114131
`;
115132

116133
const Tab = styled.button`
117-
padding: 1rem 2rem;
134+
display: block;
135+
padding: 1.3rem 2rem;
118136
font-size: 18px;
119137
color: ${colors.textLight};
120138
min-width: 15rem;
@@ -148,42 +166,46 @@ const PricingBoxes = () => {
148166
const [selfHosted, setSelfHosted] = useState(isSelfHosted());
149167
return <Styled>
150168
<section className="pricing">
151-
<h1 className="sub">Plans &amp; Pricing</h1>
152-
<div style={{
153-
display: 'flex',
154-
justifyContent: 'center'
155-
}}>
156-
<Tab style={{
157-
backgroundColor: selfHosted ? colors.offWhite2 : colors.white,
158-
}}
159-
onClick={()=>setSelfHosted(false)}
160-
>Cloud</Tab>
161-
<Tab style={{
162-
backgroundColor: selfHosted ? colors.white : colors.offWhite2,
163-
}}
164-
onClick={()=> setSelfHosted(true)}
165-
>Self-Hosted</Tab>
169+
<div className="grey-container container--1">
170+
<div className="row">
171+
<h1 className="sub">Plans &amp; Pricing</h1>
172+
<div style={{
173+
display: 'flex',
174+
justifyContent: 'center'
175+
}}>
176+
<Tab style={{
177+
backgroundColor: selfHosted ? colors.offWhite2 : colors.white,
178+
}}
179+
onClick={() => setSelfHosted(false)}
180+
>Cloud</Tab>
181+
<Tab style={{
182+
backgroundColor: selfHosted ? colors.white : colors.offWhite2,
183+
}}
184+
onClick={() => setSelfHosted(true)}
185+
>Self-Hosted</Tab>
186+
</div>
187+
</div>
166188
</div>
167189
<PricingContainer>
168-
<div className="pricing__boxes" style={{
169-
display: selfHosted ? 'none' : 'flex'
170-
}}>
190+
<div
191+
className={`pricing__boxes ${selfHosted ? 'hide' : 'show'}`}
192+
>
171193
{plans.map(
172194
(plan, i) => <PricingBox
173-
key={i}
174-
{...plan}
195+
key={i}
196+
{...plan}
175197
/>
176-
)}
198+
)}
177199
</div>
178-
<div className="pricing__boxes" style={{
179-
display: selfHosted ? 'flex' : 'none'
180-
}}>
200+
<div
201+
className={`pricing__boxes ${selfHosted ? 'show' : 'hide'}`}
202+
>
181203
{selfHostedPlans.map(
182204
(plan, i) => <PricingBox
183-
key={i}
184-
{...plan}
205+
key={i}
206+
{...plan}
185207
/>
186-
)}
208+
)}
187209
</div>
188210
</PricingContainer>
189211
</section>

‎src/pages/pricing.tsx

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,37 +11,37 @@ import Business from '../components/pricing/Business'
1111

1212

1313
const PricingPage: React.SFC<{}> = () => (
14-
<IndexLayout
15-
canonical='/pricing/'
16-
title="Pricing"
14+
<IndexLayout
15+
canonical='/pricing/'
16+
title="Pricing"
1717
description="Gitpod is free for Open Source, and offers productive features for you, your team and your business at reasonable prices."
1818
>
19-
<div className="grey-container">
20-
<div className="row">
21-
<PricingBoxes />
22-
<Plans />
23-
</div>
19+
<PricingBoxes />
20+
<div className="grey-container">
21+
<div className="row">
22+
<Plans />
2423
</div>
24+
</div>
2525

26-
<div className="row">
26+
<div className="row">
2727

28-
<Business />
28+
<Business />
2929

30-
<Bg url={PricingBg}/>
30+
<Bg url={PricingBg} />
3131

32-
<ActionCard
33-
title='Any Questions?'
34-
text='We’re happy to answer them. Please get in touch.'
35-
anchors={[{href: '/contact/', subject: "I have a question regarding pricing", text: 'Contact'}]}
36-
/>
32+
<ActionCard
33+
title='Any Questions?'
34+
text='We’re happy to answer them. Please get in touch.'
35+
anchors={[{ href: '/contact/', subject: "I have a question regarding pricing", text: 'Contact' }]}
36+
/>
3737

38-
<Details
39-
title="Explore Gitpod"
40-
text="Learn about collaboration, workspace snapshots, supported programming languages, and much more."
41-
anchors={[{href: '/features/', text: 'See Features'}, {href: '/blog/', text: 'See Blog'}]}
42-
/>
38+
<Details
39+
title="Explore Gitpod"
40+
text="Learn about collaboration, workspace snapshots, supported programming languages, and much more."
41+
anchors={[{ href: '/features/', text: 'See Features' }, { href: '/blog/', text: 'See Blog' }]}
42+
/>
4343

44-
</div>
44+
</div>
4545
</IndexLayout>
4646
)
4747

0 commit comments

Comments
 (0)