Skip to content

Commit 3888e8b

Browse files
ShMcKShMcK
committed
add relative positioning to pages for storybook
1 parent 121d5cb commit 3888e8b

File tree

6 files changed

+228
-242
lines changed

6 files changed

+228
-242
lines changed

‎web-app/src/components/Checkbox/index.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,14 @@ const styles = {
1515
}
1616

1717
interface Props {
18-
status: 'COMPLETE' | 'INCOMPLETE' | 'ACTIVE' | 'LOADING'
18+
status: 'COMPLETE' | 'INCOMPLETE' | 'ACTIVE'
1919
}
2020

2121
const Checkbox = (props: Props) => {
2222
const onChange = () => {
2323
/* read only */
2424
}
2525

26-
if (props.status === 'LOADING') {
27-
return (
28-
<div style={styles.box}>
29-
<input
30-
ref={input => {
31-
/* ref because unable to apply indeterminate on jsx */
32-
if (input) {
33-
input.indeterminate = true
34-
}
35-
}}
36-
type="checkbox"
37-
checked={false}
38-
disabled={true}
39-
onChange={onChange}
40-
/>
41-
</div>
42-
)
43-
}
44-
4526
const checked = props.status === 'COMPLETE'
4627

4728
return (

‎web-app/src/containers/Continue/index.tsx‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,51 +5,52 @@ import * as CR from 'typings'
55
import * as G from 'typings/graphql'
66

77
const styles = {
8-
page: {
9-
width: '100%',
10-
},
8+
page: {
9+
position: 'relative' as 'relative',
10+
width: '100%',
11+
},
1112
}
1213

1314
interface Props {
14-
tutorial: G.Tutorial
15-
onContinue(): void
16-
onNew(): void
15+
tutorial: G.Tutorial
16+
onContinue(): void
17+
onNew(): void
1718
}
1819

1920
export const ContinuePage = (props: Props) => (
20-
<div style={styles.page}>
21-
<h3>Continue</h3>
22-
<Card>
23-
<div>
24-
<h2>{props.tutorial.version.summary.title}</h2>
25-
<p>{props.tutorial.version.summary.description}</p>
26-
<Button onClick={props.onContinue}>Resume</Button>
27-
</div>
28-
</Card>
29-
<Card>
30-
<div>
31-
<h2>Start a New Tutorial</h2>
32-
<Button onClick={props.onNew}>Select New Tutorial</Button>
33-
</div>
34-
</Card>
35-
</div>
21+
<div style={styles.page}>
22+
<h3>Continue</h3>
23+
<Card>
24+
<div>
25+
<h2>{props.tutorial.version.summary.title}</h2>
26+
<p>{props.tutorial.version.summary.description}</p>
27+
<Button onClick={props.onContinue}>Resume</Button>
28+
</div>
29+
</Card>
30+
<Card>
31+
<div>
32+
<h2>Start a New Tutorial</h2>
33+
<Button onClick={props.onNew}>Select New Tutorial</Button>
34+
</div>
35+
</Card>
36+
</div>
3637
)
3738

3839
interface ContainerProps {
39-
context: CR.MachineContext
40-
send(action: CR.Action | string): void
40+
context: CR.MachineContext
41+
send(action: CR.Action | string): void
4142
}
4243

4344
const ContinuePageContainer = ({ context, send }: ContainerProps) => {
44-
const { tutorial } = context
45+
const { tutorial } = context
4546

46-
if (!tutorial) {
47-
throw new Error('Tutorial not found')
48-
}
47+
if (!tutorial) {
48+
throw new Error('Tutorial not found')
49+
}
4950

50-
return (
51-
<ContinuePage tutorial={tutorial} onContinue={() => send('TUTORIAL_START')} onNew={() => send('TUTORIAL_SELECT')} />
52-
)
51+
return (
52+
<ContinuePage tutorial={tutorial} onContinue={() => send('TUTORIAL_START')} onNew={() => send('TUTORIAL_SELECT')} />
53+
)
5354
}
5455

5556
export default ContinuePageContainer

‎web-app/src/containers/LoadingPage.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,23 @@ import * as React from 'react'
22
import Loading from '../components/Loading'
33

44
interface Props {
5-
text: string
5+
text: string
66
}
77

88
const styles = {
9-
page: {
10-
display: 'flex',
11-
alignItems: 'center',
12-
justifyContent: 'center',
13-
width: '100%',
14-
},
9+
page: {
10+
position: 'relative' as 'relative',
11+
display: 'flex',
12+
alignItems: 'center',
13+
justifyContent: 'center',
14+
width: '100%',
15+
},
1516
}
1617

1718
const LoadingPage = ({ text }: Props) => (
18-
<div style={styles.page}>
19-
<Loading text={text} />
20-
</div>
19+
<div style={styles.page}>
20+
<Loading text={text} />
21+
</div>
2122
)
2223

2324
export default LoadingPage

‎web-app/src/containers/New/NewPage.tsx‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,38 @@ import * as G from 'typings/graphql'
33
import TutorialList from './TutorialList'
44

55
const styles = {
6-
page: {
7-
width: '100%',
8-
},
9-
header: {
10-
height: '36px',
11-
backgroundColor: '#EBEBEB',
12-
fontSize: '16px',
13-
lineHeight: '16px',
14-
padding: '10px 1rem',
15-
},
16-
banner: {
17-
height: '50px',
18-
fontSize: '1rem',
19-
padding: '1rem',
20-
},
6+
page: {
7+
position: 'relative' as 'relative',
8+
width: '100%',
9+
},
10+
header: {
11+
height: '36px',
12+
backgroundColor: '#EBEBEB',
13+
fontSize: '16px',
14+
lineHeight: '16px',
15+
padding: '10px 1rem',
16+
},
17+
banner: {
18+
height: '50px',
19+
fontSize: '1rem',
20+
padding: '1rem',
21+
},
2122
}
2223

2324
interface Props {
24-
tutorialList: G.Tutorial[]
25+
tutorialList: G.Tutorial[]
2526
}
2627

2728
const NewPage = (props: Props) => (
28-
<div style={styles.page}>
29-
<div style={styles.header}>
30-
<span>CodeRoad</span>
31-
</div>
32-
<div style={styles.banner}>
33-
<span>Select a Tutorial to Start</span>
34-
</div>
35-
<TutorialList tutorialList={props.tutorialList} />
36-
</div>
29+
<div style={styles.page}>
30+
<div style={styles.header}>
31+
<span>CodeRoad</span>
32+
</div>
33+
<div style={styles.banner}>
34+
<span>Select a Tutorial to Start</span>
35+
</div>
36+
<TutorialList tutorialList={props.tutorialList} />
37+
</div>
3738
)
3839

3940
export default NewPage

‎web-app/src/containers/Overview/OverviewPage.tsx‎

Lines changed: 70 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -5,82 +5,83 @@ import * as G from 'typings/graphql'
55
import Markdown from '../../components/Markdown'
66

77
const styles = {
8-
page: {
9-
width: '100%',
10-
},
11-
summary: {
12-
padding: '0rem 1rem 1rem 1rem',
13-
},
14-
title: {
15-
fontWeight: 'bold' as 'bold',
16-
},
17-
description: {
18-
fontSize: '1rem',
19-
},
20-
header: {
21-
height: '36px',
22-
backgroundColor: '#EBEBEB',
23-
fontSize: '16px',
24-
lineHeight: '16px',
25-
padding: '10px 1rem',
26-
},
27-
levelList: {
28-
padding: '0rem 1rem',
29-
},
30-
options: {
31-
display: 'flex' as 'flex',
32-
flexDirection: 'row' as 'row',
33-
alignItems: 'center' as 'center',
34-
justifyContent: 'flex-end' as 'flex-end',
35-
position: 'absolute' as 'absolute',
36-
bottom: 0,
37-
height: '50px',
38-
padding: '1rem',
39-
paddingRight: '2rem',
40-
backgroundColor: 'black',
41-
width: '100%',
42-
},
8+
page: {
9+
position: 'relative' as 'relative',
10+
width: '100%',
11+
},
12+
summary: {
13+
padding: '0rem 1rem 1rem 1rem',
14+
},
15+
title: {
16+
fontWeight: 'bold' as 'bold',
17+
},
18+
description: {
19+
fontSize: '1rem',
20+
},
21+
header: {
22+
height: '36px',
23+
backgroundColor: '#EBEBEB',
24+
fontSize: '16px',
25+
lineHeight: '16px',
26+
padding: '10px 1rem',
27+
},
28+
levelList: {
29+
padding: '0rem 1rem',
30+
},
31+
options: {
32+
display: 'flex' as 'flex',
33+
flexDirection: 'row' as 'row',
34+
alignItems: 'center' as 'center',
35+
justifyContent: 'flex-end' as 'flex-end',
36+
position: 'absolute' as 'absolute',
37+
bottom: 0,
38+
height: '50px',
39+
padding: '1rem',
40+
paddingRight: '2rem',
41+
backgroundColor: 'black',
42+
width: '100%',
43+
},
4344
}
4445

4546
interface Props {
46-
title: string
47-
description: string
48-
levels: G.Level[]
49-
onNext(): void
47+
title: string
48+
description: string
49+
levels: G.Level[]
50+
onNext(): void
5051
}
5152

5253
const Summary = ({ title, description, levels, onNext }: Props) => (
53-
<div style={styles.page}>
54-
<div style={styles.header}>
55-
<span>CodeRoad</span>
56-
</div>
57-
<div style={styles.summary}>
58-
<h2 style={styles.title}>{title}</h2>
59-
<Markdown>{description}</Markdown>
60-
</div>
61-
<div>
62-
<div style={styles.header}>
63-
<span>Levels</span>
64-
</div>
65-
<div style={styles.levelList}>
66-
{levels.map((level: G.Level, index: number) => (
67-
<div key={index}>
68-
<h4>
69-
{index + 1}. {level.title}
70-
</h4>
71-
<div>{level.description}</div>
72-
</div>
73-
))}
74-
</div>
75-
</div>
54+
<div style={styles.page}>
55+
<div style={styles.header}>
56+
<span>CodeRoad</span>
57+
</div>
58+
<div style={styles.summary}>
59+
<h2 style={styles.title}>{title}</h2>
60+
<Markdown>{description}</Markdown>
61+
</div>
62+
<div>
63+
<div style={styles.header}>
64+
<span>Levels</span>
65+
</div>
66+
<div style={styles.levelList}>
67+
{levels.map((level: G.Level, index: number) => (
68+
<div key={index}>
69+
<h4>
70+
{index + 1}. {level.title}
71+
</h4>
72+
<div>{level.description}</div>
73+
</div>
74+
))}
75+
</div>
76+
</div>
7677

77-
<div style={styles.options}>
78-
{/* TODO: Add back button */}
79-
<Button type="primary" onClick={() => onNext()}>
80-
Start
81-
</Button>
82-
</div>
83-
</div>
78+
<div style={styles.options}>
79+
{/* TODO: Add back button */}
80+
<Button type="primary" onClick={() => onNext()}>
81+
Start
82+
</Button>
83+
</div>
84+
</div>
8485
)
8586

8687
export default Summary

0 commit comments

Comments
 (0)