Adequar código Javascript de abreviação do Citar

Detalhes da questão

Endereço do fórum: https://rpgplayers.forumeiros.com
Versão do fórum: AwesomeBB

Descrição

Boa tarde.
Quando usava o Punbb, havia criado um código que limitava a altura do "citar" para que ele não ocupasse tanto espaço no post, poluindo muito a leitura. Era quase que apenas um preview:

Código:


// Nos tópicos

/*global jQuery */

; (function ($) {
    'use strict';

    var config;

    config = {
        height: 200,
        label: 'Continuar lendo'
    };

    $(function () {

        $('.postbody blockquote').each(function () {
            var self;

            self = $(this);

            if (self.height() > config.height) {
                self
                    .addClass('quote-collapsed')
                    .append($('<a>', {
                        href: 'javascript:void(0);',
                        class: 'quote-expand',
                        text: config.label
                    }));
            }
        });

        $('.postbody .quote-expand').on('click', function () {
            var self;

            self = $(this);

            self.closest('blockquote').removeClass('quote-collapsed');
            self.remove();
        });
    });
}) (jQuery);


Podem adequá-lo para ser usado tanto no PC com o AwesomeBB, quanto no Mobile com versão móvel?
Obrigado desde já.

Boa noite @Daniel Z

Poderia me mostrar uma imagem de como ficaria o conteúdo caso o javascript supracitado acima fosse utilizado na antiga versão PunBB?

(Aguardo respostas)
Atenciosamente,
Wusthy.

Wusthy escreveu:Boa noite @Daniel Z

Poderia me mostrar uma imagem de como ficaria o conteúdo caso o javascript supracitado acima fosse utilizado na antiga versão PunBB?

(Aguardo respostas)
Atenciosamente,
Wusthy.

Olá. Eu não tenho mais o Punbb no fórum, mas ele deixava o citar assim:



tinhas esquecido do CSS:

Código:


        /** BEGIN Quote Collapse */
       
        div.postbody blockquote.quote-collapsed {
          max-height: 200px;
          overflow: hidden;
          position: relative;
        }
       
        div.postbody blockquote.quote-collapsed:after {
          content: " ";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 50%;
          background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
          background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
          background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
        }
       
        div.postbody blockquote {
          transition: 250ms ease height;
        }
       
        div.postbody blockquote a.quote-expand {
          position: absolute;
          display: block;
          bottom: 1em;
          z-index: 1;
          width: 150px;
          border: 1px rgba(0, 0, 0, 0.5) solid;
          height: 30px;
          line-height: 30px;
          text-align: center;
          text-decoration: none;
          color: inherit;
          background-color: #fff;
          left: 50%;
          margin-left: -75px;
        }
       
        /** END Quote Collapse */


Olá @Daniel Z,

Adicione em sua Folha de estilo (CSS) o seguinte código:

Código:

/** BEGIN Quote Collapse */
      blockquote {
          background-color: #ffffff;
          border-color: rgba(0,0,0,0.11);
          border-radius: 3px;
          border-style: solid;
          border-width: 0 0 0 6px;
          font-size: 14px;
                font-style: italic;
          line-height: 1.5;
          padding: 8px 16px 8px 10px
   }
        div.post-content blockquote.quote-collapsed {
          max-height: 200px;
          overflow: hidden;
          position: relative;
        }
     
        div.post-content blockquote.quote-collapsed:after {
          content: " ";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 50%;
          background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
          background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
          background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
        }
     
        div.post-content blockquote {
          transition: 250ms ease height;
        }
     
        div.post-content blockquote a.quote-expand {
          position: absolute;
          display: block;
          bottom: 1em;
          z-index: 1;
          width: 150px;
          border: 1px rgba(0, 0, 0, 0.5) solid;
          height: 30px;
          line-height: 30px;
          text-align: center;
          text-decoration: none;
          color: inherit;
          background-color: #fff;
          left: 50%;
          margin-left: -75px;
        }
     
        /** END Quote Collapse */


E adiciona o seguinte javascript com a opção Nos tópicos:

Código:

// Nos tópicos
 
/*global jQuery */
 
; (function ($) {
    'use strict';
 
    var config;
 
    config = {
        height: 200,
        label: 'Continuar lendo'
    };
 
    $(function () {
 
        $('.post-content blockquote').each(function () {
            var self;
 
            self = $(this);
 
            if (self.height() > config.height) {
                self
                    .addClass('quote-collapsed')
                    .append($('<a>', {
                        href: 'javascript:void(0);',
                        class: 'quote-expand',
                        text: config.label
                    }));
            }
        });
 
        $('.post-content .quote-expand').on('click', function () {
            var self;
 
            self = $(this);
 
            self.closest('blockquote').removeClass('quote-collapsed');
            self.remove();
        });
    });
}) (jQuery);


Atenciosamente,
Wusthy.

Deu certo, Wusthy.
Muito obrigado.

@Daniel Z De nada, senhor.

Tópico resolvido Movido para "Questões resolvidas".