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

Commit72cf55c

Browse files
committed
fix bottom padding on level page
1 parent81489f8 commit72cf55c

File tree

1 file changed

+60
-57
lines changed
  • web-app/src/containers/Tutorial/LevelPage

1 file changed

+60
-57
lines changed

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

Lines changed: 60 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,14 @@ const styles = {
1212
page:{
1313
backgroundColor:'white',
1414
position:'relative'as'relative',
15+
height:'auto',
16+
width:'100%',
17+
},
18+
content:{
1519
display:'flex'as'flex',
1620
flexDirection:'column'as'column',
1721
padding:0,
1822
paddingBottom:'5rem',
19-
height:'auto',
20-
width:'100%',
2123
},
2224
header:{
2325
height:'2rem',
@@ -26,13 +28,11 @@ const styles = {
2628
lineHeight:'1rem',
2729
padding:'10px 1rem',
2830
},
29-
content:{
31+
text:{
3032
padding:'0rem 1rem',
3133
paddingBottom:'1rem',
3234
},
33-
tasks:{
34-
paddingBottom:'5rem',
35-
},
35+
tasks:{},
3636
steps:{
3737
padding:'1rem 1rem',
3838
},
@@ -101,63 +101,66 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro
101101

102102
return(
103103
<divcss={styles.page}>
104-
<divcss={styles.header}>
105-
<span>Learn</span>
106-
</div>
107104
<divcss={styles.content}>
108-
<h2css={styles.title}>{level.title}</h2>
109-
<Markdown>{level.content||''}</Markdown>
110-
</div>
105+
<divcss={styles.header}>
106+
<span>Learn</span>
107+
</div>
108+
<divcss={styles.text}>
109+
<h2css={styles.title}>{level.title}</h2>
110+
<Markdown>{level.content||''}</Markdown>
111+
</div>
111112

112-
{level.steps.length ?(
113-
<divcss={styles.tasks}>
114-
<divcss={styles.header}>Tasks</div>
115-
<divcss={styles.steps}>
116-
{level.steps.map((step:(G.Step&{status:T.ProgressStatus})|null,index:number)=>{
117-
if(!step){
118-
returnnull
119-
}
120-
return(
121-
<Step
122-
key={step.id}
123-
order={index+1}
124-
status={step.status}
125-
content={step.content}
126-
onLoadSolution={onLoadSolution}
127-
/>
128-
)
129-
})}
113+
{level.steps.length ?(
114+
<divcss={styles.tasks}>
115+
<divcss={styles.header}>Tasks</div>
116+
<divcss={styles.steps}>
117+
{level.steps.map((step:(G.Step&{status:T.ProgressStatus})|null,index:number)=>{
118+
if(!step){
119+
returnnull
120+
}
121+
return(
122+
<Step
123+
key={step.id}
124+
order={index+1}
125+
status={step.status}
126+
content={step.content}
127+
onLoadSolution={onLoadSolution}
128+
/>
129+
)
130+
})}
131+
</div>
130132
</div>
131-
</div>
132-
) :null}
133-
<divref={pageBottomRef}/>
133+
) :null}
134134

135-
{(testStatus||processes.length>0)&&(
136-
<divcss={styles.processes}>
137-
<ProcessMessagesprocesses={processes}testStatus={testStatus}/>
138-
</div>
139-
)}
135+
<divref={pageBottomRef}/>
140136

141-
<divcss={styles.nux}>
142-
<NuxTutorialonLoadSolution={onLoadSolution}/>
143-
</div>
137+
{(testStatus||processes.length>0)&&(
138+
<divcss={styles.processes}>
139+
<ProcessMessagesprocesses={processes}testStatus={testStatus}/>
140+
</div>
141+
)}
144142

145-
<divcss={styles.footer}>
146-
<span>
147-
{typeoflevel.index==='number' ?`${level.index+1}. ` :''}
148-
{level.title}
149-
</span>
150-
<span>
151-
{level.status==='COMPLETE'||!level.steps.length ?(
152-
<Buttontype="primary"onClick={onContinue}>
153-
Continue
154-
</Button>
155-
) :(
156-
<spancss={styles.taskCount}>
157-
{currentStep} of{level.steps.length} tasks
158-
</span>
159-
)}
160-
</span>
143+
<divcss={styles.nux}>
144+
<NuxTutorialonLoadSolution={onLoadSolution}/>
145+
</div>
146+
147+
<divcss={styles.footer}>
148+
<span>
149+
{typeoflevel.index==='number' ?`${level.index+1}. ` :''}
150+
{level.title}
151+
</span>
152+
<span>
153+
{level.status==='COMPLETE'||!level.steps.length ?(
154+
<Buttontype="primary"onClick={onContinue}>
155+
Continue
156+
</Button>
157+
) :(
158+
<spancss={styles.taskCount}>
159+
{currentStep} of{level.steps.length} tasks
160+
</span>
161+
)}
162+
</span>
163+
</div>
161164
</div>
162165
</div>
163166
)

0 commit comments

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