Skip to content

Commit 167d528

Browse files
jamesknelsonjamesknelson
committed
[step-054] add a layout component
1 parent f21a0ff commit 167d528

File tree

7 files changed

+123
-158
lines changed

7 files changed

+123
-158
lines changed

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ This is the companion repository to [React, Firebase & Bacon](https://frontarm.c
66
Each branch within this repository contains code for one or more steps within the course. [See an outline and installation instructions at the master branch »](https://github.com/frontarm/react-firebase-bacon)
77

88

9-
Step 053 - Add a page
9+
Step 054 - Layout components
1010
--------
1111

1212
This step makes the following changes:
1313

14-
- Add a `routes` directory, with components that render the content for individual routes.
15-
- Add a `utils` directory, to hold vanilla JavaScript helper code that may be shared between different routes and components.
16-
- Add a routing switch function in `App.js`, and use it to decide what to render.
14+
- Add a layout component in `components/narrowLayoutComponent`.
15+
- Refactors all route components to use the new `<NarrowCardLayout>` component.
16+
- Removes padding from the `<Card>` component, so that it can be applied by the layout instead.
1717

1818
Related lessons:
1919

‎src/components/cards.js

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styled from 'styled-components/macro'
22

3-
import { colors, media, radii, shadows } from 'theme'
3+
import { colors, radii, shadows } from 'theme'
44

55
export const StyledCard = styled.div`
66
background-color: ${colors.background.card};
@@ -9,12 +9,7 @@ export const StyledCard = styled.div`
99
box-shadow: ${shadows.card()};
1010
margin: 0 auto;
1111
max-width: 380px;
12-
padding: 1rem 3rem;
1312
position: relative;
1413
overflow: hidden;
1514
z-index: 0;
16-
17-
${media.smallPhoneOnly`
18-
padding: 1rem 2rem;
19-
`}
2015
`

‎src/components/clamps.js

-13
This file was deleted.

‎src/components/narrowCardLayout.js

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from 'react'
2+
import { css } from 'styled-components/macro'
3+
4+
import { StyledCard } from 'components/cards'
5+
import { Link, StyledLink } from 'components/links'
6+
import logo from 'media/logo.svg'
7+
import vouch from 'media/vouch.svg'
8+
import { colors, dimensions, media } from 'theme'
9+
10+
export default function NarrowCardLayout({ children, navigate }) {
11+
return (
12+
<div
13+
css={css`
14+
margin: 0 auto;
15+
max-width: ${dimensions.narrowClampWidth};
16+
padding: 4rem 1rem;
17+
18+
${media.phoneOnly`
19+
padding: 1rem;
20+
`}
21+
`}>
22+
<StyledCard
23+
css={css`
24+
padding: 1rem 3rem;
25+
26+
${media.smallPhoneOnly`
27+
padding: 1rem 2rem;
28+
`}
29+
`}>
30+
<Link
31+
href="/"
32+
navigate={navigate}
33+
css={css`
34+
display: block;
35+
text-align: center;
36+
`}>
37+
<img
38+
src={logo}
39+
alt="Logo"
40+
css={css`
41+
display: block;
42+
margin: 0 auto;
43+
margin-bottom: 0.75rem;
44+
margin-top: 1rem;
45+
width: 2rem;
46+
`}
47+
/>
48+
<img
49+
src={vouch}
50+
alt="Vouch"
51+
css={css`
52+
height: 1rem;
53+
`}
54+
/>
55+
</Link>
56+
{children}
57+
</StyledCard>
58+
<footer
59+
css={css`
60+
color: ${colors.text.alt};
61+
font-size: 80%;
62+
text-align: center;
63+
margin: 0.5rem auto 2rem;
64+
`}>
65+
<StyledLink color={colors.text.alt} href="/privacy" navigate={navigate}>
66+
Privacy Policy
67+
</StyledLink>
68+
<span
69+
css={css`
70+
margin: 0 0.5rem;
71+
`}>
72+
&middot;
73+
</span>
74+
<StyledLink
75+
color={colors.text.alt}
76+
href="https://github.com/frontarm/vouch-landing"
77+
navigate={navigate}>
78+
See source at GitHub
79+
</StyledLink>
80+
</footer>
81+
</div>
82+
)
83+
}

‎src/routes/404.js

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
import React from 'react'
2+
import NarrowCardLayout from 'components/narrowCardLayout'
3+
import { StyledHaiku } from 'components/typography'
24

3-
export default function NotFound() {
4-
return <div>404 page went for a long walk</div>
5+
export default function NotFound({ navigate }) {
6+
return (
7+
<NarrowCardLayout navigate={navigate}>
8+
<StyledHaiku>
9+
I couldn't find it
10+
<br />
11+
The page probably hates me
12+
<br />
13+
I'm really depressed
14+
</StyledHaiku>
15+
</NarrowCardLayout>
16+
)
517
}

‎src/routes/landing.js

+12-67
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,10 @@ import { css } from 'styled-components/macro'
33

44
import { getResponseCount, postResponse } from 'backend'
55
import { StyledButton } from 'components/buttons'
6-
import { StyledCard } from 'components/cards'
7-
import { StyledNarrowClamp } from 'components/clamps'
6+
import NarrowCardLayout from 'components/narrowCardLayout'
87
import { Field } from 'components/fields'
9-
import { Link, StyledLink } from 'components/links'
108
import { StyledLoadingBar, StyledSpinner } from 'components/loadingIndicators'
119
import { StyledHaiku, StyledIssue } from 'components/typography'
12-
import { ReactComponent as BrandLogo } from 'media/logo.svg'
13-
import { ReactComponent as BrandText } from 'media/vouch.svg'
14-
import { colors } from 'theme'
1510
import { issuesIntersection } from 'utils/issues'
1611

1712
const messages = {
@@ -170,67 +165,17 @@ export default function Landing({ navigate }) {
170165
)
171166

172167
return (
173-
<StyledNarrowClamp>
174-
<StyledCard>
175-
<Link
176-
href="/"
177-
navigate={navigate}
178-
css={css`
179-
display: block;
180-
`}>
181-
<BrandLogo
182-
css={css`
183-
height: 2rem;
184-
margin: 1rem auto 0;
185-
width: 100%;
186-
`}
187-
/>
188-
<BrandText
189-
css={css`
190-
height: 1rem;
191-
margin: 0.5rem auto 0;
192-
width: 100%;
193-
`}
194-
/>
195-
</Link>
196-
{content}
197-
<StyledLoadingBar
198-
active={status.type === 'pending'}
199-
css={css`
200-
position: absolute;
201-
bottom: 0;
202-
left: 0;
203-
width: 100%;
204-
`}
205-
/>
206-
</StyledCard>
207-
<footer
168+
<NarrowCardLayout navigate={navigate}>
169+
{content}
170+
<StyledLoadingBar
171+
active={status.type === 'pending'}
208172
css={css`
209-
color: ${colors.text.alt};
210-
font-size: 80%;
211-
text-align: center;
212-
margin: 0.5rem auto 2rem;
213-
`}>
214-
<StyledLink
215-
color={colors.text.alt}
216-
href="/privacy"
217-
navigate={navigate}
218-
size="80%">
219-
Privacy Policy
220-
</StyledLink>
221-
<span
222-
css={css`
223-
margin: 0 0.5rem;
224-
`}>
225-
&middot;
226-
</span>
227-
<StyledLink
228-
color={colors.text.alt}
229-
href="https://github.com/frontarm/react-firebase-bacon"
230-
size="80%">
231-
See source at GitHub
232-
</StyledLink>
233-
</footer>
234-
</StyledNarrowClamp>
173+
position: absolute;
174+
bottom: 0;
175+
left: 0;
176+
width: 100%;
177+
`}
178+
/>
179+
</NarrowCardLayout>
235180
)
236181
}

‎src/routes/privacy.js

+9-66
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,16 @@
11
import React from 'react'
2-
import { css } from 'styled-components/macro'
3-
4-
import { StyledCard } from 'components/cards'
5-
import { StyledNarrowClamp } from 'components/clamps'
6-
import { Link, StyledLink } from 'components/links'
2+
import NarrowCardLayout from 'components/narrowCardLayout'
73
import { StyledHaiku } from 'components/typography'
8-
import { ReactComponent as BrandLogo } from 'media/logo.svg'
9-
import { ReactComponent as BrandText } from 'media/vouch.svg'
10-
import { colors } from 'theme'
114

125
export default function Privacy({ navigate }) {
136
return (
14-
<StyledNarrowClamp>
15-
<StyledCard>
16-
<Link
17-
href="/"
18-
navigate={navigate}
19-
css={css`
20-
display: block;
21-
`}>
22-
<BrandLogo
23-
css={css`
24-
height: 2rem;
25-
margin: 1rem auto 0;
26-
width: 100%;
27-
`}
28-
/>
29-
<BrandText
30-
css={css`
31-
height: 1rem;
32-
margin: 0.5rem auto 0;
33-
width: 100%;
34-
`}
35-
/>
36-
</Link>
37-
<StyledHaiku>
38-
Your privacy is
39-
<br />
40-
Very important to us
41-
<br />I wrote a poem
42-
</StyledHaiku>
43-
</StyledCard>
44-
<footer
45-
css={css`
46-
color: ${colors.text.alt};
47-
font-size: 80%;
48-
text-align: center;
49-
margin: 0.5rem auto 2rem;
50-
`}>
51-
<StyledLink
52-
color={colors.text.alt}
53-
href="/privacy"
54-
navigate={navigate}
55-
size="80%">
56-
Privacy Policy
57-
</StyledLink>
58-
<span
59-
css={css`
60-
margin: 0 0.5rem;
61-
`}>
62-
&middot;
63-
</span>
64-
<StyledLink
65-
color={colors.text.alt}
66-
href="https://github.com/frontarm/react-firebase-bacon"
67-
size="80%">
68-
See source at GitHub
69-
</StyledLink>
70-
</footer>
71-
</StyledNarrowClamp>
7+
<NarrowCardLayout navigate={navigate}>
8+
<StyledHaiku>
9+
Your privacy is
10+
<br />
11+
Very important to us
12+
<br />I wrote a poem
13+
</StyledHaiku>
14+
</NarrowCardLayout>
7215
)
7316
}

0 commit comments

Comments
 (0)