New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Assessments: style overview table #22407
Conversation
style: { | ||
...tableLayoutStyles.cell, | ||
...styles.questionCell, | ||
maxWidth: styleConstants['content-width'] - (numAnswers * (ANSWER_COLUMN_WIDTH + PADDING * 2)), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As far as I can tell, this is the only place you use the PADDING constant. Why not set it to 20 initially so you don't have to do math?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point!
return this.getAnswerColumn(answer.multipleChoiceOption); | ||
}); | ||
|
||
const numAnswerColumns = columnLabelNames.length + 1; | ||
console.log(numAnswerColumns); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: remove debugging statement
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
{ | ||
name: 'Assessment multiple choice with 3 answers', | ||
description: 'Ability to see assessment overview for the entire class', | ||
story: () => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
super tiny nit: instead of class, can we call this a section to be consistent with other references?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed.
@Erin007 @caleybrock Updated PR. |
style: { | ||
...tableLayoutStyles.cell, | ||
...styles.questionCell, | ||
maxWidth: styleConstants['content-width'] - (numAnswers * (ANSWER_COLUMN_WIDTH + PADDING)), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i think the maxWidth
calculation could be pulled out into a function that accepts numAnswers
as a parameter. that way you can give it a name and clear up this line a little 😄
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks!
This PR is to style the overview assessments table. The following changes were made to the table:
-Ensure consistent column width of the answer columns
-Add spacing between the icon(green check mark) and text using Flexbox
-Truncate the question text and adjust widths.
Before Implementation:
After Implementation:
Pair programmed Nkiru/Caley