search

codeforcroatia / popravi.to

This is popular map-based reporting platform FixMyStreet for Croatia named "Popravi.to"
http://popravi.to
Other
9 stars 7 forks source link

Photo upload screen when reporting a problem - remove image button and thumbnail style and size #153

Open schlos opened 2 years ago

schlos commented 2 years ago

Describe the bug

Photo upload UI/UX when reporting a problem - "remove image" button not displayed properly overlayed on image. See screenshot.

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior

Following Figma design and functionality on other FMS themes.

Screenshots

Current (photo buttons after it's uploaded in report a new problem flow): Screenshot from 2021-10-21 16-59-41

For comparison - good example ("remove image" button is overlayed over photo, other theme shown for comparison): Screenshot from 2021-10-21 17-20-12

Expected (Figma photo thumbnails - should be consistent size size like on report details screen): Screenshot from 2021-10-21 17-24-21

Figma - report details screen showing 3 photo thumbnails: https://www.figma.com/proto/OrvZfg5BsfdOzeL7nhRpEI/Popravi.to?node-id=2764%3A12190&scaling=min-zoom&page-id=25%3A186&hide-ui=1

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context

Relevant part in the code: https://github.com/codeforcroatia/popravi.to/blob/develop/templates/web/popravito/report/new/form_report.html#L95

schlos commented 2 years ago

How to contribute? Read our contribution guidelines at https://codeforcroatia.org/popravito-contribution-guidelines.