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

Commit7f74518

Browse files
committed
style and positioning improvements
1 parent5605994 commit7f74518

File tree

5 files changed

+44
-40
lines changed

5 files changed

+44
-40
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ interface Props {
55
}
66

77
constresize=()=>({
8-
width:window.innerWidth-20,
9-
height:window.innerHeight-20,
8+
width:window.innerWidth,
9+
height:window.innerHeight,
1010
})
1111

1212
constWorkspace=({ children}:Props)=>{
@@ -20,6 +20,7 @@ const Workspace = ({ children }: Props) => {
2020
conststyles={
2121
page:{
2222
display:'flex'as'flex',
23+
position:'relative'as'relative',
2324
margin:0,
2425
backgroundColor:'white',
2526
},

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

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,13 @@ import ProcessEvents from '../../../components/ProcessEvents'
99

1010
conststyles={
1111
page:{
12+
backgroundColor:'white',
1213
position:'relative'as'relative',
1314
display:'flex'as'flex',
1415
flexDirection:'column'as'column',
1516
padding:0,
17+
paddingBottom:'36px',
18+
height:'auto',
1619
width:'100%',
1720
},
1821
header:{
@@ -26,9 +29,6 @@ const styles = {
2629
padding:'0rem 1rem',
2730
paddingBottom:'1rem',
2831
},
29-
options:{
30-
padding:'0rem 1rem',
31-
},
3232
tasks:{
3333
paddingBottom:'5rem',
3434
},
@@ -46,15 +46,20 @@ const styles = {
4646
bottom:'36px',
4747
},
4848
footer:{
49+
display:'flex'as'flex',
50+
flexDirection:'row'as'row',
51+
justifyContent:'space-between',
52+
alignItems:'center',
4953
height:'36px',
5054
backgroundColor:'black',
5155
fontSize:'16px',
5256
lineHeight:'16px',
5357
padding:'10px 1rem',
54-
position:'absolute'as'absolute',
58+
position:'fixed'as'fixed',
5559
bottom:0,
60+
left:0,
61+
right:0,
5662
color:'white',
57-
width:'100%',
5863
},
5964
}
6065

@@ -72,14 +77,12 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
7277

7378
return(
7479
<divstyle={styles.page}>
75-
<div>
76-
<divstyle={styles.header}>
77-
<span>Learn</span>
78-
</div>
79-
<divstyle={styles.content}>
80-
<h2style={styles.title}>{level.title}</h2>
81-
<Markdown>{level.content||''}</Markdown>
82-
</div>
80+
<divstyle={styles.header}>
81+
<span>Learn</span>
82+
</div>
83+
<divstyle={styles.content}>
84+
<h2style={styles.title}>{level.title}</h2>
85+
<Markdown>{level.content||''}</Markdown>
8386
</div>
8487

8588
<divstyle={styles.tasks}>
@@ -102,27 +105,24 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
102105
</div>
103106
</div>
104107

105-
<div>
106-
{level.status==='COMPLETE'&&(
107-
<divstyle={styles.options}>
108-
<ButtononClick={onContinue}>Continue</Button>
109-
</div>
110-
)}
111-
112-
{processes.length>0&&(
113-
<divstyle={styles.processes}>
114-
<ProcessEventsprocesses={processes}/>
115-
</div>
116-
)}
117-
118-
<div>
119-
<divstyle={styles.footer}>
120-
<span>
121-
{typeoflevel.index==='number' ?`${level.index+1}. ` :''}
122-
{level.title}
123-
</span>
124-
</div>
108+
{processes.length>0&&(
109+
<divstyle={styles.processes}>
110+
<ProcessEventsprocesses={processes}/>
125111
</div>
112+
)}
113+
114+
<divstyle={styles.footer}>
115+
<span>
116+
{typeoflevel.index==='number' ?`${level.index+1}. ` :''}
117+
{level.title}
118+
</span>
119+
<span>
120+
{level.status==='COMPLETE'&&(
121+
<Buttontype="primary"onClick={onContinue}>
122+
Continue
123+
</Button>
124+
)}
125+
</span>
126126
</div>
127127
</div>
128128
)

‎web-app/src/styles/index.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ body {
1010
height:100%;
1111
width:100%;
1212
margin:0;
13+
padding:0;
1314
font-family: -apple-system, BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans',
1415
'Droid Sans','Helvetica Neue', sans-serif;
1516
-webkit-font-smoothing: antialiased;
1617
-moz-osx-font-smoothing: grayscale;
18+
background-color: white;
1719
}
1820

1921
code {

‎web-app/stories/Level.stories.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,31 +94,31 @@ storiesOf('Level', module)
9494
commands:['npm install'],
9595
files:['package.json'],
9696
},
97-
status:'ACTIVE',
97+
status:'COMPLETE',
9898
},
9999
{
100100
id:'L1:S2',
101101
content:'Should support markdown test\n ```ts\nvar a = 1\n```\nwhew it works!',
102102
setup:{commits:['8a8a5cb'],commands:[],files:['src/main.ts']},
103103
solution:{commits:['c2f7973'],commands:[],files:['src/main.ts']},
104-
status:'INCOMPLETE',
104+
status:'COMPLETE',
105105
},
106106
{
107107
id:'L1:S3',
108108
content:'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
109109
setup:{commits:['992bcb1'],commands:[],files:['src/main.ts']},
110110
solution:{commits:['1b92779'],commands:[],files:['src/main.ts']},
111-
status:'INCOMPLETE',
111+
status:'COMPLETE',
112112
},
113113
{
114114
id:'L1:S4',
115115
content:'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
116116
setup:{commits:['be32adb'],commands:[],files:['src/main.ts']},
117117
solution:{commits:['7fe26cb'],commands:[],files:['src/main.ts']},
118-
status:'INCOMPLETE',
118+
status:'COMPLETE',
119119
},
120120
],
121-
status:'ACTIVE',
121+
status:'COMPLETE',
122122
}
123123
return(
124124
<Level

‎web-app/stories/utils/SideBarDecorator.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const styles = {
99
borderRight:'2px solid black',
1010
width:'50rem',
1111
height:window.innerHeight,
12+
backgroundColor:'yellow',
1213
},
1314
}
1415

0 commit comments

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