Post reactions

http://forumfiles.ru/uploads/0007/e3/f7/2/46357.jpg

This is also a variation on the usefulness of the post, but with the addition of a script.

  • Replaces the rating of a post with three types of emoticons: positive post, negative and not yet rated

  • Added pop-up explanations to emoticons in the post rating on hover

  • Vote for the post appears only by clicking on the smile with the current rating of the post

  • Plus and minus in voting for a post have been replaced with two smilies: negative and positive

  • Added a mini clarification that adding a reaction affects reputation

  • Added tooltips to voting emoticons

Style (in html-top or custom style WITHOUT <style> tags)

Код:
.post-vote {
text-align: right;
}

.punbb .post-rating p,
.punbb .post-vote p {
padding: 0 !important;
margin: 0 !important;
float: none !important;
}

.post-vote:before {
content: 'Post reaction:';
font-size: 11px;
display: block;
}
.post-vote .container:before {
content: 'Attention! The reaction is reflected in the user's reputation!';
font-size: 11px;
display: block;
color: #e63737;
} 

.post-vote .container a {
display: inline-block;
font-size: 0 !important;
width: 50px;
height: 50px;
background-size: contain;
opacity: 0.5;
transition: all 0.6s;
-webkit-transition: all 0.6s;
position: relative;
top: -5px;
}
.tipsy, .post-vote .container a:hover {opacity: 1 !important;}

.post-vote .container a[href*="&v=1"] {
background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_001.png);
}
.post-vote .container a[href*="&v=0"] {
background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_017.png);
}

.post-rating {
text-align: right;
max-height: 70px;
max-width: 70px;
float: right;
margin-left: 10px;
}

.punbb .post-rating a {
cursor: help !important;
display: inline-block;
font-size: 0 !important;
width: 70px;
height: 70px;
background-size: contain;
position: relative;
}

.punbb .post-rating a {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_013.png);}
.post-rating.good a {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_003.png);}
.post-rating.bad a {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_022.png);}
.post-rating.super a {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_004.png);}
.post-rating.awfull a {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_024.png);}


.post-rating a:before {
opacity: 0;
transition: all 0.6s;
-webkit-transition: all 0.6s;
font-size: 13px;
position: absolute;
top: 20px;
padding: 5px;
background-color: #535252;
color: #fff;
border-radius: 5px;
}
.post-rating a:before {
content: 'Have not responded to the post yet';
left: -190px;
}

.post-rating.good a:before {
content: 'Most liked the post :)';
left: -200px;
}
.post-rating.bad a:before {
content: 'Most was not liked the post :(';
left: -190px;
}
.post-rating.super a:before {
content: 'Most are delighted with the post ^^';
left: -250px;
}
.post-rating.awfull a:before {
content: 'Most people hate the post %(';
left: -210px;
}

.post-rating:hover a:before {opacity: 1;}

Script в html-низ

Код:
<!-- Post reactions -->
<script language="javascript">
(function(){

  function processRating() {
    $('.post-rating').removeClass('good bad super awful').each(function () {
      var b = parseInt($(this).text());
      if (b > 0) $(this).addClass('good');
      if (b < 0) $(this).addClass('bad');
      if (b > 4) $(this).addClass('super');
      if (b < -1) $(this).addClass('awfull');
    });

    $('.post-vote .container a[href*="&v=1"]').attr('title', 'I like!');
    $('.post-vote .container a[href*="&v=0"]').attr('title', 'Sucks...');
    $('.post-rating a').attr('title', 'Add reaction (click)');

    $('.post-vote .container a[title], .post-rating a[title]').tipsy({fade: true, gravity: 's'});
  }

  processRating();

  $(document).ajaxSuccess(function(e, xhr, data) {
    if (!~data.url.indexOf('relation.php')) return;
    if (JSON.parse(xhr.responseText).response) setTimeout(processRating, 0);
  });

})();
</script>

Setting: super cool and mega horrible post
http://forumfiles.ru/uploads/0007/e3/f7/2/761640.jpg

Find the lines in the script:

if(b>4)$(this).addClass('super');
  if(b<-1)$(this).addClass('awfull');

The first number is the number of pluses to display the "super post"
The second number is the number of minuses for displaying a terrible post
By analogy, you can add your own classes for super-cool high-rated posts or very, very low-rated

Additive: reactions in the container of voters
http://forumfiles.ru/uploads/0007/e3/f7/2/929899.jpg

Add to style (in html-top or custom style WITHOUT <style> tags)

Код:
figure .vote:before {font-size: 0 !important;}
figure .vote {
width: 50px;
height: 50px;
background-size: contain !important;
background-color: #000 !important;
border-radius: 0 !important;
opacity: 1;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
figure .vote.plus {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_001.png);}
figure .vote.minus {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_017.png);}

#respect figure:hover .vote {
display: inline !important;
opacity: 0;
}
#all_voters figure:hover .vote {display: inline !important;}

#respect figcaption {margin-top: 0px !important;}
#respect .person {
width: 50px !important;
height: 50px !important;
}
#respect figure {width: 60px !important;}

.rating_theme .vote {
border-radius: 50% !important;
width: 30px;
height: 30px;
}