Skip to content

Commit 7e5c825

Browse files
maddiedierkermaddiedierker
committed
Refactor SummaryViewLegend to use HTML table
1 parent 79bc1e6 commit 7e5c825

File tree

2 files changed

+85
-112
lines changed

2 files changed

+85
-112
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/SummaryViewLegend.jsx

Lines changed: 82 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -5,53 +5,25 @@ 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,
35-
textAlign: 'center',
3611
},
37-
label: {
38-
fontSize: 14,
39-
fontWeight: 900,
40-
color: color.charcoal,
41-
},
42-
parenthetical: {
43-
fontSize: 10,
12+
th: {
13+
backgroundColor: color.lightest_gray,
4414
color: color.charcoal,
15+
border: `1px solid ${color.lightest_gray}`,
16+
fontFamily: '"Gotham 4r", sans-serif',
17+
fontSize: 14,
18+
textAlign: 'center',
19+
padding: 15,
4520
},
46-
labelBox: {
47-
padding: 10,
48-
height: 60,
49-
width: '100%',
50-
backgroundColor: color.lightest_gray,
51-
textAlign: 'center'
21+
td: {
22+
border: `1px solid ${color.lightest_gray}`,
23+
padding: 15,
5224
},
53-
boxContainer: {
54-
padding: '15px 50px',
25+
boxStyle: {
26+
margin: '0 auto',
5527
}
5628
};
5729

@@ -61,78 +33,77 @@ export default class SummaryViewLegend extends Component {
6133
};
6234

6335
render() {
64-
const { showCSFProgressBox } = this.props;
65-
const headingStyle = {
66-
...styles.heading,
67-
width: showCSFProgressBox ? '48%' : '100%'
68-
};
36+
const {showCSFProgressBox} = this.props;
6937

7038
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-
}
39+
<div style={{marginTop: 30}}>
40+
<h4 style={styles.header}>{i18n.lessonStatus()}</h4>
41+
<table>
42+
<thead>
43+
<tr>
44+
<th style={styles.th}>{i18n.notStarted()}</th>
45+
<th style={styles.th}>{i18n.inProgress()}</th>
46+
<th style={styles.th}>
47+
{i18n.completed()}
48+
{showCSFProgressBox &&
49+
<span>
50+
<br/>
51+
{`(${i18n.perfect()})`}
52+
</span>
53+
}
54+
</th>
55+
{showCSFProgressBox &&
56+
<th style={styles.th}>
57+
{i18n.completed()}
58+
<br/>
59+
{`(${i18n.tooManyBlocks()})`}
60+
</th>
61+
}
62+
</tr>
63+
</thead>
64+
<tbody>
65+
<tr>
66+
<td style={styles.td}>
67+
<ProgressBox
68+
style={styles.boxStyle}
69+
started={false}
70+
incomplete={20}
71+
imperfect={0}
72+
perfect={0}
73+
/>
74+
</td>
75+
<td style={styles.td}>
76+
<ProgressBox
77+
style={styles.boxStyle}
78+
started={true}
79+
incomplete={20}
80+
imperfect={0}
81+
perfect={0}
82+
/>
83+
</td>
84+
<td style={styles.td}>
85+
<ProgressBox
86+
style={styles.boxStyle}
87+
started={true}
88+
incomplete={0}
89+
imperfect={0}
90+
perfect={20}
91+
/>
92+
</td>
93+
{showCSFProgressBox &&
94+
<td style={styles.td}>
95+
<ProgressBox
96+
style={styles.boxStyle}
97+
started={true}
98+
incomplete={0}
99+
imperfect={20}
100+
perfect={0}
101+
/>
102+
</td>
103+
}
104+
</tr>
105+
</tbody>
106+
</table>
136107
</div>
137108
);
138109
}

0 commit comments

Comments
 (0)