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;
}
23 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

This is fantastic, @Don. Thanks so much.

I’m looking at using this on my Discourse setup, but we currently have two rows of reaction options (six emojis per row, so 12 emojis total).

I know just enough CSS to get by, but it really isn’t my strength.

How difficult would it be to adjust this code so that it’d work for that sort of arrangement?

Really appreciate your sharing this (even if I’m quite late to the party!).

3 Likes

Thank you JR :slightly_smiling_face: I think I will create a theme component from this to make it easier to use and fit to reactions, add some fixes etc… I hope that will help. I’ll try to make it next week.

5 Likes

Thanks so much, @Don! That would be incredible and a much appreciated supplement/addition. I’ll definitely keep an eye out for it.

3 Likes

Happy So Excited GIF

2 Likes

Hello,

I made a theme component from this. I think it makes it easier. :slightly_smiling_face:

Thanks to @nolo’s previously made theme component Category List with Banners I can easily implement the list setting to the reactions label. Thank you :heart:

I added fixes and some settings:

  1. reactions_label
    Separate with semicolon ;
    reaction name;reaction label
    May-29-2022 17-02-05

  2. reactions picker rounding
    Reactions picker (border-radius) corners rounding. You can use px, em, etc
    Default 1em.
    Screenshot 2022-05-29 at 17.03.39
    If you want to make it more or less rounded change this setting.
    The previous version was 2em.
    Screenshot 2022-05-29 at 17.06.59

  3. state panel rounding
    Reactions State Panel (border-radius) corners rounding. You can use px, em, etc
    Screenshot 2022-05-29 at 17.08.55

  4. user list rounding
    Reactions User list (border-radius) corners rounding. You can use px, em, etc
    Screenshot 2022-05-29 at 17.07.56

  5. hide user list heading
    This option will hide this user list heading on panel. The heading is smiley on this image.
    Screenshot 2022-05-29 at 17.27.53

  6. hide user list
    This option will hide the user list panel. This is the dark hovered panel.
    Screenshot 2022-05-29 at 17.07.56

  7. hide who liked
    This option will hide the default who liked section.
    Screenshot 2022-05-29 at 17.10.49

I have a few more plans with this component, which I will add later. :slightly_smiling_face:

16 Likes