Tabela de comentários

2 participantes

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

Tópico resolvido Tabela de comentários

Mensagem por Vinicius Reis 04.11.16 1:38

Detalhes da questão


Endereço do fórum: http://atelier262.forumeiros.com/
Versão do fórum: PunBB

Descrição


Entrem neste tópico para ler a respeito; clicando aqui




Postando em ordem as imagens:

Imagem 1: https://i.imgur.com/HXmly0P.png
Imagem do spoiler 1: https://i.imgur.com/thFWp4Q.png
Imagem do spoiler 2: https://i.imgur.com/ve4TNXx.png


Última edição por Vinicius Reis em 04.11.16 13:50, editado 1 vez(es)
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Tabela de comentários

Mensagem por Kyo Panda 04.11.16 2:20

Olá,

As imagens do tópico antigo estão trancadas para moderadores. Teria como postá-las aqui? Acredito que queira algo parecido àquela barra com o caminho do tópico e a lista de páginas, correto?

^-^

Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela de comentários

Mensagem por Vinicius Reis 04.11.16 13:50

Postando em ordem as imagens:

Imagem 1: https://i.imgur.com/HXmly0P.png
Imagem do spoiler 1: https://i.imgur.com/thFWp4Q.png
Imagem do spoiler 2: https://i.imgur.com/ve4TNXx.png
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela de comentários

Mensagem por Kyo Panda 04.11.16 15:46

Eu precisaria que você criasse tópico com mais de uma página de comentários para testes, tudo bem?

^-^
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela de comentários

Mensagem por Vinicius Reis 07.11.16 18:02

Tudo bem, mas isto eu queria que fosse para tópicos também! Assim como para comentários.

Link: http://atelier262.forumeiros.com/t31-um-monte-de-comentarios

Criei uns 28 comentários.
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela de comentários

Mensagem por Kyo Panda 07.11.16 18:15

Eu vou começar a tratar da criação do código, mas precisaria que criasse um fórum com mais de uma página de tópicos também. ^-^
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela de comentários

Mensagem por Vinicius Reis 08.11.16 3:43

Não é possível eu criar mais tópicos! Desculpe.
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela de comentários

Mensagem por Kyo Panda 08.11.16 17:22

Então não será possível eu garantir que a paginação da listagem de tópicos funcione. :C

---

  • Vá em Painel de controle :seta2: Módulos :seta2: HTML & JavaScript :seta2: Gestão dos códigos JavaScripts :seta2: Criar um novo JavaScript e adicione esse código com Investimento em Nos sub-fóruns e Nos tópicos:

    Código:
    ; (function ($) {
        'use strict';

        var sizes, url, regex, getPageUrl;

        sizes = {
            topic: 25,
            forum: 50
        };

        url = location.pathname.match(/^\/(t|f)(\d+)(p\d+)?-(.*)/i);

        if (url === null) {
            return;
        }

        regex = /(\d+)\sde\s(\d+)/i;

        getPageUrl = function (page){
            var parts, page, pageUrl, type;

            switch (url[1]) {
                case 't': type = 'topic'; break;
                case 'f': type = 'forum'; break;
                default: return false;
            }

            page = parseInt(page) - 1;
            pageUrl = page > 0 ? 'p' + (page * sizes[type]) : '';

            return '/' + url[1] + url[2] + pageUrl + '-' + url[4];
        };

        $(function () {

            $('#main-content > .pagination').each(function (key, element) {
                var self, matches, page, last, prev, next, list;

                self = $(element);
                matches = self.text().match(regex);

                if (matches === null) {
                    return;
                }

                page = parseInt(matches[1]);
                last = parseInt(matches[2]);
                next = page + 1 > last ? -1 : page + 1;
                prev = page - 1 < 1 ? -1 : page - 1;

                list = [];

                if (page > 1) {
                    list.push($('<li>', {
                        class: 'pagination-first',
                        html: $('<a>', {
                            text: '«',
                            href: getPageUrl(1)
                        }).prop('outerHTML')
                    }).prop('outerHTML'));

                    if (prev !== -1) {
                        list.push($('<li>', {
                            class: 'pagination-prev',
                            html: $('<a>', {
                                text: '‹',
                                href: getPageUrl(prev)
                            }).prop('outerHTML')
                        }).prop('outerHTML'));
                    }
                }

                list.push($('<li>', {
                    class: 'pagination-data',
                    text: page + ' / ' + last
                }).prop('outerHTML'));
               
                list.push($('<li>', {
                    class: 'pagination-input',
                    html: $('<input>', {
                        type: 'number',
                        value: page,
                        min: 1,
                        max: last
                    }).prop('outerHTML')
                }).prop('outerHTML'));

                list.push($('<li>', {
                    class: 'pagination-submit',
                    html: $('<a>', {
                        text: 'GO',
                        href: 'javascript:void(0);'
                    }).prop('outerHTML')
                }).prop('outerHTML'));

                if (page < last) {
                    list.push($('<li>', {
                        class: 'pagination-prev',
                        html: $('<a>', {
                            text: '›',
                            href: getPageUrl(next)
                        }).prop('outerHTML')
                    }).prop('outerHTML'));

                    list.push($('<li>', {
                        class: 'pagination-last',
                        html: $('<a>', {
                            text: '»',
                            href: getPageUrl(last)
                        }).prop('outerHTML')
                    }).prop('outerHTML'));
                }

                self
                    .html('')
                    .append($('<ul>', {
                        html: list.join('')
                    }));

                self.on('click', '.pagination-submit', function () {
                    location.href = getPageUrl(self.find('.pagination-input input').val());
                });
            });
        });
    })(jQuery);
  • No código acima, você pode encontrar essa parte:
    Código:
    sizes = {
        topic: 25,
        forum: 50
    };
    Nela você deve definir os valores de:

    • Mensagens por página em topic
    • Tópicos por página em forum

    Esses valores podem ser encontrados em Painel de Controle :seta2: Geral :seta2: Mensagens & e-mails :seta2: Configuração.

  • Após vá em Painel de controle :seta2: Visualização :seta2: Imagens e Cores :seta2: Cores :seta2: Folha de estilo CSS e adicione o seguinte código ao final da caixa de texto:
    Código:
    /** Pagination begin **/
    #main-content > .pagination {
        display: block !important;
    }

    #main-content > .pagination ul {
        list-style: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
        height: 30px;
        line-height: 30px;
        color: #ccc;
    }

    #main-content > .pagination li {
        float: left;
        background-color: #2b2b2b;
    }

    #main-content > .pagination li:first-child,
    #main-content > .pagination li:first-child a {
        border-radius: 3px 0 0 3px;
    }

    #main-content > .pagination li:last-child,
    #main-content > .pagination li:last-child a {
        border-radius: 0 3px 3px 0;
    }

    #main-content > .pagination a {
        display: block;
        color: #fff;
        font-size: 12px;
        padding: 0 10px;
        background: rgb(68,68,68);
        background: -moz-linear-gradient(top,  rgba(68,68,68,1) 0%, rgba(34,34,34,1) 100%);
        background: -webkit-linear-gradient(top,  rgba(68,68,68,1) 0%,rgba(34,34,34,1) 100%);
        background: linear-gradient(to bottom,  rgba(68,68,68,1) 0%,rgba(34,34,34,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
        border: 1px rgba(0, 0, 0, 0.1) solid;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    #main-content > .pagination a:hover,
    #main-content > .pagination a:focus {
        background: #222;
    }

    #main-content > .pagination .pagination-data {
        padding: 0 10px;
    }

    #main-content > .pagination .pagination-input input {
        margin: 0;
        padding: 0 5px;
        background: #2b2b2b;
        height: 30px;
        outline: none;
        border: 1px #666 solid;
        box-sizing: border-box;
        width: 60px;
        color: #ccc;
        vertical-align: top;
    }
    /** Pagination end */


^-^
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela de comentários

Mensagem por Vinicius Reis 10.11.16 19:34

Olá ficou ótimo! Muito bom gostei muito!

Mas teria como tirar a opção de marcar todos como não lido?! E também tirar aquela bolinha de: •

Tirar apenas isto: http://prnt.sc/d5nl0c

Funcionou para os tópicos sim ^_^
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela de comentários

Mensagem por Kyo Panda 11.11.16 1:36

Opa, sem problemas.

Troque o código Javascript por esse:

Código:
; (function ($) {
    'use strict';

    var sizes, url, regex, getPageUrl;

    sizes = {
        topic: 25,
        forum: 50
    };

    url = location.pathname.match(/^\/(t|f)(\d+)(p\d+)?-(.*)/i);

    if (url === null) {
        return;
    }

    regex = /(\d+)\sde\s(\d+)/i;

    getPageUrl = function (page){
        var parts, page, pageUrl, type;

        switch (url[1]) {
            case 't': type = 'topic'; break;
            case 'f': type = 'forum'; break;
            default: return false;
        }

        page = parseInt(page) - 1;
        pageUrl = page > 0 ? 'p' + (page * sizes[type]) : '';

        return '/' + url[1] + url[2] + pageUrl + '-' + url[4];
    };

    $(function () {

        $('#main-content > .pagination').each(function (key, element) {
            var self, matches, page, last, prev, next, list;

            self = $(element);
            matches = self.text().match(regex);

            if (matches === null) {
                self.remove();
                return;
            }

            page = parseInt(matches[1]);
            last = parseInt(matches[2]);
            next = page + 1 > last ? -1 : page + 1;
            prev = page - 1 < 1 ? -1 : page - 1;

            list = [];

            if (page > 1) {
                list.push($('<li>', {
                    class: 'pagination-first',
                    html: $('<a>', {
                        text: '«',
                        href: getPageUrl(1)
                    }).prop('outerHTML')
                }).prop('outerHTML'));

                list.push($('<li>', {
                    class: 'pagination-prev',
                    html: $('<a>', {
                        text: '‹',
                        href: getPageUrl(prev)
                    }).prop('outerHTML')
                }).prop('outerHTML'));
            }

            list.push($('<li>', {
                class: 'pagination-data',
                text: page + ' / ' + last
            }).prop('outerHTML'));
           
            list.push($('<li>', {
                class: 'pagination-input',
                html: $('<input>', {
                    type: 'number',
                    value: page,
                    min: 1,
                    max: last
                }).prop('outerHTML')
            }).prop('outerHTML'));

            list.push($('<li>', {
                class: 'pagination-submit',
                html: $('<a>', {
                    text: 'GO',
                    href: 'javascript:void(0);'
                }).prop('outerHTML')
            }).prop('outerHTML'));

            if (page < last) {
                list.push($('<li>', {
                    class: 'pagination-prev',
                    html: $('<a>', {
                        text: '›',
                        href: getPageUrl(next)
                    }).prop('outerHTML')
                }).prop('outerHTML'));

                list.push($('<li>', {
                    class: 'pagination-last',
                    html: $('<a>', {
                        text: '»',
                        href: getPageUrl(last)
                    }).prop('outerHTML')
                }).prop('outerHTML'));
            }

            self
                .html('')
                .append($('<ul>', {
                    html: list.join('')
                }));

            self.on('click', '.pagination-submit', function () {
                location.href = getPageUrl(self.find('.pagination-input input').val());
            });
        });
    });
})(jQuery);

^-^
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela de comentários

Mensagem por Vinicius Reis 12.11.16 14:49

Ótimo! Arrasou, ficou show de bola!

Só teria como alinhar o "Criar um novo tópico" com a "Tabela de comentários"

Nas lista de tópicos ficou alinhado, mais nos comentário não!

Olha como está nos comentários: http://prnt.sc/d6ciw4
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Tabela de comentários

Mensagem por Kyo Panda 12.11.16 15:53

Adicione mais esta peça:

Código:
.topic-actions  {
    float: left;
}

#main-content > .pagination {
    margin-top: 10px;
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela de comentários

Mensagem por Vinicius Reis 15.11.16 16:34

Legal! Amei *-* ficou 100% igual como eu queria! Muito obrigado.
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela de comentários

Mensagem por Kyo Panda 15.11.16 18:53

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

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

- Tópicos semelhantes

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