8000 add Level page summary · coderoad/coderoad-vscode@46d020e · GitHub
[go: up one dir, main page]
Skip to content

Commit 46d020e

Browse files
ShMcKShMcK
committed
add Level page summary
1 parent ff84fa4 commit 46d020e

File tree

9 files changed

+128
-55
lines changed

9 files changed

+128
-55
lines changed

‎web-app/src/Routes.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Router from './components/Router'
66
import LoadingPage from './containers/LoadingPage'
77
import ContinuePage from './containers/Continue'
88
import NewPage from './containers/New'
9-
import SummaryPage from './containers/Tutorial/SummaryPage'
9+
import OverviewPage from './containers/Overview'
1010
import LevelSummaryPage from './containers/Tutorial/LevelPage'
1111
import CompletedPage from './containers/Tutorial/CompletedPage'
1212

@@ -34,7 +34,7 @@ const Routes = () => {
3434
<LoadingPage text="Loading..." />
3535
</Route>
3636
<Route path="Tutorial.Summary">
37-
<SummaryPage send={tempSend} context={{} as CR.MachineContext} />
37+
<OverviewPage send={tempSend} context={{} as CR.MachineContext} />
3838
</Route>
3939
<Route path="Tutorial.Level">
4040
<LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import * as React from 'react'
2+
import { Button } from '@alifd/next'
3+
import * as G from 'typings/graphql'
4+
5+
const styles = {
6+
summary: {
7+
padding: '0rem 1rem 1rem 1rem',
8+
},
9+
title: {
10+
fontWeight: 'bold' as 'bold',
11+
},
12+
description: {
13+
fontSize: '1rem',
14+
},
15+
header: {
16+
height: '36px',
17+
backgroundColor: '#EBEBEB',
18+
fontSize: '16px',
19+
lineHeight: '16px',
20+
padding: '10px 1rem',
21+
},
22+
levelList: {
23+
padding: '0rem 1rem',
24+
},
25+
options: {
26+
display: 'flex' as 'flex',
27+
flexDirection: 'row' as 'row',
28+
alignItems: 'center' as 'center',
29+
justifyContent: 'flex-end' as 'flex-end',
30+
position: 'absolute' as 'absolute',
31+
bottom: 0,
32+
height: '50px',
33+
padding: '1rem',
34+
backgroundColor: 'black',
35+
width: '100%',
36+
},
37+
startButton: {
38+
backgroundColor: 'gold',
39+
fontWeight: 'bold' as 'bold',
40+
},
41+
}
42+
43+
interface Props {
44+
title: string
45+
description: string
46+
levels: G.Level[]
47+
onNext(): void
48+
}
49+
50+
const Summary = ({ title, description, levels, onNext }: Props) => (
51+
<div>
52+
<div style={styles.header}>
53+
<span>CodeRoad</span>
54+
</div>
55+
<div style={styles.summary}>
56+
<h2 style={styles.title}>{title}</h2>
57+
<p style={styles.description}>{description}</p>
58+
</div>
59+
<div>
60+
<div style={styles.header}>
61+
<span>Levels</span>
62+
</div>
63+
<div style={styles.levelList}>
64+
{levels.map((level: G.Level, index: number) => (
65+
<div key={index}>
66+
<h4>
67+
{index + 1}. {level.title}
68+
</h4>
69+
<div>{level.description}</div>
70+
</div>
71+
))}
72+
</div>
73+
</div>
74+
75+
<div style={styles.options}>
76+
{/* TODO: Add back button */}
77+
<Button style={styles.startButton} onClick={() => onNext()}>
78+
Start
79+
</Button>
80+
</div>
81+
</div>
82+
)
83+
84+
export default Summary

‎web-app/src/containers/Tutorial/SummaryPage/index.tsx renamed to ‎web-app/src/containers/Overview/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import * as G from 'typings/graphql'
33
import * as CR from 'typings'
44
import { useQuery } from '@apollo/react-hooks'
55

6-
import queryTutorial from '../../../services/apollo/queries/tutorial'
6+
import queryTutorial from '../../services/apollo/queries/tutorial'
77
import Summary from './Summary'
8-
import ErrorView from '../../../components/Error'
8+
import ErrorView from '../../components/Error'
99

1010
interface PageProps {
1111
context: CR.MachineContext

‎web-app/src/containers/Tutorial/SummaryPage/Summary/index.tsx

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎web-app/stories/Level.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { storiesOf } from '@storybook/react'
88
import SideBarDecorator from './utils/SideBarDecorator'
99
import Level from '../src/containers/Tutorial/LevelPage/Level/index'
1010

11-
storiesOf('Tutorial SideBar', module)
11+
storiesOf('Level', module)
1212
.addDecorator(SideBarDecorator)
1313
.addDecorator(withKnobs)
1414
.add('Level', () => {

‎web-app/stories/New.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const tutorialList = [
2828
},
2929
]
3030

31-
storiesOf('New', module)
31+
storiesOf('Start', module)
3232
.addDecorator(SideBarDecorator)
3333
.add('New Page', () => {
3434
return <NewPage tutorialList={tutorialList} />
8000

‎web-app/stories/Overview.stories.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react'
2+
3+
import { linkTo } from '@storybook/addon-links'
4+
import { storiesOf } from '@storybook/react'
5+
6+
import SideBarDecorator from './utils/SideBarDecorator'
7+
import OverViewPage from '../src/containers/Overview/OverviewPage'
8+
9+
storiesOf('Overview', module)
10+
.addDecorator(SideBarDecorator)
11+
.add('OverView Page', () => {
12+
const levels = [
13+
{
14+
id: 'L1',
15+
title: 'The First Level',
16+
description: 'A Summary of the first level',
17+
},
18+
{
19+
id: 'L2',
20+
title: 'The Second Level',
21+
description: 'A Summary of the second level',
22+
},
23+
{
24+
id: 'L3',
25+
title: 'The Third Level',
26+
description: 'A Summary of the third level',
27+
},
28+
]
29+
return (
30+
<OverViewPage
31+
title="Some Title"
32+
description="Some description"
33+
levels={levels}
34+
onNext={linkTo('Tutorial SideBar', 'Level')}
35+
/>
36+
)
37+
})

‎web-app/stories/Step.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
3030
Emojis: :) :| :(
3131
`
3232

33-
storiesOf('Tutorial SideBar', module)
33+
storiesOf('Level', module)
3434
.addDecorator(SideBarDecorator)
3535
.addDecorator(withKnobs)
3636
.add('Step Description', () => (

‎web-app/stories/Summary.stories.tsx

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)
0