Mudar posição do botão Curtir

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Mudar posição do botão Curtir

Mensagem por PESS_dodo 13.01.19 23:02

Detalhes da questão


Endereço do fórum: http://bl-rpg.forumeiros.com
Versão do fórum: ModernBB

Descrição


Boa noite,
Mudar posição do botão Curtir PVpHT22
https://i.imgur.com/PVpHT22.png

Como mostra na imagem, a mão do like esta mal posicionada... se puder colocar ali proximo aos botoes de editar etc

Codigo java
Código:
/**
 *! Botão curtir para fóruns ModernBB
 *
 *  @author Luiz
 *  @version {beta} 1.0
 *  @licence MIT
 *
 *  Copyright (c) Luiz Felipe | All rights reserved.
 */
(function ($, styles) {
  'use strict';
 
  /**
  * @name Recriar o painel de voto.
  * @desc Usado para recriar o painel dos votos no topo do post.
  * @param {string} href - Corresponde à URL que será usada na ação AJAX caso o botão de curtir seja usado.
  * @param {string} number - Corresponde ao número de votos daquela postagem.
  * @param {object} vote - Corresponde ao seletor do wrapper de todo o conteúdo dos votos.
  * @param {boolean} cond - Caso for "true", a ação AJAX será feita, caso contrário, somente irá aparecer.
  */
  var $createVote = function (href, number, vote, cond) {
    $('<div>', {
      'data-href': href,
      'html'    : [
        '<span class="fa-vote-counter">' + number + '</span>',
        $('<a>', { 'class': 'ion-thumbsup fa-new-vote-action-trigger' }).prop('outerHTML')
      ].join('\n'),
      'class'    : cond ? 'fa-new-vote-wrapper' : 'fa-new-vote-wrapper voted'
    })
      .insertAfter(vote)
        .find('.fa-new-vote-action-trigger')
          .on('click', function () {
 
            var $this = $(this);
 
            if (!cond || $(this).is('.voted')) {
              alert('Você já votou!');
              return;
            }
 
            var $button = $(this).prev('span');
            var $parent = $(this).parent('div');
 
            $this.addClass('voted');
            $parent.addClass('voted');
            $button.text(parseInt($button.text()) + 1);
 
            $.get(href)
              .done(function () {
 
                console.info('O voto foi registrado.');
 
              })
              .fail(function () {
                alert('Houve um erro, tente novamente!');
                location.reload();
              })
            ;
          })
    ;
  };
 
  $(function () {
    $('.post').each(function () {
 
      var $this  = $(this);
      var $vote  = $this.find('.vote');
      var $like  = $this.find('.vote .ion-thumbsup');
      var $bar    = $this.find('.vote-bar');
      var $barNum = $this.find('.vote-bar .vote-bar-desc');
 
      $vote.hide();
 
      /**
      * Parte 01:
      * Executar o código caso já existam votos, mas o usuário ainda não tiver votado.
      */
      if ($like.length && $bar.length) {
 
        var number1 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href1  = $like.attr('href');
 
        $createVote(href1, number1, $vote, true);
 
        return;
 
      }
 
      /**
      * Parte 02:
      * Executar o código caso já existam votos, contando com o do usuário.
      */
      if ($bar.length) {
 
        var number2 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href2  = $like.attr('href');
 
        $createVote(href2, number2, $vote, false);
 
        return;
 
      }
 
      /**
      * Parte 03:
      * Executar o código caso o usuário não tiver votado, e não existam votos.
      */
      if ($like.length) {
 
        var href3 = $like.attr('href');
 
        $createVote(href3, 0, $vote, true);
 
        return;
 
      }
 
    });
 
    $(['<style>', styles, '</style>'].join('\n')).appendTo('head');
  });
}(jQuery, [
  '.fa-new-vote-wrapper {',
  '  float: left;',
  '  display: inline-block;',
  '  position: relative;',
  '  margin: -10px 30px auto;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-vote-counter {',
  '  position: absolute;',
  '  left: -4px;',
  '  top: 1px;',
  '  padding: 3px 10px 1px 10px;',
  '  border-radius: 0px 5px 5px 0px;',
  '  color: #fff;',
  '  z-index: 1;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger {',
  '  color: #fff;',
  '  display: inline-block;',
  '  padding: 6px 7.5px;',
  '  font-size: 18px;',
  '  cursor: pointer;',
  '  text-decoration: none;',
  '  position: absolute;',
  '  left: -25px;',
  '  top: -5px;',
  '  z-index: 13;',
  '  -webkit-transition: all 200ms linear;',
  '    -moz-transition: all 200ms linear;',
  '      -ms-transition: all 200ms linear;',
  '      -o-transition: all 200ms linear;',
  '          transition: all 200ms linear;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger:hover {',
  ' border-color: rgba(0,0,0,0.12);',
  '  border-radius: 3px;',
  '  border-style: solid;',
  '  border-width: 1px;',
  '  top: 0px;',
  '  margin-left: 2px;',
  '  box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
  '  padding: 0px 3px 2px 4px;',
  '  background: #11a017;',
  '}',
  '',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger,',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger:hover {',
  ' border-color: rgba(0,0,0,0.12);',
  '  border-radius: 3px;',
  '  border-style: solid;',
  '  border-width: 1px;',
  '  top: 0px;',
  '  margin-left: 1px;',
  '  box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
  '  padding: 0px 3px 2px 4px;',
  '}'
].join('\n')));
PESS_dodo

PESS_dodo
****

Membro desde : 16/02/2017
Mensagens : 257
Pontos : 435

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Mudar posição do botão Curtir

Mensagem por tikky 14.01.19 7:16

Olá @PESS_dodo,
Mude o seu código para o seguinte:
Código:
/**
 *! Botão curtir para fóruns ModernBB
 *
 *  @author Luiz
 *  @version {beta} 1.0
 *  @licence MIT
 *
 *  Copyright (c) Luiz Felipe | All rights reserved.
 */
(function ($, styles) {
  'use strict';
 
  /**
  * @name Recriar o painel de voto.
  * @desc Usado para recriar o painel dos votos no topo do post.
  * @param {string} href - Corresponde à URL que será usada na ação AJAX caso o botão de curtir seja usado.
  * @param {string} number - Corresponde ao número de votos daquela postagem.
  * @param {object} vote - Corresponde ao seletor do wrapper de todo o conteúdo dos votos.
  * @param {boolean} cond - Caso for "true", a ação AJAX será feita, caso contrário, somente irá aparecer.
  */
  var $createVote = function (href, number, vote, cond) {
    $('<div>', {
      'data-href': href,
      'html'    : [
        '<span class="fa-vote-counter">' + number + '</span>',
        $('<a>', { 'class': 'ion-thumbsup fa-new-vote-action-trigger' }).prop('outerHTML')
      ].join('\n'),
      'class'    : cond ? 'fa-new-vote-wrapper' : 'fa-new-vote-wrapper voted'
    })
      .insertAfter(vote)
        .find('.fa-new-vote-action-trigger')
          .on('click', function () {
 
            var $this = $(this);
 
            if (!cond || $(this).is('.voted')) {
              alert('Você já votou!');
              return;
            }
 
            var $button = $(this).prev('span');
            var $parent = $(this).parent('div');
 
            $this.addClass('voted');
            $parent.addClass('voted');
            $button.text(parseInt($button.text()) + 1);
 
            $.get(href)
              .done(function () {
 
                console.info('O voto foi registrado.');
 
              })
              .fail(function () {
                alert('Houve um erro, tente novamente!');
                location.reload();
              })
            ;
          })
    ;
  };
 
  $(function () {
    $('.post').each(function () {
 
      var $this  = $(this);
      var $vote  = $this.find('.vote');
      var $like  = $this.find('.vote .ion-thumbsup');
      var $bar    = $this.find('.vote-bar');
      var $barNum = $this.find('.vote-bar .vote-bar-desc');
 
      $vote.hide();
 
      /**
      * Parte 01:
      * Executar o código caso já existam votos, mas o usuário ainda não tiver votado.
      */
      if ($like.length && $bar.length) {
 
        var number1 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href1  = $like.attr('href');
 
        $createVote(href1, number1, $vote, true);
 
        return;
 
      }
 
      /**
      * Parte 02:
      * Executar o código caso já existam votos, contando com o do usuário.
      */
      if ($bar.length) {
 
        var number2 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
        var href2  = $like.attr('href');
 
        $createVote(href2, number2, $vote, false);
 
        return;
 
      }
 
      /**
      * Parte 03:
      * Executar o código caso o usuário não tiver votado, e não existam votos.
      */
      if ($like.length) {
 
        var href3 = $like.attr('href');
 
        $createVote(href3, 0, $vote, true);
 
        return;
 
      }
 
    });
 
    $(['<style>', styles, '</style>'].join('\n')).appendTo('head');
  });
}(jQuery, [
  '.fa-new-vote-wrapper {',
  '  float: right;',
  '  display: inline-block;',
  '  position: relative;',
  '  margin: -10px 30px auto;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-vote-counter {',
  '  position: absolute;',
  '  right: -4px;',
  '  top: 1px;',
  '  padding: 3px 10px 1px 10px;',
  '  border-radius: 0px 5px 5px 0px;',
  '  color: #fff;',
  '  z-index: 1;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger {',
  '  color: #fff;',
  '  display: inline-block;',
  '  padding: 6px 7.5px;',
  '  font-size: 18px;',
  '  cursor: pointer;',
  '  text-decoration: none;',
  '  position: absolute;',
  '  right: -25px;',
  '  top: -5px;',
  '  z-index: 13;',
  '  -webkit-transition: all 200ms linear;',
  '    -moz-transition: all 200ms linear;',
  '      -ms-transition: all 200ms linear;',
  '      -o-transition: all 200ms linear;',
  '          transition: all 200ms linear;',
  '}',
  '',
  '.fa-new-vote-wrapper .fa-new-vote-action-trigger:hover {',
  ' border-color: rgba(0,0,0,0.12);',
  '  border-radius: 3px;',
  '  border-style: solid;',
  '  border-width: 1px;',
  '  top: 0px;',
  '  margin-left: 2px;',
  '  box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
  '  padding: 0px 3px 2px 4px;',
  '  background: #11a017;',
  '}',
  '',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger,',
  '.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger:hover {',
  ' border-color: rgba(0,0,0,0.12);',
  '  border-radius: 3px;',
  '  border-style: solid;',
  '  border-width: 1px;',
  '  top: 0px;',
  '  margin-left: 1px;',
  '  box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
  '  padding: 0px 3px 2px 4px;',
  '}'
].join('\n')));


Cordialmente,
pedxz.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7821
Pontos : 9063

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar posição do botão Curtir

Mensagem por PESS_dodo 14.01.19 23:35

Obrigado irmão, resolvido
PESS_dodo

PESS_dodo
****

Membro desde : 16/02/2017
Mensagens : 257
Pontos : 435

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Mudar posição do botão Curtir

Mensagem por tikky 15.01.19 7:12

Tópico resolvido


Movido para "Questões resolvidas".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7821
Pontos : 9063

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


Permissões neste sub-fórum
Não podes responder a tópicos