search

UNDP-Data / geohub

GeoHub Frontend Application
https://geohub.data.undp.org
BSD 3-Clause "New" or "Revised" License
38 stars 6 forks source link

[UI/UX] Edit legend in storymaps #3992

Closed balagurova closed 1 week ago

balagurova commented 3 weeks ago

Description

Review and provide mockup for different types of legend in the storymaps. Legend test map

Screenshots

No response

Mockup URL/file

No response

JinIgarashi commented 1 week ago

I forgot to fix position of legend to bottom-left

balagurova commented 1 week ago

Hi @JinIgarashi I've updated the mockup for the legend, please have a look: https://www.figma.com/design/xPemdxTmvPi2homUZ2dyw0/UNDP-GeoHub-UI?node-id=3318-6229&t=b6TdoaYkWAEIAdZH-1

balagurova commented 1 week ago

@JinIgarashi Hi! Overall it looks much clearer and easier to handle, thanks for applying the changes!

I've seen your comment in Figma regarding the collapsable items in the legend:

image

I suggest removing the accordion feature from the legend since you've already implemented a max-height, which solves the same problem of keeping the legend box manageable. With the max-height, users can scroll through the legends without needing to collapse them. Having both features is redundant, and the accordion adds unnecessary noise and complexity.

Please have a look at the suggested layout:

image

(in this example I just removed arrow icon and made padding-bottom 8px instead of 16px)

balagurova commented 1 week ago

Looks great! Just one small thing: the rendered font for the title is Helvetica. Please change it to Proxima Nova.

image