Skip to content

Commit 405855d

Browse files
HammsHamms
committed
Merge branch 'staging' into prettier-changes
2 parents e6e6a10 + 4ebeeb0 commit 405855d

File tree

4 files changed

+111
-132
lines changed

4 files changed

+111
-132
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,17 @@ export default class ProgressBox extends Component {
2020
started: PropTypes.bool,
2121
incomplete: PropTypes.number,
2222
imperfect: PropTypes.number,
23-
perfect: PropTypes.number
23+
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
@@ -48,15 +48,9 @@ const styles = {
4848
lessonSelectorContainer: {
4949
float: 'right'
5050
},
51-
viewCourseLink: {
52-
float: 'right',
53-
marginTop: 10
54-
},
5551
viewCourseLinkBox: {
5652
width: '100%',
57-
height: 10,
58-
lineHeight: '10px',
59-
clear: 'both'
53+
textAlign: 'right'
6054
}
6155
};
6256

@@ -133,17 +127,15 @@ class SectionProgress extends Component {
133127

134128
return (
135129
<div>
136-
<div style={styles.viewCourseLinkBox}>
137-
<div style={styles.viewCourseLink}>
138-
{linkToOverview && (
139-
<SmallChevronLink
140-
link={linkToOverview}
141-
linkText={i18n.viewCourse()}
142-
isRtl={false}
143-
/>
144-
)}
130+
{linkToOverview && (
131+
<div style={styles.viewCourseLinkBox}>
132+
<SmallChevronLink
133+
link={linkToOverview}
134+
linkText={i18n.viewCourse()}
135+
isRtl={false}
136+
/>
145137
</div>
146-
</div>
138+
)}
147139
<div style={styles.selectorContainer}>
148140
<div style={styles.scriptSelectorContainer}>
149141
<div style={{...h3Style, ...styles.heading}}>

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

Lines changed: 91 additions & 109 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: {
13+
th: {
14+
backgroundColor: color.lightest_gray,
15+
color: color.charcoal,
16+
border: `1px solid ${color.lightest_gray}`,
17+
fontFamily: '"Gotham 4r", sans-serif',
3818
fontSize: 14,
39-
fontWeight: 900,
40-
color: color.charcoal
41-
},
42-
parenthetical: {
43-
fontSize: 10,
44-
color: color.charcoal
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

@@ -62,77 +35,86 @@ export default class SummaryViewLegend extends Component {
6235

6336
render() {
6437
const {showCSFProgressBox} = this.props;
65-
const headingStyle = {
66-
...styles.heading,
67-
width: showCSFProgressBox ? '48%' : '100%'
68-
};
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)