Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
7kgmlcdkv
 
iScroll
 
Matt Shultz
 
Harleen
 
Ketholy123
 
T1ag0
 
zHugh
 
PlayWillian
 
ranzatti
 

Quem está conectado
273 usuários online :: 3 usuários cadastrados, Nenhum Invisível e 270 Visitantes :: 2 Motores de busca

7kgmlcdkv, soldado, uvmyyvpew

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Tabela de comentários

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

Resolvido Tabela de comentários

Mensagem por Vinicius Reis em 03/11/16, 11:38 pm

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: http://i.imgur.com/HXmly0P.png
Imagem do spoiler 1: http://i.imgur.com/thFWp4Q.png
Imagem do spoiler 2: http://i.imgur.com/ve4TNXx.png


Última edição por Vinicius Reis em 04/11/16, 11:50 am, editado 1 vez(es)
avatar

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 264

Ver perfil do usuário http://atelier262.forumeiros.com/
  • 0

Resolvido Re: Tabela de comentários

Mensagem por Kyo Panda em 04/11/16, 12:20 am

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?

^-^



Bem-vindo ao Fórum dos Fóruns!
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.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Tabela de comentários

Mensagem por Vinicius Reis em 04/11/16, 11:50 am

Postando em ordem as imagens:

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

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 264

Ver perfil do usuário http://atelier262.forumeiros.com/

Resolvido Re: Tabela de comentários

Mensagem por Kyo Panda em 04/11/16, 01:46 pm

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

^-^
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Tabela de comentários

Mensagem por Vinicius Reis em 07/11/16, 04:02 pm

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

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 264

Ver perfil do usuário http://atelier262.forumeiros.com/

Resolvido Re: Tabela de comentários

Mensagem por Kyo Panda em 07/11/16, 04:15 pm

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

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Tabela de comentários

Mensagem por Vinicius Reis em 08/11/16, 01:43 am

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

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 264

Ver perfil do usuário http://atelier262.forumeiros.com/

Resolvido Re: Tabela de comentários

Mensagem por Kyo Panda em 08/11/16, 03:22 pm

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 */


^-^
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Tabela de comentários

Mensagem por Vinicius Reis em 10/11/16, 05:34 pm

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

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 264

Ver perfil do usuário http://atelier262.forumeiros.com/

Resolvido Re: Tabela de comentários

Mensagem por Kyo Panda em 10/11/16, 11:36 pm

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

^-^
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Tabela de comentários

Mensagem por Vinicius Reis em 12/11/16, 12:49 pm

Ó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
avatar

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 264

Ver perfil do usuário http://atelier262.forumeiros.com/
  • 0

Resolvido Re: Tabela de comentários

Mensagem por Kyo Panda em 12/11/16, 01:53 pm

Adicione mais esta peça:

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

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


Bem-vindo ao Fórum dos Fóruns!
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.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Tabela de comentários

Mensagem por Vinicius Reis em 15/11/16, 02:34 pm

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

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 264

Ver perfil do usuário http://atelier262.forumeiros.com/

Resolvido Re: Tabela de comentários

Mensagem por Kyo Panda em 15/11/16, 04:53 pm

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


Bem-vindo ao Fórum dos Fóruns!
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.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

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

- Tópicos similares

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