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

Commit3888e8b

Browse files
committed
add relative positioning to pages for storybook
1 parent121d5cb commit3888e8b

File tree

6 files changed

+228
-242
lines changed

6 files changed

+228
-242
lines changed

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

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,14 @@ const styles = {
1515
}
1616

1717
interfaceProps{
18-
status:'COMPLETE'|'INCOMPLETE'|'ACTIVE'|'LOADING'
18+
status:'COMPLETE'|'INCOMPLETE'|'ACTIVE'
1919
}
2020

2121
constCheckbox=(props:Props)=>{
2222
constonChange=()=>{
2323
/* read only */
2424
}
2525

26-
if(props.status==='LOADING'){
27-
return(
28-
<divstyle={styles.box}>
29-
<input
30-
ref={input=>{
31-
/* ref because unable to apply indeterminate on jsx */
32-
if(input){
33-
input.indeterminate=true
34-
}
35-
}}
36-
type="checkbox"
37-
checked={false}
38-
disabled={true}
39-
onChange={onChange}
40-
/>
41-
</div>
42-
)
43-
}
44-
4526
constchecked=props.status==='COMPLETE'
4627

4728
return(

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

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,51 +5,52 @@ import * as CR from 'typings'
55
import*asGfrom'typings/graphql'
66

77
conststyles={
8-
page:{
9-
width:'100%',
10-
},
8+
page:{
9+
position:'relative'as'relative',
10+
width:'100%',
11+
},
1112
}
1213

1314
interfaceProps{
14-
tutorial:G.Tutorial
15-
onContinue():void
16-
onNew():void
15+
tutorial:G.Tutorial
16+
onContinue():void
17+
onNew():void
1718
}
1819

1920
exportconstContinuePage=(props:Props)=>(
20-
<divstyle={styles.page}>
21-
<h3>Continue</h3>
22-
<Card>
23-
<div>
24-
<h2>{props.tutorial.version.summary.title}</h2>
25-
<p>{props.tutorial.version.summary.description}</p>
26-
<ButtononClick={props.onContinue}>Resume</Button>
27-
</div>
28-
</Card>
29-
<Card>
30-
<div>
31-
<h2>Start a New Tutorial</h2>
32-
<ButtononClick={props.onNew}>Select New Tutorial</Button>
33-
</div>
34-
</Card>
35-
</div>
21+
<divstyle={styles.page}>
22+
<h3>Continue</h3>
23+
<Card>
24+
<div>
25+
<h2>{props.tutorial.version.summary.title}</h2>
26+
<p>{props.tutorial.version.summary.description}</p>
27+
<ButtononClick={props.onContinue}>Resume</Button>
28+
</div>
29+
</Card>
30+
<Card>
31+
<div>
32+
<h2>Start a New Tutorial</h2>
33+
<ButtononClick={props.onNew}>Select New Tutorial</Button>
34+
</div>
35+
</Card>
36+
</div>
3637
)
3738

3839
interfaceContainerProps{
39-
context:CR.MachineContext
40-
send(action:CR.Action|string):void
40+
context:CR.MachineContext
41+
send(action:CR.Action|string):void
4142
}
4243

4344
constContinuePageContainer=({ context, send}:ContainerProps)=>{
44-
const{ tutorial}=context
45+
const{ tutorial}=context
4546

46-
if(!tutorial){
47-
thrownewError('Tutorial not found')
48-
}
47+
if(!tutorial){
48+
thrownewError('Tutorial not found')
49+
}
4950

50-
return(
51-
<ContinuePagetutorial={tutorial}onContinue={()=>send('TUTORIAL_START')}onNew={()=>send('TUTORIAL_SELECT')}/>
52-
)
51+
return(
52+
<ContinuePagetutorial={tutorial}onContinue={()=>send('TUTORIAL_START')}onNew={()=>send('TUTORIAL_SELECT')}/>
53+
)
5354
}
5455

5556
exportdefaultContinuePageContainer

‎web-app/src/containers/LoadingPage.tsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,23 @@ import * as React from 'react'
22
importLoadingfrom'../components/Loading'
33

44
interfaceProps{
5-
text:string
5+
text:string
66
}
77

88
conststyles={
9-
page:{
10-
display:'flex',
11-
alignItems:'center',
12-
justifyContent:'center',
13-
width:'100%',
14-
},
9+
page:{
10+
position:'relative'as'relative',
11+
display:'flex',
12+
alignItems:'center',
13+
justifyContent:'center',
14+
width:'100%',
15+
},
1516
}
1617

1718
constLoadingPage=({ text}:Props)=>(
18-
<divstyle={styles.page}>
19-
<Loadingtext={text}/>
20-
</div>
19+
<divstyle={styles.page}>
20+
<Loadingtext={text}/>
21+
</div>
2122
)
2223

2324
exportdefaultLoadingPage

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

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,38 @@ import * as G from 'typings/graphql'
33
importTutorialListfrom'./TutorialList'
44

55
conststyles={
6-
page:{
7-
width:'100%',
8-
},
9-
header:{
10-
height:'36px',
11-
backgroundColor:'#EBEBEB',
12-
fontSize:'16px',
13-
lineHeight:'16px',
14-
padding:'10px 1rem',
15-
},
16-
banner:{
17-
height:'50px',
18-
fontSize:'1rem',
19-
padding:'1rem',
20-
},
6+
page:{
7+
position:'relative'as'relative',
8+
width:'100%',
9+
},
10+
header:{
11+
height:'36px',
12+
backgroundColor:'#EBEBEB',
13+
fontSize:'16px',
14+
lineHeight:'16px',
15+
padding:'10px 1rem',
16+
},
17+
banner:{
18+
height:'50px',
19+
fontSize:'1rem',
20+
padding:'1rem',
21+
},
2122
}
2223

2324
interfaceProps{
24-
tutorialList:G.Tutorial[]
25+
tutorialList:G.Tutorial[]
2526
}
2627

2728
constNewPage=(props:Props)=>(
28-
<divstyle={styles.page}>
29-
<divstyle={styles.header}>
30-
<span>CodeRoad</span>
31-
</div>
32-
<divstyle={styles.banner}>
33-
<span>Select a Tutorial to Start</span>
34-
</div>
35-
<TutorialListtutorialList={props.tutorialList}/>
36-
</div>
29+
<divstyle={styles.page}>
30+
<divstyle={styles.header}>
31+
<span>CodeRoad</span>
32+
</div>
33+
<divstyle={styles.banner}>
34+
<span>Select a Tutorial to Start</span>
35+
</div>
36+
<TutorialListtutorialList={props.tutorialList}/>
37+
</div>
3738
)
3839

3940
exportdefaultNewPage

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

Lines changed: 70 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -5,82 +5,83 @@ import * as G from 'typings/graphql'
55
importMarkdownfrom'../../components/Markdown'
66

77
conststyles={
8-
page:{
9-
width:'100%',
10-
},
11-
summary:{
12-
padding:'0rem 1rem 1rem 1rem',
13-
},
14-
title:{
15-
fontWeight:'bold'as'bold',
16-
},
17-
description:{
18-
fontSize:'1rem',
19-
},
20-
header:{
21-
height:'36px',
22-
backgroundColor:'#EBEBEB',
23-
fontSize:'16px',
24-
lineHeight:'16px',
25-
padding:'10px 1rem',
26-
},
27-
levelList:{
28-
padding:'0rem 1rem',
29-
},
30-
options:{
31-
display:'flex'as'flex',
32-
flexDirection:'row'as'row',
33-
alignItems:'center'as'center',
34-
justifyContent:'flex-end'as'flex-end',
35-
position:'absolute'as'absolute',
36-
bottom:0,
37-
height:'50px',
38-
padding:'1rem',
39-
paddingRight:'2rem',
40-
backgroundColor:'black',
41-
width:'100%',
42-
},
8+
page:{
9+
position:'relative'as'relative',
10+
width:'100%',
11+
},
12+
summary:{
13+
padding:'0rem 1rem 1rem 1rem',
14+
},
15+
title:{
16+
fontWeight:'bold'as'bold',
17+
},
18+
description:{
19+
fontSize:'1rem',
20+
},
21+
header:{
22+
height:'36px',
23+
backgroundColor:'#EBEBEB',
24+
fontSize:'16px',
25+
lineHeight:'16px',
26+
padding:'10px 1rem',
27+
},
28+
levelList:{
29+
padding:'0rem 1rem',
30+
},
31+
options:{
32+
display:'flex'as'flex',
33+
flexDirection:'row'as'row',
34+
alignItems:'center'as'center',
35+
justifyContent:'flex-end'as'flex-end',
36+
position:'absolute'as'absolute',
37+
bottom:0,
38+
height:'50px',
39+
padding:'1rem',
40+
paddingRight:'2rem',
41+
backgroundColor:'black',
42+
width:'100%',
43+
},
4344
}
4445

4546
interfaceProps{
46-
title:string
47-
description:string
48-
levels:G.Level[]
49-
onNext():void
47+
title:string
48+
description:string
49+
levels:G.Level[]
50+
onNext():void
5051
}
5152

5253
constSummary=({ title, description, levels, onNext}:Props)=>(
53-
<divstyle={styles.page}>
54-
<divstyle={styles.header}>
55-
<span>CodeRoad</span>
56-
</div>
57-
<divstyle={styles.summary}>
58-
<h2style={styles.title}>{title}</h2>
59-
<Markdown>{description}</Markdown>
60-
</div>
61-
<div>
62-
<divstyle={styles.header}>
63-
<span>Levels</span>
64-
</div>
65-
<divstyle={styles.levelList}>
66-
{levels.map((level:G.Level,index:number)=>(
67-
<divkey={index}>
68-
<h4>
69-
{index+1}.{level.title}
70-
</h4>
71-
<div>{level.description}</div>
72-
</div>
73-
))}
74-
</div>
75-
</div>
54+
<divstyle={styles.page}>
55+
<divstyle={styles.header}>
56+
<span>CodeRoad</span>
57+
</div>
58+
<divstyle={styles.summary}>
59+
<h2style={styles.title}>{title}</h2>
60+
<Markdown>{description}</Markdown>
61+
</div>
62+
<div>
63+
<divstyle={styles.header}>
64+
<span>Levels</span>
65+
</div>
66+
<divstyle={styles.levelList}>
67+
{levels.map((level:G.Level,index:number)=>(
68+
<divkey={index}>
69+
<h4>
70+
{index+1}.{level.title}
71+
</h4>
72+
<div>{level.description}</div>
73+
</div>
74+
))}
75+
</div>
76+
</div>
7677

77-
<divstyle={styles.options}>
78-
{/* TODO: Add back button */}
79-
<Buttontype="primary"onClick={()=>onNext()}>
80-
Start
81-
</Button>
82-
</div>
83-
</div>
78+
<divstyle={styles.options}>
79+
{/* TODO: Add back button */}
80+
<Buttontype="primary"onClick={()=>onNext()}>
81+
Start
82+
</Button>
83+
</div>
84+
</div>
8485
)
8586

8687
exportdefaultSummary

0 commit comments

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