Fix filters and adjust filter panel styling #70
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the course catalog filter UI with improved usability and responsive design. The main focus is on adding collapsible filter sections with animations, better state management for filter panel visibility, and improved handling of selected filters across desktop and mobile views.
- Added collapsible filter sections with Framer Motion animations that truncate long filter lists (>12 items)
- Moved filter panel visibility state management to parent component for better control flow
- Implemented responsive design with different selected filter placement for desktop (below search) and mobile (within SearchBar component)
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/Catalog.tsx | Lifts showFilter state to parent, adds responsive rendering for selected filters and search results |
| src/context/FilterProvider.tsx | Updates API endpoint from /departments to /subjects for consistency with domain language |
| src/context/CourseWorkspaceProvider.tsx | Adds missing semesterID field to initial semester data |
| src/components/SearchBar/SeachBar.tsx | Accepts showFilter props from parent, adds mobile ChosenTag rendering |
| src/components/SearchBar/FilterPanel/FilterSection.tsx | Implements collapsible animation with gradient overlay and "Show All/Less" toggle |
| src/components/SearchBar/FilterPanel/FilterPanelPopup.tsx | Adjusts popup positioning from right-4 to right-0 for better alignment |
| src/components/SearchBar/FilterPanel/FilterPanel.tsx | Adds scrolling support with max-height constraint |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
mirmirmirr
force-pushed
the
60-mobile-filters-dont-work
branch
from
a917759 to
574d16f
Compare
mirmirmirr
dismissed
ccheung777’s stale review
The merge-base changed after approval.
jzgom067
left a comment
jzgom067
left a comment
There was a problem hiding this comment.
Looks like some stuff broke when you merged main-preview into this branch.
Firstly, all the tags are invisible, both in the courses and in the "applied filters" section under the search bar.
It seems like the text, background, and outline are just pink to match the background, since you can see it when hovering over a course.
The same happens to the applied filters, but only on mobile. (On the desktop filter view, they just don't change color when selected)
Not sure if this is related, but the trash bin looks to be much higher than it should be when dragging a course.
|
man |
ramonechen
left a comment
ramonechen
left a comment
There was a problem hiding this comment.
On mobile, clicking on any of the semester filters (or anywhere in the semester filter section as a whole) immediately closes the filter menu without selecting anything. Thus, I'm unable to filter courses by semester.
This does not seem to be an issue on the desktop interface.
|
It works for me on mobile, what were you pressing? |
There was a problem hiding this comment.
The previous mobile issue in which clicking on a semester filter closes the filter menu has been resolved.
There are a few issues I found that may or may not need to be addressed (present on both desktop and mobile views):
- Clicking on an applied filter sometimes duplicates it instead of deleting it.
I found that spamming lots of random filters and then attempting to remove them one-by-one often causes one or more of them to "stick" or duplicate. Stuck filters cannot be removed either by clicking or de-selecting them via the filters menu.
- General unresponsiveness when clicking on filters.
No screenshot or video for this one as of now, but I noticed that the application often freezes up for up to a second at a time when quickly selecting or removing filters in succession. The filters menu also takes a second to open and close sometimes. I assume this is either because API calls are blocking in certain cases or there is somehow too much processing load on the client.
- Applied filters reduce the amount of visible space in the course catalog.
Probably the most minor issue, but with enough filters applied, the space in which courses appear in starts to shrink and there is no way to scroll down to see more courses at a time. The screenshot is just an extreme example of this. This issue might not be relevant to this pull request but I still wanted to point it out.
ramonechen
left a comment
ramonechen
left a comment
There was a problem hiding this comment.
Let's get this app deployed before RCOS Expo woooooooooooo
ramonechen
dismissed
jzgom067’s stale review
The issues raised by this review should have been resolved at this point, not sure why it's still up.
This pull request introduces several improvements to the course catalog's filter UI, focusing on better usability and responsive design. The main changes include a collapsible filter section for tags, improved handling of selected filters across desktop and mobile views, and adjustments to API endpoints and state management for consistency.
UI/UX Improvements to Filtering
FilterSection.tsxthat truncates tag lists longer than 12 items, with a "Show All"/"Show Less" toggle and a gradient overlay for visual indication. This uses Framer Motion for smooth transitions. [1] [2]FilterPanelPopup.tsx).FilterPanel.tsx).Responsive Design & State Handling
Catalog.tsxandSearchBar.tsx. [1] [2]showFilter) to be controlled by parent components, improving consistency and state flow. (src/components/SearchBar/SeachBar.tsxL1-L20, F11082baL11082baL95R98)