Skip to content

Commit 4ebeeb0

Browse files
author
Madelyn Kasula
authored
Merge pull request code-dot-org#26951 from code-dot-org/progress-tab-styles
Progress tab styles
2 parents 74cc915 + ed2664c commit 4ebeeb0

File tree

4 files changed

+111
-132
lines changed

4 files changed

+111
-132
lines changed

‎apps/src/templates/sectionProgress/ProgressBox.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,16 @@ export default class ProgressBox extends Component {
2121
incomplete: PropTypes.number,
2222
imperfect: PropTypes.number,
2323
perfect: PropTypes.number,
24+
style: PropTypes.object,
2425
};
2526

2627
render() {
2728
const {started, incomplete, imperfect, perfect} = this.props;
2829

2930
const boxWithBorderStyle = {
3031
...styles.box,
31-
borderColor: started ? color.level_perfect : color.light_gray
32+
borderColor: started ? color.level_perfect : color.light_gray,
33+
...this.props.style,
3234
};
3335

3436
const perfectLevels = {

‎apps/src/templates/sectionProgress/SectionProgress.jsx

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,9 @@ const styles = {
4545
lessonSelectorContainer: {
4646
float: 'right',
4747
},
48-
viewCourseLink: {
49-
float: 'right',
50-
marginTop: 10,
51-
},
5248
viewCourseLinkBox: {
5349
width: '100%',
54-
height: 10,
55-
lineHeight: '10px',
56-
clear: 'both'
50+
textAlign: 'right',
5751
},
5852
};
5953

@@ -130,17 +124,15 @@ class SectionProgress extends Component {
130124

131125
return (
132126
<div>
133-
<div style={styles.viewCourseLinkBox}>
134-
<div style={styles.viewCourseLink}>
135-
{linkToOverview &&
136-
<SmallChevronLink
137-
link={linkToOverview}
138-
linkText={i18n.viewCourse()}
139-
isRtl={false}
140-
/>
141-
}
127+
{linkToOverview &&
128+
<div style={styles.viewCourseLinkBox}>
129+
<SmallChevronLink
130+
link={linkToOverview}
131+
linkText={i18n.viewCourse()}
132+
isRtl={false}
133+
/>
142134
</div>
143-
</div>
135+
}
144136
<div style={styles.selectorContainer}>
145137
<div style={styles.scriptSelectorContainer}>
146138
<div style={{...h3Style, ...styles.heading}}>

‎apps/src/templates/sectionProgress/SummaryViewLegend.jsx

Lines changed: 92 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -5,53 +5,26 @@ import color from "@cdo/apps/util/color";
55
import i18n from '@cdo/locale';
66

77
const styles = {
8-
legendBox: {
9-
borderWidth: 1,
10-
float: 'left',
11-
display: 'inline-block',
12-
marginTop: 20,
13-
boxSizing: 'content-box',
14-
},
15-
progressBox: {
16-
float: 'left',
17-
width: 130,
18-
borderColor: color.lightest_gray,
19-
borderWidth: 2,
20-
borderBottomStyle: 'solid',
21-
borderRightStyle: 'solid',
22-
},
23-
leftBorder: {
24-
borderColor: color.lightest_gray,
25-
borderWidth: 2,
26-
borderLeftStyle: 'solid',
27-
},
28-
heading: {
29-
fontSize: 18,
8+
header: {
309
fontWeight: 'bold',
3110
color: color.charcoal,
32-
float: 'left',
33-
paddingTop: 10,
34-
paddingBottom: 10,
3511
textAlign: 'center',
3612
},
37-
label: {
38-
fontSize: 14,
39-
fontWeight: 900,
40-
color: color.charcoal,
41-
},
42-
parenthetical: {
43-
fontSize: 10,
13+
th: {
14+
backgroundColor: color.lightest_gray,
4415
color: color.charcoal,
16+
border: `1px solid ${color.lightest_gray}`,
17+
fontFamily: '"Gotham 4r", sans-serif',
18+
fontSize: 14,
19+
textAlign: 'center',
20+
padding: 15,
4521
},
46-
labelBox: {
47-
padding: 10,
48-
height: 60,
49-
width: '100%',
50-
backgroundColor: color.lightest_gray,
51-
textAlign: 'center'
22+
td: {
23+
border: `1px solid ${color.lightest_gray}`,
24+
padding: 15,
5225
},
53-
boxContainer: {
54-
padding: '15px 50px',
26+
boxStyle: {
27+
margin: '0 auto',
5528
}
5629
};
5730

@@ -61,78 +34,87 @@ export default class SummaryViewLegend extends Component {
6134
};
6235

6336
render() {
64-
const { showCSFProgressBox } = this.props;
65-
const headingStyle = {
66-
...styles.heading,
67-
width: showCSFProgressBox ? '48%' : '100%'
68-
};
37+
const {showCSFProgressBox} = this.props;
38+
const headerColSpan = showCSFProgressBox ? 2 : 3;
6939

7040
return (
71-
<div style={styles.legendBox}>
72-
<div>
73-
<div style={headingStyle}>{i18n.lessonStatus()}</div>
74-
{showCSFProgressBox &&
75-
<div style={headingStyle}>{i18n.completionStatus()}</div>
76-
}
77-
</div>
78-
<div style={styles.progressBox}>
79-
<div style={styles.labelBox}>
80-
<div>{i18n.notStarted()}</div>
81-
</div>
82-
<div style={{...styles.boxContainer, ...styles.leftBorder}}>
83-
<ProgressBox
84-
started={false}
85-
incomplete={20}
86-
imperfect={0}
87-
perfect={0}
88-
/>
89-
</div>
90-
</div>
91-
<div style={styles.progressBox}>
92-
<div style={styles.labelBox}>
93-
<div>{i18n.inProgress()}</div>
94-
</div>
95-
<div style={styles.boxContainer}>
96-
<ProgressBox
97-
started={true}
98-
incomplete={20}
99-
imperfect={0}
100-
perfect={0}
101-
/>
102-
</div>
103-
</div>
104-
<div style={styles.progressBox}>
105-
<div style={styles.labelBox}>
106-
<div>{i18n.completed()}</div>
107-
{showCSFProgressBox &&
108-
<div style={styles.parenthetical}>({i18n.perfect()})</div>
109-
}
110-
</div>
111-
<div style={styles.boxContainer}>
112-
<ProgressBox
113-
started={true}
114-
incomplete={0}
115-
imperfect={0}
116-
perfect={20}
117-
/>
118-
</div>
119-
</div>
120-
{showCSFProgressBox &&
121-
<div style={styles.progressBox}>
122-
<div style={styles.labelBox}>
123-
<div>{i18n.completed()}</div>
124-
<div style={styles.parenthetical}>({i18n.tooManyBlocks()})</div>
125-
</div>
126-
<div style={styles.boxContainer}>
127-
<ProgressBox
128-
started={true}
129-
incomplete={0}
130-
imperfect={20}
131-
perfect={0}
132-
/>
133-
</div>
134-
</div>
135-
}
41+
<div style={{marginTop: 60}}>
42+
<table>
43+
<thead>
44+
<tr>
45+
<td colSpan={headerColSpan}>
46+
<h3 style={styles.header}>{i18n.lessonStatus()}</h3>
47+
</td>
48+
{showCSFProgressBox &&
49+
<td colSpan={2}>
50+
<h3 style={styles.header}>{i18n.completionStatus()}</h3>
51+
</td>
52+
}
53+
</tr>
54+
<tr>
55+
<th style={styles.th}>{i18n.notStarted()}</th>
56+
<th style={styles.th}>{i18n.inProgress()}</th>
57+
<th style={styles.th}>
58+
{i18n.completed()}
59+
{showCSFProgressBox &&
60+
<span>
61+
<br/>
62+
{`(${i18n.perfect()})`}
63+
</span>
64+
}
65+
</th>
66+
{showCSFProgressBox &&
67+
<th style={styles.th}>
68+
{i18n.completed()}
69+
<br/>
70+
{`(${i18n.tooManyBlocks()})`}
71+
</th>
72+
}
73+
</tr>
74+
</thead>
75+
<tbody>
76+
<tr>
77+
<td style={styles.td}>
78+
<ProgressBox
79+
style={styles.boxStyle}
80+
started={false}
81+
incomplete={20}
82+
imperfect={0}
83+
perfect={0}
84+
/>
85+
</td>
86+
<td style={styles.td}>
87+
<ProgressBox
88+
style={styles.boxStyle}
89+
started={true}
90+
incomplete={20}
91+
imperfect={0}
92+
perfect={0}
93+
/>
94+
</td>
95+
<td style={styles.td}>
96+
<ProgressBox
97+
style={styles.boxStyle}
98+
started={true}
99+
incomplete={0}
100+
imperfect={0}
101+
perfect={20}
102+
/>
103+
</td>
104+
{showCSFProgressBox &&
105+
<td style={styles.td}>
106+
<ProgressBox
107+
style={styles.boxStyle}
108+
started={true}
109+
incomplete={0}
110+
imperfect={20}
111+
perfect={0}
112+
/>
113+
</td>
114+
}
115+
</tr>
116+
</tbody>
117+
</table>
136118
</div>
137119
);
138120
}

‎apps/src/templates/sectionProgress/multiGridConstants.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export const PILL_BUBBLE_WIDTH = 180;
1111
export const progressStyles = {
1212
lessonHeading: {
1313
fontFamily: '"Gotham 5r", sans-serif',
14+
fontSize: 14,
15+
color: color.charcoal,
1416
paddingTop: 10,
1517
paddingLeft: 8
1618
},
@@ -24,7 +26,8 @@ export const progressStyles = {
2426
':hover': {
2527
cursor: 'pointer'
2628
},
27-
textAlign: 'center'
29+
textAlign: 'center',
30+
height: '100%',
2831
},
2932
lessonOfInterest: {
3033
backgroundColor: color.teal,
@@ -81,11 +84,11 @@ export const progressStyles = {
8184
margin: 10,
8285
textOverflow: 'ellipsis',
8386
whiteSpace: 'nowrap',
84-
overflow: 'hidden'
87+
overflow: 'hidden',
88+
fontSize: 14,
8589
},
8690
cell: {
87-
borderRight: '1px solid',
88-
borderColor: color.border_gray,
91+
borderRight: `1px solid ${color.border_gray}`,
8992
}
9093
};
9194

0 commit comments

Comments
 (0)