Skip to content

Fixes #735: Picture size in pickup slots.

Rafael requested to merge fix/735-avatar-pictures into master

Closes #735 (closed).

What does this MR do?

Fixes the problem, that slot profile pictures are not displayed 100 % but cut off on the lower and right edges. Therefore, no div with background-image is used but an img-tag with src attribute.

Additionally the 'Essenskorb' answers have been refactored to deal with the new img tag. It looks now slightly different: The user is displayed always on top of the request date, the delete/remove button is always on the right.

The Avatar component, which included the div with background-img is used on these pages:

  • MenuBasketEntry (Essenskorb answer)
  • ThreadPost (Post in a working group)
  • ReportList
  • TakenSlot (Initiator of this MR)

How confident are you it won't break things if deployed?

I tested MenuBasketEntry, ThreadPost and TakenSlot. The ReportList I think is not used atm, so I could not test this. Correct me, if I am wrong! If there is no height given of the parent, the image can increase to whole size. But should not happen on the tested use cases. In the ThreadPost there are some other issues, that seemed to be there before: The 'Nachricht schreiben' (write message) is always displayed, but it looks like it should only be displayed when a user profile is clicked on. Not sure, if there is another issue open?

Links to related issues

How to test

Steps a reviewer can take to verify that this MR does what it says it does e.g.

  1. Checkout branch locally

  2. Login as userbot.

  3. Upload profile image.

  4. Go in an Betrieb and choose a slot. Image should now be as big as the profile picture.

  5. Create an MenuBasket (Essenskorb)

  6. Login to another user and also upload a profile image.

  7. Answer to the previously created MenuBasket.

  8. Login to the other user again, and look if the others user profile picture is okay.

  9. Go to a working group and post sth. Profile picture should be okay.

Screenshots (if applicable)

Essenskorb: image TakenSlot: image

Checklist

  • added a test, or explain why one is not needed/possible...
    • Only Frontend change.
  • no unrelated changes
  • asked someone for a code review
  • joined #foodsharing-beta channel at https://slackin.yunity.org
  • added an entry to CHANGELOG.md (description, merge request link, username(s))
  • Once your MR has been merged, you are responsible to update the #foodsharing-beta Slack channel about what has been changed here. They will test your work in different browsers, roles or other settings
Edited by Alex

Merge request reports