Tabela de comentários

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

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?

^-^

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

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

^-^

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.

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. ^-^

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

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 Módulos HTML & JavaScript Gestão dos códigos JavaScripts 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 Geral Mensagens & e-mails Configuração.
  
  
• Após vá em Painel de controle Visualização Imagens e Cores Cores 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 */

^-^

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 ^_^

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

^-^

Ó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

Adicione mais esta peça:

Código:

.topic-actions  {
    float: left;
}

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

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