Modernizando nossa lista de tópicos HTML - preparando temas, componentes e plugins

Anúncios
1

Nossa lista de tópicos de marcação permaneceu em grande parte inalterada desde o início do projeto Discourse. Para aproveitar as mais recentes tecnologias da web, estamos planejando algumas mudanças que melhorarão o potencial de temas das Listas de Tópicos.

Para tornar a transição o mais suave possível, faremos essas mudanças passo a passo e esperamos que a migração seja concluída em algum momento no primeiro trimestre de 2022.

:white_check_mark: Passo 1: Atualizando seletores CSS

Nós adicionamos recentemente as classes .topic-list-header, .topic-list-body e .topic-list-data para iniciar a transição.

  • thead agora tem uma classe topic-list-header
  • tbody agora tem uma classe… você adivinhou! topic-list-body
  • Elementos td agora também têm classes topic-list-data anexadas a eles.

Para a grande maioria dos sites, essa mudança será totalmente transparente. No entanto, temas/plugins complexos que substituem nossos templates principais precisarão de algumas atualizações.

Atualizando substituições de template existentes

Se possível, recomendamos que você remova as substituições de template e use uma combinação de CSS e saídas de plugin para personalização. Se remover as substituições não for uma opção, você precisará atualizar manualmente suas substituições para incluir as novas classes.

Os templates que tiveram classes adicionadas são:

:black_square_button: Passo 2: Mudando tipos de elementos

O próximo passo neste processo será converter os elementos table existentes em elementos mais adequados.

Preparando folhas de estilo personalizadas que visam elementos table

Por enquanto, você deve remover quaisquer referências a table, thead, tbody, tr, td de suas folhas de estilo personalizadas e substituí-las pelas novas classes. Então, quando eventualmente mudarmos os tipos de elementos, sua personalização de tema continuará funcionando sem problemas.

Estamos animados para ver o que nossa comunidade de desenvolvedores de temas e plugins será capaz de construir após essas mudanças! :partying_face:

38 curtidas
6

Você pode compartilhar um pouco mais sobre o que está acontecendo aqui?

4 curtidas
7

O tl;dr é que não usaremos mais o elemento table HTML para listas de tópicos, pois eles se comportam de maneiras estranhas que não são ideais se você quiser fazer alterações significativas com CSS.

16 curtidas
8

Isso é enorme - estou muito animado para abandonar as tabelas. Isso permitirá uma personalização muito mais flexível e simples em listas de tópicos. :heart_eyes:

9 curtidas
9

Esta é uma excelente mudança, porque o Ember não permite (pelo que sei) a troca dinâmica de tags, por exemplo, de <table> ou <tr> para <div> usando bindings, ao contrário das classes, o que ele felizmente faz!

Isso significa que, se uma <table> estiver na raiz do template de um componente, você fica meio preso com ela, a menos que substitua tudo, o que, de outra forma, seria um exagero desnecessário.

Resumindo, EU APROVO! :heart_eyes:

11 curtidas
10

Obrigado por introduzir essas alterações! Apenas verificando novamente antes de ajustar as declarações.

A marcação é:

<table>
  <thead>
    <tr>
      <th>
  <tbody>
    <tr>
      <td>

e as classes respectivas são/serão:

.topic-list
  .topic-list-header
    (tr será descartado aqui?)
     .topic-list-data
  .topic-list-body
    .topic-list-item
      .topic-list-data
5 curtidas
11

Sim, tudo isso parece correto :+1:

7 curtidas
13

Há alguma atualização sobre isso? Eu adoraria poder estilizar melhor as listas de tópicos.

4 curtidas
14

Infelizmente, isso ficou em segundo plano por bastante tempo para dar espaço a outros itens urgentes na Discourse. No entanto, é algo que pretendo retomar nas próximas semanas!

6 curtidas