Add course mobile UI tweaks #425

danielbolee · 2024-02-13T00:00:55Z

Description

Sidebar now slides in and out in a transition
Course modal now shows selected class name in roadmap on mobile
Course search doesn't close until user clicks submit on course modal
Changed add course button to be inside each quarter, automatically selecting the quarter + year when adding the course on mobile

Looks buggy at the moment but just need to update CSS with new darkmode changes, will be done with the major mobile redesign later

Screenshots

before	after

Steps to verify/test this change:

Verify changes work as expected on staging instance

Final Checks:

Verify successful deployment

(optional)

Write tests
Write documentation

Issues

Closes #324

- Add sidebar transition to ease-in-out instead of instant\n - Have sidebar width only half the screen on mobile devices

- Displays Department + Course Number after choosing a course to add in popup

- Close the course search page only after student submits so they can go back if they cancel

- Fix displaying activeCourse name when none has been selected yet

- Move add course button beneath each quarter instead of header

- Remove previous addcourse button to make room for new icons according to figma

- Have selected quarter + year when adding a course on mobile pass into the addCoursePopup - Have selected quarter + year autoselected when choosing a course to add

github-actions · 2024-02-13T00:16:17Z

Deployed staging instance to https://staging-425.peterportal.org

js0mmer

Looks good functionally! Left some comments on styling and stuff.

Also, looks like there are some merge conflicts, I can handle those for you if you'd like.

site/src/component/SideBar/SideBar.tsx

site/src/component/SideBar/Sidebar.scss

site/src/store/slices/roadmapSlice.ts

site/src/pages/RoadmapPage/AddCoursePopup.tsx

site/src/pages/RoadmapPage/Quarter.tsx

package-lock.json

Co-authored-by: Jacob Sommer <[email protected]>

js0mmer

Just one small issue with dark mode compatibility. Once that is resolved and changes from master are merged, you should be good to go! Re-request review when you are ready

site/src/pages/RoadmapPage/Quarter.tsx

…erportal-client into daniel/Mobile-UI-Edits

js0mmer

a few small things

package.json

site/src/pages/RoadmapPage/AddCoursePopup.tsx

site/src/pages/RoadmapPage/CourseHitItem.tsx

Co-authored-by: Jacob Sommer <[email protected]>

js0mmer

LGTM. just suggested a couple simplifications

site/src/pages/RoadmapPage/AddCoursePopup.tsx

site/src/component/SideBar/Sidebar.scss

Co-authored-by: Jacob Sommer <[email protected]>

danielbolee and others added 12 commits January 24, 2024 18:10

Add sidebar transition

11d77ea

- Add sidebar transition to ease-in-out instead of instant\n - Have sidebar width only half the screen on mobile devices

Confirm name of course when adding

de53859

- Displays Department + Course Number after choosing a course to add in popup

Delay Course Search Close

94fd453

- Close the course search page only after student submits so they can go back if they cancel

Merge remote-tracking branch 'origin/master' into daniel/Mobile-UI-Edits

01ffd89

Fix null error in activeCourse

624d0e5

- Fix displaying activeCourse name when none has been selected yet

Change Add Course button location

46238fe

- Move add course button beneath each quarter instead of header

Remove old AddCourse button in header

ba3c65f

- Remove previous addcourse button to make room for new icons according to figma

Have Add Course button track quarter + year

694f6e4

- Have selected quarter + year when adding a course on mobile pass into the addCoursePopup - Have selected quarter + year autoselected when choosing a course to add

Merge with Master

b03e7a8

Merge branch 'master' into daniel/Mobile-UI-Edits

99c7565

Run prettier to format for lint

9b7ac78

Fix lint error

bca5c3e

js0mmer assigned danielbolee Feb 15, 2024

js0mmer requested changes Feb 15, 2024

View reviewed changes

danielbolee and others added 5 commits February 21, 2024 17:07

Update site/src/store/slices/roadmapSlice.ts

bda643f

Co-authored-by: Jacob Sommer <[email protected]>

Update site/src/pages/RoadmapPage/AddCoursePopup.tsx

7e93e94

Co-authored-by: Jacob Sommer <[email protected]>

Fix styling based on comments

fa1bbeb

Fix package-lock.json from being changed

a4bbfc9

Merge with master

6f4444c

danielbolee temporarily deployed to staging-425 February 22, 2024 02:54 — with GitHub Actions Inactive

js0mmer self-requested a review February 29, 2024 07:36

js0mmer reviewed Feb 29, 2024

View reviewed changes

site/src/pages/RoadmapPage/Quarter.tsx Outdated Show resolved Hide resolved

danielbolee added 4 commits March 13, 2024 18:03

Merge changes from master

e2ee329

Fix dark mode compatibility with buttons

3a2ed8e

Use new useIsMobile helper

c8d923f

Merge branch 'daniel/Mobile-UI-Edits' of https://github.com/icssc/pet…

aa501ea

…erportal-client into daniel/Mobile-UI-Edits

danielbolee temporarily deployed to staging-425 March 14, 2024 01:40 — with GitHub Actions Inactive

Small changes to fix setShowSearch parameters

058eab4

danielbolee temporarily deployed to staging-425 March 14, 2024 02:21 — with GitHub Actions Inactive

js0mmer requested changes Mar 14, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

site/src/pages/RoadmapPage/AddCoursePopup.tsx Outdated Show resolved Hide resolved

site/src/pages/RoadmapPage/CourseHitItem.tsx Outdated Show resolved Hide resolved

Remove old console comment

6871a28

Co-authored-by: Jacob Sommer <[email protected]>

danielbolee temporarily deployed to staging-425 March 14, 2024 05:14 — with GitHub Actions Inactive

Remove unnecessary package

f2ba24e

Co-authored-by: Jacob Sommer <[email protected]>

danielbolee temporarily deployed to staging-425 March 14, 2024 05:15 — with GitHub Actions Inactive

Fix hitItem setshowsearch

50d0bc2

Co-authored-by: Jacob Sommer <[email protected]>

danielbolee temporarily deployed to staging-425 March 14, 2024 05:15 — with GitHub Actions Inactive

Fix lint issue

9305364

danielbolee temporarily deployed to staging-425 March 14, 2024 05:36 — with GitHub Actions Inactive

js0mmer approved these changes Mar 14, 2024

View reviewed changes

site/src/pages/RoadmapPage/AddCoursePopup.tsx Outdated Show resolved Hide resolved

site/src/pages/RoadmapPage/AddCoursePopup.tsx Outdated Show resolved Hide resolved

js0mmer reviewed Mar 14, 2024

View reviewed changes

site/src/component/SideBar/Sidebar.scss Outdated Show resolved Hide resolved

Use optional chaining and nullish coalescing for AddCoursePopup

e8bafa1

Co-authored-by: Jacob Sommer <[email protected]>

danielbolee temporarily deployed to staging-425 March 21, 2024 01:15 — with GitHub Actions Inactive

danielbolee and others added 2 commits March 20, 2024 18:15

Add optional chaining and nullish coalescing

8c6d938

Co-authored-by: Jacob Sommer <[email protected]>

Update site/src/component/SideBar/Sidebar.scss

0b9cf75

Co-authored-by: Jacob Sommer <[email protected]>

danielbolee temporarily deployed to staging-425 March 21, 2024 01:15 — with GitHub Actions Inactive

Merge branch 'master' into daniel/Mobile-UI-Edits

d7ece4c

danielbolee temporarily deployed to staging-425 March 21, 2024 01:16 — with GitHub Actions Inactive

danielbolee merged commit 65a54f7 into master Mar 21, 2024
3 checks passed

danielbolee deleted the daniel/Mobile-UI-Edits branch March 21, 2024 01:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add course mobile UI tweaks #425

Add course mobile UI tweaks #425

danielbolee commented Feb 13, 2024

github-actions bot commented Feb 13, 2024

js0mmer left a comment •

edited

Loading

js0mmer left a comment •

edited

Loading

js0mmer left a comment

js0mmer left a comment

Add course mobile UI tweaks #425

Add course mobile UI tweaks #425

Conversation

danielbolee commented Feb 13, 2024

Description

Screenshots

Steps to verify/test this change:

Final Checks:

Issues

github-actions bot commented Feb 13, 2024

js0mmer left a comment • edited Loading

Choose a reason for hiding this comment

js0mmer left a comment • edited Loading

Choose a reason for hiding this comment

js0mmer left a comment

Choose a reason for hiding this comment

js0mmer left a comment

Choose a reason for hiding this comment

js0mmer left a comment •

edited

Loading

js0mmer left a comment •

edited

Loading