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

Commitff31819

Browse files
committed
setup headers for level page
1 parent9487160 commitff31819

File tree

2 files changed

+57
-21
lines changed

2 files changed

+57
-21
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const styles = {
77
// backgroundColor: '#e6f7ff',
88
// },
99
card:{
10-
paddingRight:'1rem',
10+
padding:'01rem 1rem 0.5rem',
1111
},
1212
}
1313

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

Lines changed: 56 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ const styles = {
99
card:{
1010
padding:0,
1111
},
12+
header:{
13+
height:'36px',
14+
backgroundColor:'#EBEBEB',
15+
fontSize:'16px',
16+
lineHeight:'16px',
17+
padding:'10px 1rem',
18+
},
1219
content:{
1320
padding:'0rem 1rem',
1421
paddingBottom:'1rem',
@@ -17,9 +24,24 @@ const styles = {
1724
padding:'0rem 1rem',
1825
},
1926
steps:{
20-
padding:'1rem 0rem',
27+
padding:'1rem 16px',
28+
},
29+
title:{
30+
fontSize:'1.2rem',
31+
fontWeight:'bold'as'bold',
32+
lineHeight:'1.2rem',
33+
},
34+
footer:{
35+
height:'36px',
36+
backgroundColor:'black',
37+
fontSize:'16px',
38+
lineHeight:'16px',
39+
padding:'10px 1rem',
40+
color:'white',
41+
position:'absolute'as'absolute',
42+
bottom:0,
43+
width:'100%',
2144
},
22-
title:{},
2345
}
2446

2547
interfaceProps{
@@ -40,32 +62,46 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
4062

4163
return(
4264
<divstyle={styles.card}>
43-
<divstyle={styles.content}>
44-
<h2style={styles.title}>{level.title}</h2>
45-
<Markdown>{level.description||''}</Markdown>
65+
<div>
66+
<divstyle={styles.header}>
67+
<span>Learn</span>
68+
</div>
69+
<divstyle={styles.content}>
70+
<h2style={styles.title}>{level.title}</h2>
71+
<Markdown>{level.description||''}</Markdown>
72+
</div>
4673
</div>
47-
<divstyle={styles.steps}>
48-
<Stepcurrent={activeIndex}direction="ver"shape="dot"animationreadOnly>
49-
{level.steps.map((step:G.Step|null,index:number)=>{
50-
if(!step){
51-
returnnull
52-
}
53-
return(
54-
<Step.Item
55-
key={step.id}
56-
title={step.title||`Step${index+1}`}
57-
content={<StepDescriptiontext={step.description}mode={step.status}onLoadSolution={onLoadSolution}/>}
58-
/>
59-
)
60-
})}
61-
</Step>
74+
75+
<div>
76+
<divstyle={styles.header}>Tasks</div>
77+
<divstyle={styles.steps}>
78+
<Stepcurrent={activeIndex}direction="ver"shape="dot"animationreadOnly>
79+
{level.steps.map((step:G.Step|null,index:number)=>{
80+
if(!step){
81+
returnnull
82+
}
83+
return(
84+
<Step.Item
85+
key={step.id}
86+
title={step.title||`Step${index+1}`}
87+
content={
88+
<StepDescriptiontext={step.description}mode={step.status}onLoadSolution={onLoadSolution}/>
89+
}
90+
/>
91+
)
92+
})}
93+
</Step>
94+
</div>
6295
</div>
6396

6497
{level.status==='COMPLETE'&&(
6598
<divstyle={styles.options}>
6699
<ButtononClick={onContinue}>Continue</Button>
67100
</div>
68101
)}
102+
<div>
103+
<divstyle={styles.footer}>{level.title}</div>
104+
</div>
69105
</div>
70106
)
71107
}

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp