1011295 - Makes view heart/like display in profile-2

Status: RESOLVED FIXED

(Webmaker Graveyard :: Profile, defect)

Description

[Aki Rose Braun [:akirose]]

(per cassie at https://projects.invisionapp.com/d/main#/console/1049631/23348262/comments/12414827)
- If a make has no likes, heart should be empty and not have a zero by it
- If a user has liked it, it should be full.
- If user has not liked it but other people have, the heart should be empty but there should be a count displayed next to it.

Comment 1

[Tanay Pant [:Tanay]]

Hi Aki, from where are the images (heart) imported, makerstrap? Could you please give me a link?

Comment 2

[Tanay Pant [:Tanay]]

Changes have to be made here: app/_less/views/makes.less and here: app/_partials/makes-list.html

Would it be something like:
<span class="make-likes" ng-if="make.likes.length">{{ make.likes.length }}</span>
<span class="make-likes-empty" ng-if="{{ make.likes.length === 0 }}"></span>

And in makes.less:

.make-likes-empty {
  margin-right: 1rem;
  &::before {
    .fa-mixin();
    color: @brand-primary;
    content: @fa-var-heart-0;
    font-weight: 300;
    margin-right: 0.5rem;
    &:hover {
      font-weight: 700;
    }
  }
}

Comment 3

[Aki Rose Braun [:akirose]]

The complication here is that we need to check if the user has liked it. (In retrospect, can a user like their own makes?)

If the user-liking-their-own-make-part isn’t an issue, I think actually something like this would work (but you should test to be sure)

<span class="make-likes" ng-if="make.likes.length">{{ make.likes.length }}</span>
<span class="make-likes-empty" ng-if="!make.likes.length"></span>

Comment 4

[Tanay Pant [:Tanay]]

Attachment: https://github.com/mozilla/webmaker-profile-2/pull/67

Comment 5

[Gavin Suntop [:gvn]]

I can't see anything following the Invision link. Can we put what was there on Redpen?

Comment 6

[Aki Rose Braun [:akirose]]

I un-archived the Invision project so I could find the comment: http://snaps.akibraun.com/vphxl.png

Comment 7

[Tanay Pant [:Tanay]]

I think the previous pull request achieves half of what was required, as Aki said, "The complication here is that we need to check if the user has liked it. (In retrospect, can a user like their own makes?)".

Dont know how to implement to check if a user had liked a make, other than this feature, other points stated in the bug have been taken care of.

Comment 8

[Aki Rose Braun [:akirose]]

Comment on attachment 8467683 [details] [review]
https://github.com/mozilla/webmaker-profile-2/pull/67

Just a couple of small changes, left some notes on your pull request!

Comment 9

[[github robot]]

Commits pushed to master at https://github.com/mozilla/webmaker-profile-2

https://github.com/mozilla/webmaker-profile-2/commit/e53385691bf69a205832efd596f43cf1ade22faf
For Bug 1011295

For Bug 1011295

For Bug 1011295

https://github.com/mozilla/webmaker-profile-2/commit/5d2f527a5fbbdac8239ddab41c7542a8c1f3e50d
Merge pull request #67 from tanay1337/master

Bug 1011295 - Makes view heart/like display in profile-2

Comment 10

[Aki Rose Braun [:akirose]]

Tanay: While this is a perfect interim solution, I think I answered my own question. We need to grab the user object and figure out the current user's likes, then match them up with the makes on the profile they are viewing at any given moment. From there, the flow should be…

: While logged in to webmaker
1. I visit someone's profile other than my own, such as https://webmaker.org/user/keyboardkat
2. Any Make that I have not liked should have an empty heart, even if it has been liked by others
-> caveat: the number "0" should never render
3. The heart should be a link, triggering the like/unlike method for myself
4. Upon clicking the heart to like, the number next to it should increment and the heart should fill
-> to click a filled heart to unlike, the number next to it should decrement and the heart should toggle to open (@fa-var-heart-o)

Comment 11

[Tanay Pant [:Tanay]]

Sorry, but I don't think that I would be able to complete the next phase of this bug, since I am not a JS programmer. Assigning it to you.

Comment 12

[Gavin Suntop [:gvn]]

Not sure if you still needinfo? Clearing this flag, but feel free to re-flag.

Comment 13

[Aki Rose Braun [:akirose]]

Reassigning to default for now. Comment #10 has the general instructions for solving this bug, but I won't be able to get to it for a while.