Tema Aéreo

Tema
,
327

Como adicionar a coluna “Visualizações” na lista de tópicos.

Não sou desenvolvedor nem programador. Passei algumas horas brincando com o código CSS usando o recurso Inspecionar Elemento no Google Chrome. Consegui fazer a coluna de visualizações ser exibida corretamente e também redimensionei todas as colunas de acordo com minhas preferências. Sinta-se à vontade para ajustar a largura no código CSS abaixo. Também adicionei comentários no código para que você possa identificar facilmente qual código é para qual coluna. Para cada coluna, existem 2 áreas (Cabeçalho e linha). Essas larguras precisam corresponder.

Espero que isso ajude a todos vocês: @daming @bksubhuti @eddy2

Instruções

1. Crie um novo componente.

2. Copie este CSS

Use este CSS atualizado abaixo em vez do código fornecido por @jordan.vidrine acima.

Opção A) Adicione a coluna Visualizações apenas para Desktop (Recomendado)

  • Adicione o código CSS na aba Desktop.

Opção B) Adicione a coluna Visualizações para Desktop e Mobile.

  • Adicione o código CSS na aba Comum.

Opção C) Adicione a coluna Visualizações apenas para Mobile.

  • Adicione o código CSS na aba Mobile.

Observação: Se você escolheu a Opção B ou C…

No mobile, as 3 colunas (Respostas, Visualizações, Atividade) ocupam muito espaço e ficam apertadas. Se precisar disso para mobile, sugiro remover uma das 3 colunas. Você pode fazer isso adicionando Display: none a ambas as áreas (Cabeçalho, Linhas) no código CSS abaixo para a coluna que deseja ocultar.

/* [Tópico] */

    /* Cabeçalho do Tópico */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
        width: 66%;
    }
    
    /* Linha do Tópico */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.default {
        width: 66%;
    }

/* [Respostas] */

    /* Cabeçalho de Respostas */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
        width: 7%;
        order: 2;
    }
    
    /* Linhas de Respostas */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
        width: 7%;
        order: 2;
    }

/* [Visualizações] */

    /* Cabeçalho de Visualizações */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.views {
        display: block;
        width: 7%;
        order: 3;
    }
    
    /* Linhas de Visualizações */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
        width: 7%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* [Atividade] */

    /* Cabeçalho de Atividade */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
        display: block;
        width: 7%;
        order: 4;
    }
    
    /* Linhas de Atividade */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
        width: 7%;
        order: 4;
    }

@jordan.vidrine Se você tiver alguma revisão para o CSS que escrevi, por favor me avise. Eu não sei exatamente o que estou fazendo… mas funciona, lol.

6 curtidas