phlask / phlask-map

Code behind the Phlask Web Map
https://beta.phlask.me
34 stars 36 forks source link

Update Crowdsourcing form with Design Review Requests #449

Open tomporvaz opened 5 months ago

tomporvaz commented 5 months ago

Is your feature request related to a problem? Please describe. Following up on issue #314, the desktop version of the crowdsourcing form requires the following updates requested after a thorough design review. Please address these concearns.

Using beta site

Desktop Comments:

It seems like the tiles and text are different sizes/spacings when comparing between the resources card and the add site card

Foraging icon shows briefly but then disappears

Titles on the 4 cards (Add XX resource) should be using bolded text (h1 in design library not sure what token that is on your end) and centered within card

Title bar is missing the closing 'X'

Title bar is missing curve radius on the upper left and upper right where the color is.

Seems some of the dropdown inputs are grabbing the wrong styling info, but not all

For example, water dispenser type is different then water entry type (styling for entry type is correct) Missing the page bullet points between chevrons towards the bottom of the card

Interaction between desktop and mobile are currently different. I think we should follow the mobile interaction of if the add site card is closed and reopened start back at the resource selection instead of where they left off.

Mobile Comments

Padding/margins on add card seems broken, I believe the add page should take up full screen and include spacing between the resource tiles

Titles on the 4 cards (Add XX resource) should be using bolded text (this time h2 in design library not sure what token that is on your end) and centered within card

Missing closing 'X' in title bar

Some dropdowns seem to be grabbing onto the wrong stylings.

For example water dispenser, food type, and food distribution are wrong but organization type is correct. It looks like it might be stemming from dropdowns that are multi select. Some of the spacings between fields looks to vary between resource types

IE the space between website and description fields on water looks different than the spacing between website and description on foraging The error message for the name of a foraging site being required is the only bold one, the rest are regular weight, foraging should be fixed to mirror.

Seems like the box containing the image info (filed types/icon/button) is shifted a little bit towards the left and is not centered in the card