Island Info box improvements

[rodriguezrrp]

This is mostly a QoL or UX improvement to the Island Info box, please suggest changes if you see fit. Main changes:

• The left and right arrow buttons' height are now taller in the header part of the collapsible Island Info box. This fixes the behavior where: quickly clicking on the arrows stopped scrolling through the Islands when the title became too long and wrapped onto two lines, increasing the title height and causing the vertically-centered arrow to move down. (I'm looking at you, Powderfall Bluffs!) The new behavior is the arrow buttons' 85% height will let them be clicked in the same area even when the title height increases and the button drops down.
• I fixed some incorrect info listed in the Island Info sections.
• I fixed where double-clicking on the left and right arrow buttons would cause double-click events to propagate down to the Leaflet map behind it, triggering an unintended zoom.
• I added a quick height animation upon expanding the Island Info box to give it a little more visual flair. Closing remains instant.
• Edit: I also centered the title text.

The yolky slime image has been placeholded with the question mark icon, pending the asset.

[BrookJeynes]

I fixed where double-clicking on the left and right arrow buttons would cause double-click events to propagate down to the Leaflet map behind it, triggering an unintended zoom.

Nice! I couldn't figure out how to avoid this behaviour for some time.

I added a quick height animation upon expanding the Island Info box to give it a little more visual flair. Closing remains instant.

Looks great, UI design has never been my strong suite 😅

The yolky slime image has been placeholded with the question mark icon, pending the asset.

I won't be able to grab this until tuesday/wednesday, I'll approve the PR now with the temporary asset and will grab the new one when I can!

Thanks again for this man, killing it!

[BrookJeynes]

@rodriguezrrp after playing with it, can we also have the "Resources" and "Slimes" buttons, also not allow pass-through to the leaflet map, clicking those multiple times will also zoom in.

[rodriguezrrp]

can we also have the "Resources" and "Slimes" buttons, also not allow pass-through to the leaflet map

Done!

I couldn't figure out how to avoid this behaviour for some time

My workaround solution is to toggle the leaflet map's doubleClickZoom property in an event handler. The only other way I found to prevent the pass-through was to move the IslandInfo component outside the MapContainer component, but then the entire island info box including its margins also blocked interaction, which didn't feel right.

Also I just changed the events to a debounced (delayed) toggling in the button's onclick, which should make my fix compatible with mobile devices and touch events. The old method of onmouseenter and onmouseleave didn't make sense for mobile devices.

UI design has never been my strong suite

Same here. but I try :)

[BrookJeynes]

@rodriguezrrp Looks great! Squerge when you can :)

[rodriguezrrp]

Thanks, and I'm confused here, how do I squerge the PR instead of you?

[BrookJeynes]

Thanks, and I'm confused here, how do I squerge the PR instead of you?

oh! my bad. Thought you had permissions. Sorry about that,,,,

[rodriguezrrp]

Thanks! No worries. Yeah I think I would need write permissions to this repo, all I can do myself is close the PR. All good, I appreciate it