search

ONEARMY / community-platform

A platform to build useful communities that aim to tackle global problems
https://platform.onearmy.earth
MIT License
1.14k stars 389 forks source link

feat: update map setting display #3856

Open benfurber opened 1 month ago

benfurber commented 1 month ago

Description

The setting to add/update a map pin (at /settings/map) does it's thing but more context could be given to the user so they understand how their info will be displayed on the map.

Design requirements and description by @dalibormrska

The design proposal for now is this. First of all, the user would have the style of the pin based on the type of profile they have.

The preview of the card would be done just as it would be on the real map. The pin would be always in the open state and draggable. On click we would want to move the pin to the bottom of the map container so that both the pin and the card would be visible. I thought this would save space, layout decisions and introducing another element into the pool. In this way we would just utilise the existing elements.

image

Make sure that the height of the map is enough for the card of a space profile to show.

Build suggestion

While the necessary user data will need to be passed through to MapWithPin on SettingsPageMapPin, hopefully MapPin (packages/components/src/MapWithPin/MapPin.tsx) is the only component that needs much work. And what needs implementing is probably very close to what's used on Clusters (src/pages/Maps/Content/MapView/Cluster.tsx) with the Popup component.

As MapPin is in the component library already (which is what we want), moving Popup (src/pages/Maps/Content/MapView/Popup.tsx) to the component library too would be the best path forward.

LahuenGR commented 1 month ago

Hi guys, I'm working on this request. What do you think about this?

2024-09-25 04_04_20-Window

Using the current Popup configuration. I think that, if you want something that resembles that design, we should adjust that component directly.

Edit: I also removed the one-click functionality to move the pin, as it was not working well with the click-n-popup idea. Now you have to double click to move the pin (or drag)