8000 setup headers for level page · crabbedbushel/coderoad-vscode@ff31819 · GitHub
[go: up one dir, main page]
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
Appearance settings

Commit ff31819

Browse files
ShMcKShMcK
committed
setup headers for level page
1 parent 9487160 commit ff31819

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: '0 1rem 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
interface Props {
@@ -40,32 +62,46 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
4062

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

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

0 commit comments

Comments
 (0)
0