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
export type Level = {
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 * as React from 'react'
2+
import * as G from 'typings/graphql'
3+
import TutorialList from './TutorialList'
4+
5+
const styles = {
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+
interface Props {
21+
tutorialList: G.Tutorial[]
22+
}
23+
24+
const NewPage = (props: Props) => (
25+
<div>
26+
<div style={styles.header}>
27+
<span>CodeRoad</span>
28+
</div>
29+
<div style={styles.banner}>
30+
<span>Select a Tutorial to Start</span>
31+
</div>
32+
<TutorialList tutorialList={props.tutorialList} />
33+
</div>
34+
)
35+
36+
export default NewPage
Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,48 @@
11
import * as React from 'react'
2-
import { Button } from '@alifd/next'
2+
import { Card } from '@alifd/next'
3+
4+
const styles = {
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
interface Props {
522
title?: string
623
description?: string
724
onSelect(): void
825
}
926

27+
// icons from https://konpa.github.io/devicon/
28+
const LanguageIcon = () => (
29+
<svg viewBox="0 0 128 128" style={styles.languageIcon}>
30+
<path fill="#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
const TutorialItem = (props: Props) => (
11-
<div>
39+
<Card onClick={props.onSelect} style={styles.card}>
1240
<h3>{props.title || 'Title'}</h3>
1341
<p>{props.description || 'Description'}</p>
14-
<Button onClick={props.onSelect}>Start</Button>
15-
</div>
42+
<div style={styles.languages}>
43+
<LanguageIcon />
44+
</div>
45+
</Card>
1646
)
1747

1848
export default TutorialItem

‎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 * as CR from 'typings'
55

66
import queryTutorials from '../../services/apollo/queries/tutorials'
7+
import NewPage from './NewPage'
78
import LoadingPage from '../LoadingPage'
89
import ErrorView from '../../components/Error'
9-
import TutorialList from './TutorialList'
10-
11-
interface Props {
12-
tutorialList: G.Tutorial[]
13-
}
14-
15-
export const NewPage = (props: Props) => (
16-
<div>
17-
<h2>Start a New Tutorial</h2>
18-
<TutorialList tutorialList={props.tutorialList} />
19-
</div>
20-
)
2110

2211
const Loading = () => <LoadingPage text="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-
const tutorialList = [
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-
const tutorial = {
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