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;
}
19 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, @dodesz. 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!).

2 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.

3 Likes

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

2 Likes