[Bugfix:CourseMaterials] Fixed Course Materials Key#12214
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #12214 +/- ##
=========================================
Coverage 21.71% 21.71%
Complexity 9612 9612
=========================================
Files 268 268
Lines 36070 36070
Branches 475 475
=========================================
Hits 7832 7832
Misses 27767 27767
Partials 471 471
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
…ubmitty/Submitty into fix-course-materials-key-icons
| </li> | ||
| <li> | ||
| <i class="fas fa-circle grader-invalid"></i> | ||
| <i class="fas fa-square fa-lg course-materials-invalid"></i> |
There was a problem hiding this comment.
Can we rename these class names to be more semantic?
For example, something like "-never" instead of invalid?
JManion32
left a comment
There was a problem hiding this comment.
Since these CSS styles are local to Course Materials, we should put them in course-materials.css, which is only rendered when the Course Materials page is loaded, rather than server.css, which is rendered at all times.
Other than that and @skara9's comment, the Course Materials key looks much better, and I think the rectangles are a good choice here.
JManion32
left a comment
There was a problem hiding this comment.
By giving this key its own style classes, the issue of changes in other parts of the site affecting it is eliminated. The names of these classes are descriptive, and the classes themselves are in the proper file (course-materials.css). The UI has been restored to its orignal state, and has been further improved by using rectangles instead of circles. Great work!
Why is this Change Important & Necessary?
Currently, the Course Materials page uses styles from another PR that is causing a conflict and visual bug with the key icons.
(Firfox Dark Theme)
(Firefox Light Theme)
What is the New Behavior?
(Firefox Dark Theme)
(Firefox Light Theme)
Now, the icons display properly on the Course Materials page key. The shape has been changed to squares instead of circles, since the colors are meant to represent highlighted rectangles in the file directory below. This is a more intuitive layout given that the colors in the key do not correspond to any circles on the page, such as a grading page might.
What steps should a reviewer take to reproduce or test the bug or new feature?
Navigate to the Course Materials page and observe that they key displays correctly.
Automated Testing & Documentation
Other information
This is not a breaking change.