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

Commited378e3

Browse files
authored
Merge pull request#147 from ShMcK/feature/select-tutorial-style
Feature/select tutorial style
2 parents6c48309 +3828374 commited378e3

File tree

8 files changed

+129
-98
lines changed

8 files changed

+129
-98
lines changed

‎web-app/src/Routes.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import useRouter from './components/Router'
33
importWorkspacefrom'./components/Workspace'
44
importLoadingPagefrom'./containers/Loading'
55
importStartPagefrom'./containers/Start'
6-
importNewPagefrom'./containers/New'
6+
importSelectTutorialPagefrom'./containers/SelectTutorial'
77
importOverviewPagefrom'./containers/Overview'
88
importCompletedPagefrom'./containers/Tutorial/CompletedPage'
99
importLevelSummaryPagefrom'./containers/Tutorial/LevelPage'
@@ -27,7 +27,7 @@ const Routes = () => {
2727
<LoadingPagetext="Error"context={context}/>
2828
</Route>
2929
<Routepath="Setup.SelectTutorial">
30-
<NewPagesend={send}context={context}/>
30+
<SelectTutorialPagesend={send}context={context}/>
3131
</Route>
3232
<Routepath="Setup.Summary">
3333
<OverviewPagesend={send}context={context}/>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import*asReactfrom'react'
2+
import{css,jsx}from'@emotion/core'
3+
4+
conststyles={
5+
tag:{
6+
padding:'3px',
7+
backgroundColor:'rgb(225, 236, 244)',
8+
color:'rgb(57, 115, 157)',
9+
},
10+
}
11+
12+
typeProps={
13+
children:string
14+
}
15+
16+
constTag=(props:Props)=><divcss={styles.tag}>{props.children}</div>
17+
18+
exportdefaultTag

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

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

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

Lines changed: 0 additions & 34 deletions
This file was deleted.
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import*asReactfrom'react'
2+
import*asTfrom'typings'
3+
import*asGfrom'typings/graphql'
4+
import{css,jsx}from'@emotion/core'
5+
importTutorialItemfrom'./TutorialItem'
6+
7+
conststyles={
8+
page:{
9+
position:'relative'as'relative',
10+
width:'100%',
11+
},
12+
header:{
13+
height:'2rem',
14+
backgroundColor:'#EBEBEB',
15+
fontSize:'1rem',
16+
lineHeight:'1rem',
17+
padding:'10px 1rem',
18+
},
19+
banner:{
20+
minHeight:'3rem',
21+
fontSize:'1rem',
22+
padding:'1rem',
23+
},
24+
}
25+
26+
interfaceProps{
27+
send(action:T.Action):void
28+
tutorialList:G.Tutorial[]
29+
}
30+
31+
constSelectTutorial=(props:Props)=>{
32+
constonSelect=(tutorial:G.Tutorial)=>{
33+
props.send({
34+
type:'SELECT_TUTORIAL',
35+
payload:{
36+
tutorial,
37+
},
38+
})
39+
}
40+
return(
41+
<divcss={styles.page}>
42+
<divcss={styles.header}>
43+
<span>CodeRoad</span>
44+
</div>
45+
<divcss={styles.banner}>
46+
<span>Select a tutorial to launch in this workspace:</span>
47+
</div>
48+
<div>
49+
{props.tutorialList.map((tutorial:G.Tutorial)=>(
50+
<TutorialItem
51+
key={tutorial.id}
52+
onSelect={()=>onSelect(tutorial)}
53+
title={tutorial.summary.title||''}
54+
description={tutorial.summary.description||''}
55+
/>
56+
))}
57+
</div>
58+
</div>
59+
)
60+
}
61+
62+
exportdefaultSelectTutorial

‎web-app/src/containers/New/TutorialList/TutorialItem.tsxrenamed to‎web-app/src/containers/SelectTutorial/TutorialItem.tsx

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,36 @@
11
import*asReactfrom'react'
22
import{css,jsx}from'@emotion/core'
3-
importCardfrom'../../../components/Card'
4-
importMarkdownfrom'../../../components/Markdown'
3+
importCardfrom'../../components/Card'
4+
importTagfrom'../../components/Tag'
55

66
conststyles={
77
card:{
88
cursor:'pointer',
9+
display:'inline-flex'as'inline-flex',
10+
flexDirection:'row'as'row',
11+
minWidth:500,
12+
},
13+
left:{
14+
width:80,
15+
display:'flex'as'flex',
16+
alignItems:'center'as'center',
17+
},
18+
right:{
19+
flex:'1',
20+
display:'flex'as'flex',
21+
flexDirection:'column'as'column',
22+
},
23+
title:{
24+
margin:0,
25+
},
26+
author:{
27+
margin:'0 0 2px 0',
28+
color:'grey',
29+
},
30+
tags:{
31+
display:'flex'as'flex',
32+
alignItems:'center'as'center',
33+
padding:'2px',
934
},
1035
languages:{
1136
display:'flex'as'flex',
@@ -38,11 +63,18 @@ const LanguageIcon = () => (
3863
)
3964

4065
constTutorialItem=(props:Props)=>(
41-
<CardonClick={props.onSelect}style={styles.card}>
42-
<h3>{props.title||'Title'}</h3>
43-
<Markdownminimal>{props.description||'Description'}</Markdown>
44-
<divcss={styles.languages}>
45-
<LanguageIcon/>
66+
<CardonClick={props.onSelect}>
67+
<divstyle={styles.card}>
68+
<divcss={styles.left}>
69+
<imgsrc="https://via.placeholder.com/75/75"height="75px"width="75px"/>
70+
</div>
71+
<divcss={styles.right}>
72+
<h2css={styles.title}>{props.title||'Title'}</h2>
73+
<h3css={styles.author}>Author Name</h3>
74+
<divcss={styles.tags}>
75+
<Tag>javascript</Tag>
76+
</div>
77+
</div>
4678
</div>
4779
</Card>
4880
)

‎web-app/src/containers/New/index.tsxrenamed to‎web-app/src/containers/SelectTutorial/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import * as G from 'typings/graphql'
55
importErrorViewfrom'../../components/Error'
66
importqueryTutorialsfrom'../../services/apollo/queries/tutorials'
77
importLoadingPagefrom'../Loading'
8-
importNewPagefrom'./NewPage'
8+
importSelectTutorialfrom'./SelectTutorial'
99

1010
interfaceContainerProps{
1111
send(action:T.Action):void
@@ -16,7 +16,7 @@ interface TutorialsData {
1616
tutorials:G.Tutorial[]
1717
}
1818

19-
constNewPageContainer=(props:ContainerProps)=>{
19+
constSelectPageContainer=(props:ContainerProps)=>{
2020
const{ data, loading, error}=useQuery<TutorialsData>(queryTutorials,{
2121
fetchPolicy:'no-cache',
2222
})
@@ -33,7 +33,7 @@ const NewPageContainer = (props: ContainerProps) => {
3333
returnnull
3434
}
3535

36-
return<NewPagetutorialList={data.tutorials}send={props.send}/>
36+
return<SelectTutorialtutorialList={data.tutorials}send={props.send}/>
3737
}
3838

39-
exportdefaultNewPageContainer
39+
exportdefaultSelectPageContainer

‎web-app/stories/New.stories.tsxrenamed to‎web-app/stories/SelectTutorial.stories.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import{action}from'@storybook/addon-actions'
22
import{storiesOf}from'@storybook/react'
33
importReactfrom'react'
4-
importNewPagefrom'../src/containers/New/NewPage'
5-
importTutorialListfrom'../src/containers/New/TutorialList'
6-
importTutorialItemfrom'../src/containers/New/TutorialList/TutorialItem'
4+
importSelectTutorialfrom'../src/containers/SelectTutorial/SelectTutorial'
5+
importTutorialItemfrom'../src/containers/SelectTutorial/TutorialItem'
76
importSideBarDecoratorfrom'./utils/SideBarDecorator'
87

98
consttutorialList=[
@@ -25,11 +24,8 @@ const tutorialList = [
2524

2625
storiesOf('Select Tutorial',module)
2726
.addDecorator(SideBarDecorator)
28-
.add('New Page',()=>{
29-
return<NewPagetutorialList={tutorialList}/>
30-
})
31-
.add('Tutorial List',()=>{
32-
return<TutorialListtutorialList={tutorialList}/>
27+
.add('Select Tutorial Page',()=>{
28+
return<SelectTutorialtutorialList={tutorialList}send={action('send')}/>
3329
})
3430
.add('Tutorial Item',()=>{
3531
consttutorial=tutorialList[0]

0 commit comments

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