fix(activities): only hover pictures if device supports it

[larzon83]

Closes #2257

What does this PR do?

Optimization of this PR: #2258

UserSlot.vue:

• add @media (hover) to enable hover if device supports it
• remove hoverHide div and its style as it's not needed
• rename hoverUser prop to "user" for better readability
• rename hoverShow class to "show-picture-on-hover"
• fix wrong style declaration cursor ini in class greyedOut -> now it's cursor default as these boxes should not be clickable

EmptySlot.vue:

• fix wrong style declaration cursor ini in class greyedOut -> now it's cursor default as these boxes should not be clickable
• add @click.stop to stop going to activity detail when clicking on an empty slot

CurrentUser.vue:

• add @media (hover) to enable hover if device supports it (the leave icon in this case)

Links to related issues

Checklist

• added a test, or explain why one is not needed/possible...
• no unrelated changes
• asked someone for a code review
• joined chat.foodsaving.world/channel/karrot-dev
• added an entry to CHANGELOG.md (description, pull request link, username(s))

[nicksellen]

Thanks!

I really appreciate the small naming/style changes, and the CSS fixes. Cleaning up and tidying as you go! I like it 👍

Also very happy as it seems like it'll fix the issue nicely! I had got kind of stuck on it 🚀

My only real change request is the comment, but also if you can check why the event is propagating when it looks like it shouldn't (to my eyes) that would be great! ⭐

To get the tests to pass, it's the snapshot tests that are failing, I can explain more somewhere else, but for now if you just run yarn test -u, and then commit the snapshot file that will have changed, that'll cause the tests to pass.

Regarding #2258 (comment):

Could you do another deploy of my PR?

The deployments are automatic, but only for branches inside our repo (i.e. not for your PR because it's from an external repo), easiest/best thing is we add you to "Karrot Devs" group and you can work on branches in our repo directly, and get branch deployments (see my message in chat for more info).

[larzon83]

I will install yarn and check again. I'll update tests too then.
As I am now a member of the repo: should we continue this PR from my fork or shall I create a new one directly in the repo so we can have branch deploys?

[codecov]

Codecov Report

Merging #2297 (57a5d8f) into master (b0202e1) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #2297   +/-   ##
=======================================
  Coverage   57.34%   57.34%           
=======================================
  Files         286      286           
  Lines        5788     5788           
  Branches      911      911           
=======================================
  Hits         3319     3319           
  Misses       2466     2466           
  Partials        3        3           

Impacted Files	Coverage Δ
src/activities/components/ActivityUsers.vue	100.00% <ø> (ø)
src/activities/components/CurrentUser.vue	100.00% <ø> (ø)
src/activities/components/EmptySlot.vue	100.00% <ø> (ø)
src/activities/components/UserSlot.vue	100.00% <ø> (ø)
src/places/components/PlaceEdit.vue	100.00% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b0202e1...57a5d8f. Read the comment docs.

[larzon83]

@nicksellen Updated snapshot. Also I have installed yarn and did all fresh. With yarn dev, it also runs fine with localhost in iOS Simulator.

[nicksellen]

Looks good now! Happy for a merge 🚀

[larzon83]

https://dev.karrot.world now works fine on my iPhone 😄