Minimap does not change view type on page resize without reloading the page
Closed this issue · 6 comments
Describe the bug
If you zoom in while on a page with the minimap shown in the center of the page, then the minimap stays. It however is displayed at the bottom of the page on the Collection Details side within the Footer, and stays contained within the main body on the Collection Content side. The opposite issues also happens for when the minimap is separated into its own button. Zooming out leaves the button on the screen in the top right corner, and the minimap is not displayed within the middle of the page between the two other sections.
To reproduce
Steps to reproduce the behavior:
- Go to this collection, or any other on https://dimes.rockarch.org/
- Zoom in the screen to where the page separates with the button to jump to the other section at the bottom.
- See Error: The minimap should still exists either in the Footer or just on the screen, and the button does not appear.
- Refreshing the page while zoomed in will remove the minimap and add the button.
- Zoom out with the button on the page until the page is no longer separated.
- See Error: The button should still exist, without the minimap between the sections.
Expected behavior
I expect the resizing of the webpage would remove the minimap and add the button to access it when the page becomes smaller, and for the inverse to happen when the page becomes bigger.
Error message or screenshots
Impact on your work
This doesn't impact my work, but is an odd issue that might confuse users.
Additional context
The first screenshot is within my current build that I'm working on for the Translation work. The other screenshots are from the public dimes version.](https://dimes.rockarch.org/) I expect that the fix done in #461 should work to also fix this. However, I did not explore how that fix was done.
I am thinking this might have less to do with the minimap and more to do with how the PageRecords component determines device width, which uses an isDesktop helper that should probably be wrapped in the ResizeObserver.
Confirmed this is because of the static setting of isDesktop in this component. I'm working on a fix but I want to do this across all the component which use either isDesktop or isMobile.
@Tyl13 I just pushed up a branch that should address this. Can you take a look at let me know if it's working for you?
@helrond So, it does work to a point. When you zoom in, the minimap is removed and the button appears. However, clicking the button causes its own error.
This is the same when zooming back out. The minimap being re added to the middle of the screen causes the same error.
This seems to be happening because the new element is causing a resize loop. juggle/resize-observer#103