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

Commit0ee8b05

Browse files
committed
style without absolute positioning
1 parent70119ed commit0ee8b05

File tree

2 files changed

+29
-23
lines changed

2 files changed

+29
-23
lines changed

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

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ import Markdown from '../../components/Markdown'
77
conststyles={
88
page:{
99
position:'relative'as'relative',
10+
display:'flex'as'flex',
11+
flexDirection:'column'as'column',
12+
justifyContent:'space-between',
1013
width:'100%',
14+
height:'100%',
1115
},
1216
summary:{
1317
padding:'0rem 1rem 1rem 1rem',
@@ -33,8 +37,6 @@ const styles = {
3337
flexDirection:'row'as'row',
3438
alignItems:'center'as'center',
3539
justifyContent:'flex-end'as'flex-end',
36-
position:'absolute'as'absolute',
37-
bottom:0,
3840
height:'50px',
3941
padding:'1rem',
4042
paddingRight:'2rem',
@@ -52,26 +54,28 @@ interface Props {
5254

5355
constSummary=({ title, description, levels, onNext}:Props)=>(
5456
<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>
6257
<div>
6358
<divstyle={styles.header}>
64-
<span>Levels</span>
59+
<span>CodeRoad</span>
60+
</div>
61+
<divstyle={styles.summary}>
62+
<h2style={styles.title}>{title}</h2>
63+
<Markdown>{description}</Markdown>
6564
</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-
))}
65+
<div>
66+
<divstyle={styles.header}>
67+
<span>Levels</span>
68+
</div>
69+
<divstyle={styles.levelList}>
70+
{levels.map((level:G.Level,index:number)=>(
71+
<divkey={index}>
72+
<h4>
73+
{index+1}.{level.title}
74+
</h4>
75+
<div>{level.description}</div>
76+
</div>
77+
))}
78+
</div>
7579
</div>
7680
</div>
7781

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,14 @@ import Button from '../../../components/Button'
77
importMarkdownfrom'../../../components/Markdown'
88

99
conststyles={
10-
card:{
10+
page:{
1111
position:'relative'as'relative',
12+
display:'flex'as'flex',
13+
flexDirection:'column'as'column',
14+
justifyContent:'space-between',
1215
padding:0,
1316
width:'100%',
17+
height:'100%',
1418
},
1519
header:{
1620
height:'36px',
@@ -41,8 +45,6 @@ const styles = {
4145
lineHeight:'16px',
4246
padding:'10px 1rem',
4347
color:'white',
44-
position:'absolute'as'absolute',
45-
bottom:0,
4648
width:'100%',
4749
},
4850
}
@@ -59,7 +61,7 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
5961
}
6062

6163
return(
62-
<divstyle={styles.card}>
64+
<divstyle={styles.page}>
6365
<div>
6466
<divstyle={styles.header}>
6567
<span>Learn</span>

0 commit comments

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