Roadmap Search Redesign (Part 1) #514
Conversation
Awesome-E
had a problem deploying
to
staging-514
GitHub Actions
Error
Awesome-E
had a problem deploying
to
staging-514
GitHub Actions
Failure
Awesome-E
had a problem deploying
to
staging-514
GitHub Actions
Failure
Awesome-E
temporarily deployed
to
staging-514
GitHub Actions
Inactive
(preliminary)
Awesome-E
had a problem deploying
to
staging-514
GitHub Actions
Failure
Awesome-E
had a problem deploying
to
staging-514
GitHub Actions
Failure
Awesome-E
changed the title
There was a problem hiding this comment.
The grabbing cursor only shows when you first start the drag and are still hovering over the original spot which bothers me. I think the way around would have to be adding/removing the cursor: grabbing style to the document body within the onStart and onEnd listeners for dragging.
|
|
||
| .add-course-modal { | ||
| @include globals.bottom-overlay(500); | ||
| background-color: var(--background); |
There was a problem hiding this comment.
| background-color: var(--background); | |
| background-color: var(--overlay1); |
background color is a little dark IMO in dark mode, and for most modals or divs containing content, the background is overlay1 or 2 so this would be more consistent
There was a problem hiding this comment.
react-beautiful-dnd still needs to be removed as well as any dead code (e.g. CourseHitItem component in RoadmapPage)
| @@ -112,8 +113,7 @@ const SideBar = () => { | |||
| <div className="sidebar mini">{links}</div> | |||
| <CSSTransition in={showSidebar} timeout={500} unmountOnExit> | |||
| {/* Clicking this is only an alternative action to something that is already accessible */} | |||
There was a problem hiding this comment.
this comment looks like it can be removed
| .add-course-form { | ||
| border-radius: var(--border-radius); | ||
| // border-radius: var(--border-radius); |
There was a problem hiding this comment.
| // border-radius: var(--border-radius); |
There was a problem hiding this comment.
I think this component is unused right?
|
|
||
| const { coursebag } = useCoursebag(); | ||
| const { results, searchInProgress } = useAppSelector((state) => state.search.courses); | ||
| const shownCourses = JSON.parse(JSON.stringify(showCourseBag ? coursebag : results)) as CourseGQLData[]; |
There was a problem hiding this comment.
I assume JSON.parse(JSON.stringify(...) is a way to make a deep copy of the array of courses. Is that necessary? If so, add a comment stating why. Also not sure if this is the best way to make a deep copy but can't think of any other off the top of my head.
| </Draggable> | ||
| ); | ||
| }); | ||
| const coursesCopy = JSON.parse(JSON.stringify(data.courses)); |
There was a problem hiding this comment.
Same comment I had for SearchSidebar
Description
SortableJS instead of React Beautiful DND
This library makes the animations more smooth when being dragged (cloned) from the search bar and when being dropped (inserted) into a quarter in the user's roadmap.
Previously, it used to move the dragged element into the quarter, then have a sudden transition in it's shape as it re-rendered the component. Now, there's a placeholder component when dragging so there's no layout change.
Compare https://peterportal.org/roadmap vs https://staging-514.peterportal.org/roadmap
Search Layout and Desktop Year Layout
Before (left) and after (right):
Mobile "Add Course" Menu
Before:
After:
Steps to verify/test this change:
Issues
Didn't find any