Custom Discourse Reactions

Hello,

I made some CSS modification on Discourse Reactions Plugin. So it looks much like Facebook reaction buttons.

These for 6 reaction buttons including the default which is on my site is :heart: .

COMMON / SCSS
Place this code to common - css section.
Important notice: You can modify the emojis above label with edit content: 'Love it!', content: 'Beautiful' etc… lines: Of course you can use whatever reaction you want. It is just a label above the reactions.

.discourse-reactions-picker {
  .discourse-reactions-picker-container {
    width: 330px;
    height: 50px;
    max-width: calc(100vw - 2em);
    border: 1px solid var(--primary-low) !important;
    border-radius: 50px;
    .pickable-reaction {
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }
  .pickable-reaction {
    background: transparent !important;
    .emoji {
      height: 40px;
      width: 40px;
      padding: 0 !important;
      transform: scale(0.9);
    }
    &.is-used {
      transform: scale(1.3);
      transform-origin: bottom;
      border: none !important;
    }
    &:hover {
      transform-origin: bottom;
    }
    &:hover:after {
      position: absolute;
      font-size: 10px;
      top: -15px;
      background: var(--secondary-low);
      color: var(--secondary);
      padding: 2px 5px;
      border-radius: 20px;
    }
    &:first-child {
      &:hover:after {
        content: 'Love it!';
      }
    }
    &:nth-child(2) {
      &:hover:after {
        content: 'Beautiful';
      }
    }
    &:nth-child(3) {
      &:hover:after {
        content: 'Hug';
      }
    }
    &:nth-child(4) {
      &:hover:after {
        content: 'Congrats!!';
      }
    }
    &:nth-child(5) {
      &:hover:after {
        content: 'Hmm...';
      }
    }
    &:nth-child(6) {
      &:hover:after {
        content: 'Wooow!';
      }
    }
  }
}

react-buttons


Mobile

On mobile I set position fixed the reactions picker position.

This is a possible option to prevent this strange behaviour. :arrow_down:
raction-no-fixed

Looks like this :arrow_down:
reactions-fixed

Same thing happening with state panel on mobile that was on reactions picker so also use position fixed.

Mobile / SCSS

.discourse-reactions-picker {
  position: fixed;
  .pickable-reaction {
    &:hover:after {
      font-size: 12px;
      top: -8px;
    }
    &.is-used {
      &:hover:after {
        transform: scale(0.8);
        top: -15px;
      }
    }
  }
}

.discourse-reactions-state-panel {
  position: fixed;
}

Hide default who liked section

COMMON / CSS

I hide the default who’s liked section because the Reactions State Panel also show those informations.

.who-liked {
  display: none;
}
13 Likes

Like it very much :love_you_gesture:

5 Likes

Awesone this works really nice. Thanks for sharing
:beers::sunglasses::+1::sparkles:

4 Likes

I have it installed and I love it.

A question:

Is it possible to remove that black hover?

2 Likes

Hi Paulina,

I am really glad you like it :heart: Thank you!

To hide the dark hovered user list panel use this code :slightly_smiling_face:

.discourse-reactions-list .reactions .user-list {
  display: none;
}
4 Likes

It worked for me! I love the way it looks, thank you very much. :heart:

2 Likes

Hi Don,

I like your customization very much. A great Job and thanks! :heart:
but I still have a question, how to get rid of the black hover like this?

Selection_060

3 Likes

Hi Neo,

Thank you :heart:

Unfortunately that is not possible to hide title attribute with css but you can edit the js.discourse_reactions.picker.react_with text on /admin/customize/site_texts to make it less longer.

3 Likes

Thanks, I’ve done with it, now it looks better! :wave:

3 Likes