Mudar posição do botão Curtir

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

Atendido / Resolvido Mudar posição do botão Curtir

Mensagem por PESS_dodo em 13/01/19, 09:02 pm

Detalhes da questão


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

Descrição


Boa noite,

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')));
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 229
Pontos Ativos : 391

Ver perfil do usuário http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum

Atendido / Resolvido Re: Mudar posição do botão Curtir

Mensagem por Pedxz em 14/01/19, 05:16 am

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.


Fórum dos Fóruns
Fórum de suporte Forumeiros
Leia as Regras do Fórum dos Fóruns.
Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Pedxz - Ajudeiro Voluntário  2007 Forumeiros

avatar

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2390
Pontos Ativos : 3023

Ver perfil do usuário https://pedxz.forumeiros.com

Atendido / Resolvido Re: Mudar posição do botão Curtir

Mensagem por PESS_dodo em 14/01/19, 09:35 pm

Obrigado irmão, resolvido
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 229
Pontos Ativos : 391

Ver perfil do usuário http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum

Atendido / Resolvido Re: Mudar posição do botão Curtir

Mensagem por Pedxz em 15/01/19, 05:12 am

Tópico resolvido


Movido para "Questões resolvidas".


Fórum dos Fóruns
Fórum de suporte Forumeiros
Leia as Regras do Fórum dos Fóruns.
Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Pedxz - Ajudeiro Voluntário  2007 Forumeiros

avatar

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2390
Pontos Ativos : 3023

Ver perfil do usuário https://pedxz.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum