Contrib.social

Giant emoticon buttons on preview page

Open on Drupal.org →
Created on 29 July 2020, over 4 years ago
Updated 27 April 2023, over 1 year ago

Problem/Motivation

When the user clicks on the comment preview button, the preview page displays giant emoticons. Further investigation shows that the CSS selectors used in votingapi_reaction.css don't attach to the elements because there is nothing with a .votingapi-reaction-form class on that page.

Steps to reproduce

Proposed resolution

I got it working by adding extra selectors. Here is my new votingapi_reaction.css 

#votingapi-reaction-form-vote,
.votingapi-reaction-form .form-radios {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}
#votingapi-reaction-form-vote input[type="radio"],
.votingapi-reaction-form .form-radios input[type="radio"] {
  display: none;
}
#votingapi-reaction-form-vote label,
.votingapi-reaction-form .form-radios label {
  display: block;
  margin: 0;
  cursor: pointer;
}
#votingapi-reaction-form-vote label .votingapi-reaction-item,
.votingapi-reaction-form .form-radios label .votingapi-reaction-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid rgb(238, 238, 238);
  border-radius: 5px;
  padding: 5px;
  margin: 0 5px;
  user-select: none;
}
#votingapi-reaction-form-vote label .votingapi-reaction-item > *,
.votingapi-reaction-form .form-radios label .votingapi-reaction-item > * {
  margin: 0 5px;
}
#votingapi-reaction-form-vote label .votingapi-reaction-image,
.votingapi-reaction-form .form-radios label .votingapi-reaction-image {
  width: 25px;
  height: 25px;
}
.votingapi-reaction-form .form-radios label .votingapi-reaction-count,
#votingapi-reaction-form-vote label .votingapi-reaction-count {
  text-align: center;
  padding-top: 5px;
}

/* selected reaction */
#votingapi-reaction-form-vote input[type="radio"]:checked + label,
.votingapi-reaction-form .form-radios input[type="radio"]:checked + label {
  color: rgb(0, 113, 179);
}
#votingapi-reaction-form-vote input[type="radio"]:checked + label .votingapi-reaction-item,
.votingapi-reaction-form .form-radios input[type="radio"]:checked + label .votingapi-reaction-item {
  border-color: rgb(0, 113, 179);
  background-color: rgb(248, 248, 248);
}

/* selected reaction */
#votingapi-reaction-form-vote label:hover .votingapi-reaction-item,
.votingapi-reaction-form .form-radios label:hover .votingapi-reaction-item {
  border-color: rgba(0, 143, 219, 0.2);
  background-color: rgba(0, 143, 219, 0.05);
}

/* hide buttons if js is active */
.js #votingapi-reaction-form-vote input[type="submit"],
.js .votingapi-reaction-form input[type="submit"] {
  display: none;
}

Remaining tasks

There is probably a better way to fix this if the developers want to have a look

There is also a problem where the save and preview buttons don't work on the comment preview page that may be related.

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Fixed

Version

1.1

Component

Code

Created by

bondkeevil

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024