Scroll to results when changing routes to a search or category - Githubissues

uiowa / brand-icon-browser

0 stars 1 forks source link

Scroll to results when changing routes to a search or category #96

Closed quamsta closed 2 years ago

quamsta commented 2 years ago

Partially resolves #97

This PR resolves an issue where if you perform a search or click a category on mobile, the page will scroll to the top.

How to test

Check out this branch
Run npm install if you haven't worked on the Icon Browser yet, or need to update your dependencies
(Optional) run npm build and wait ten minutes for icon variants to be generated. Otherwise endure an iconless Icon Browser (aka the icon images will be broken).
Run npm run serve
On both mobile and desktop sizes, please check the following cases:

When the user switches between categories (aka they start on one category and switch to another) or goes to the "All Icons" category (it's not really a category, but it's grouped with the categories), does the page jump/scroll to an appropriate place? E.g., on mobile does the page scroll to the icons?
When the user searches for an icon, does the page jump/scroll to an appropriate place? E.g., on mobile does the page actually scroll to the icons?

You can see the bugged and expected behavior for mobile devices below:

Before, bugged (Search):

https://user-images.githubusercontent.com/472923/190504079-b997a74e-698d-4d8c-8b80-2a984d5a196e.mov

After, expected (Search):

https://user-images.githubusercontent.com/472923/190504164-c0249702-a6d2-43c8-be1d-6c22f2d482ea.mov

Before, bugged (Category):

https://user-images.githubusercontent.com/472923/190504547-885da44d-e631-47b7-bc2b-791e6efcd89c.mov

After, expected (Category):

https://user-images.githubusercontent.com/472923/190504538-39e9380e-1c59-4cef-b4f5-b375d38693fc.mov

quamsta commented 2 years ago

Discovered an issue with this on non-mobile browsers. Will fix and mark as ready in the near future.