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

Commit2a3d9e2

Browse files
committed
cleanup new tutorial page
1 parent1a5c621 commit2a3d9e2

File tree

6 files changed

+100
-43
lines changed

6 files changed

+100
-43
lines changed

‎typings/graphql.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export type GithubUser = {
7676
exporttypeLevel={
7777
__typename?:'Level',
7878
id:Scalars['ID'],
79+
index?:number
7980
title:Scalars['String'],
8081
description:Scalars['String'],
8182
steps:Array<Step>,
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import*asReactfrom'react'
2+
import*asGfrom'typings/graphql'
3+
importTutorialListfrom'./TutorialList'
4+
5+
conststyles={
6+
header:{
7+
height:'36px',
8+
backgroundColor:'#EBEBEB',
9+
fontSize:'16px',
10+
lineHeight:'16px',
11+
padding:'10px 1rem',
12+
},
13+
banner:{
14+
height:'50px',
15+
fontSize:'1rem',
16+
padding:'1rem',
17+
},
18+
}
19+
20+
interfaceProps{
21+
tutorialList:G.Tutorial[]
22+
}
23+
24+
constNewPage=(props:Props)=>(
25+
<div>
26+
<divstyle={styles.header}>
27+
<span>CodeRoad</span>
28+
</div>
29+
<divstyle={styles.banner}>
30+
<span>Select a Tutorial to Start</span>
31+
</div>
32+
<TutorialListtutorialList={props.tutorialList}/>
33+
</div>
34+
)
35+
36+
exportdefaultNewPage
Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,48 @@
11
import*asReactfrom'react'
2-
import{Button}from'@alifd/next'
2+
import{Card}from'@alifd/next'
3+
4+
conststyles={
5+
card:{
6+
cursor:'pointer',
7+
},
8+
languages:{
9+
display:'flex',
10+
flexDirection:'row',
11+
alignItems:'center',
12+
justifyContent:'flex-end',
13+
width:'100%',
14+
},
15+
languageIcon:{
16+
width:30,
17+
height:30,
18+
},
19+
}
320

421
interfaceProps{
522
title?:string
623
description?:string
724
onSelect():void
825
}
926

27+
// icons from https://konpa.github.io/devicon/
28+
constLanguageIcon=()=>(
29+
<svgviewBox="0 0 128 128"style={styles.languageIcon}>
30+
<pathfill="#F0DB4F"d="M1.408 1.408h125.184v125.185h-125.184z"></path>
31+
<path
32+
fill="#323330"
33+
d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"
34+
></path>
35+
</svg>
36+
)
37+
1038
constTutorialItem=(props:Props)=>(
11-
<div>
39+
<CardonClick={props.onSelect}style={styles.card}>
1240
<h3>{props.title||'Title'}</h3>
1341
<p>{props.description||'Description'}</p>
14-
<ButtononClick={props.onSelect}>Start</Button>
15-
</div>
42+
<divstyle={styles.languages}>
43+
<LanguageIcon/>
44+
</div>
45+
</Card>
1646
)
1747

1848
exportdefaultTutorialItem

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

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,9 @@ import * as G from 'typings/graphql'
44
import*asCRfrom'typings'
55

66
importqueryTutorialsfrom'../../services/apollo/queries/tutorials'
7+
importNewPagefrom'./NewPage'
78
importLoadingPagefrom'../LoadingPage'
89
importErrorViewfrom'../../components/Error'
9-
importTutorialListfrom'./TutorialList'
10-
11-
interfaceProps{
12-
tutorialList:G.Tutorial[]
13-
}
14-
15-
exportconstNewPage=(props:Props)=>(
16-
<div>
17-
<h2>Start a New Tutorial</h2>
18-
<TutorialListtutorialList={props.tutorialList}/>
19-
</div>
20-
)
2110

2211
constLoading=()=><LoadingPagetext="Loading tutorials"/>
2312

‎web-app/src/containers/Tutorial/LevelPage/Level/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const styles = {
4545
}
4646

4747
interfaceProps{
48-
level:G.Level&{index:number}
48+
level:G.Level
4949
onContinue():void
5050
onLoadSolution():void
5151
}
@@ -102,7 +102,7 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
102102
<div>
103103
<divstyle={styles.footer}>
104104
<span>
105-
{level.index.toString()}.{level.title}
105+
{level.index ?`${level.index.toString()}.` :''}{level.title}
106106
</span>
107107
</div>
108108
</div>

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

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,40 @@ import { storiesOf } from '@storybook/react'
33
import{action}from'@storybook/addon-actions'
44

55
importSideBarDecoratorfrom'./utils/SideBarDecorator'
6+
importNewPagefrom'../src/containers/New/NewPage'
67
importTutorialListfrom'../src/containers/New/TutorialList'
78
importTutorialItemfrom'../src/containers/New/TutorialList/TutorialItem'
89

10+
consttutorialList=[
11+
{
12+
id:'1',
13+
version:{
14+
summary:{
15+
title:'Tutorial 1',
16+
description:'The first one',
17+
},
18+
},
19+
},
20+
{
21+
id:'2',
22+
version:{
23+
summary:{
24+
title:'Tutorial 2',
25+
description:'The second one',
26+
},
27+
},
28+
},
29+
]
30+
931
storiesOf('New',module)
1032
.addDecorator(SideBarDecorator)
33+
.add('New Page',()=>{
34+
return<NewPagetutorialList={tutorialList}/>
35+
})
1136
.add('Tutorial List',()=>{
12-
consttutorialList=[
13-
{
14-
id:'1',
15-
version:{
16-
summary:{
17-
title:'Tutorial 1',
18-
description:'The first one',
19-
},
20-
},
21-
},
22-
{
23-
id:'2',
24-
version:{
25-
summary:{
26-
title:'Tutorial 2',
27-
description:'The second one',
28-
},
29-
},
30-
},
31-
]
3237
return<TutorialListtutorialList={tutorialList}/>
3338
})
3439
.add('Tutorial Item',()=>{
35-
consttutorial={
36-
id:'1',
37-
title:'Tutorial 1',
38-
description:'The first one',
39-
}
40+
consttutorial=tutorialList[0]
4041
return<TutorialItemonSelect={action('onSelect')}title={tutorial.title}description={tutorial.description}/>
4142
})

0 commit comments

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