Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9abdae4

Browse files
authored
Merge pull request#45 from ShMcK/feature/level-summary
Feature/level summary
2 parents74feeab +80a5edb commit9abdae4

File tree

10 files changed

+144
-64
lines changed

10 files changed

+144
-64
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
importLoadingPagefrom'./containers/LoadingPage'
77
importContinuePagefrom'./containers/Continue'
88
importNewPagefrom'./containers/New'
9-
importSummaryPagefrom'./containers/Tutorial/SummaryPage'
9+
importOverviewPagefrom'./containers/Overview'
1010
importLevelSummaryPagefrom'./containers/Tutorial/LevelPage'
1111
importCompletedPagefrom'./containers/Tutorial/CompletedPage'
1212

@@ -34,7 +34,7 @@ const Routes = () => {
3434
<LoadingPagetext="Loading..."/>
3535
</Route>
3636
<Routepath="Tutorial.Summary">
37-
<SummaryPagesend={tempSend}context={{}asCR.MachineContext}/>
37+
<OverviewPagesend={tempSend}context={{}asCR.MachineContext}/>
3838
</Route>
3939
<Routepath="Tutorial.Level">
4040
<LevelSummaryPagesend={tempSend}context={{}asCR.MachineContext}/>
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import*asReactfrom'react'
2+
import{Button}from'@alifd/next'
3+
import*asGfrom'typings/graphql'
4+
5+
conststyles={
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+
paddingRight:'2rem',
35+
backgroundColor:'black',
36+
width:'100%',
37+
},
38+
startButton:{
39+
backgroundColor:'gold',
40+
fontWeight:'bold'as'bold',
41+
},
42+
}
43+
44+
interfaceProps{
45+
title:string
46+
description:string
47+
levels:G.Level[]
48+
onNext():void
49+
}
50+
51+
constSummary=({ title, description, levels, onNext}:Props)=>(
52+
<div>
53+
<divstyle={styles.header}>
54+
<span>CodeRoad</span>
55+
</div>
56+
<divstyle={styles.summary}>
57+
<h2style={styles.title}>{title}</h2>
58+
<pstyle={styles.description}>{description}</p>
59+
</div>
60+
<div>
61+
<divstyle={styles.header}>
62+
<span>Levels</span>
63+
</div>
64+
<divstyle={styles.levelList}>
65+
{levels.map((level:G.Level,index:number)=>(
66+
<divkey={index}>
67+
<h4>
68+
{index+1}.{level.title}
69+
</h4>
70+
<div>{level.description}</div>
71+
</div>
72+
))}
73+
</div>
74+
</div>
75+
76+
<divstyle={styles.options}>
77+
{/* TODO: Add back button */}
78+
<Buttonstyle={styles.startButton}onClick={()=>onNext()}>
79+
Start
80+
</Button>
81+
</div>
82+
</div>
83+
)
84+
85+
exportdefaultSummary

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

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

6-
importqueryTutorialfrom'../../../services/apollo/queries/tutorial'
7-
importSummaryfrom'./Summary'
8-
importErrorViewfrom'../../../components/Error'
6+
importqueryTutorialfrom'../../services/apollo/queries/tutorial'
7+
importOverviewPagefrom'./OverviewPage'
8+
importErrorViewfrom'../../components/Error'
99

1010
interfacePageProps{
1111
context:CR.MachineContext
@@ -21,14 +21,14 @@ interface TutorialDataVariables {
2121
version:string
2222
}
2323

24-
constSummaryPage=(props:PageProps)=>{
24+
constOverview=(props:PageProps)=>{
2525
const{ tutorial}=props.context
2626

2727
if(!tutorial){
2828
thrownewError('Tutorial not found in summary page')
2929
}
3030
const{ loading, error, data}=useQuery<TutorialData,TutorialDataVariables>(queryTutorial,{
31-
fetchPolicy:'network-only',//for debugging purposes
31+
fetchPolicy:'network-only',//to ensure latest
3232
variables:{
3333
tutorialId:tutorial.id,
3434
version:tutorial.version.version,
@@ -56,8 +56,9 @@ const SummaryPage = (props: PageProps) => {
5656
})
5757

5858
const{ title, description}=data.tutorial.version.summary
59+
const{ levels}=data.tutorial.version.data
5960

60-
return<Summarytitle={title}description={description}onNext={onNext}/>
61+
return<OverviewPagetitle={title}description={description}levels={levels}onNext={onNext}/>
6162
}
6263

63-
exportdefaultSummaryPage
64+
exportdefaultOverview

‎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
importSideBarDecoratorfrom'./utils/SideBarDecorator'
99
importLevelfrom'../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<NewPagetutorialList={tutorialList}/>

‎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+
importReactfrom'react'
2+
3+
import{linkTo}from'@storybook/addon-links'
4+
import{storiesOf}from'@storybook/react'
5+
6+
importSideBarDecoratorfrom'./utils/SideBarDecorator'
7+
importOverViewPagefrom'../src/containers/Overview/OverviewPage'
8+
9+
storiesOf('Overview',module)
10+
.addDecorator(SideBarDecorator)
11+
.add('OverView Page',()=>{
12+
constlevels=[
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.
Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import*asReactfrom'react'
22

33
conststyles={
4-
width:'20rem',
5-
borderRight:'2px solid black',
6-
height:window.innerHeight,
4+
container:{
5+
position:'relative'as'relative',
6+
boxSizing:'border-box'as'border-box',
7+
maxWidth:'20rem',
8+
borderRight:'2px solid black',
9+
width:'20rem',
10+
height:window.innerHeight,
11+
},
712
}
813

9-
constSideBarDecorator=storyFn=><divstyle={styles}>{storyFn()}</div>
14+
constSideBarDecorator=storyFn=><divstyle={styles.container}>{storyFn()}</div>
1015

1116
exportdefaultSideBarDecorator

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp