AntAlmanac icon indicating copy to clipboard operation
AntAlmanac copied to clipboard

feat: mobile ui and saved scroll position

Open ap0nia opened this issue 6 months ago • 0 comments

Summary

Save the scroll position of the previous tab when switching to a new tab, and restore the scroll position if the previous tab is revisited.

Move the tabs to the bottom and accommodate for mobile-specific factors like the bottom edge of the phone, rounded corners, etc.

Testing

Mobile Responsiveness

  1. Open the website in desktop mode. The calendar and the tabs with search, added courses, and map should be side-by-side.
  2. Shrink the viewport to a mobile layout. There should be tabs on the bottom.

Ensure that the calendar and tabs are synchronized with their media queries. Ensure that the elements are visually balanced at all points during the viewport shift.

Scroll Save

  1. Search for "CS" in the "search courses tab."
  2. Scroll down at least two full screen heights, and take note of the courses displayed.
  3. Switch to the "map" tab.
  4. Switch back to the "search" tab and verify that the same courses are displayed.

Project

Continuation of #999. I was originally trying to review it and figure out how I would actually implement it so i could provide feedback, but it ended up covering a larger scope.

Resolves #976

ap0nia avatar Aug 20 '24 13:08 ap0nia