Actualizando nuestro HTML de Lista de Temas: preparando temas, componentes y plugins

Anuncios
1

La estructura de nuestra lista de temas ha permanecido prácticamente sin cambios desde que comenzó el proyecto Discourse. Para aprovechar las últimas tecnologías web, planeamos realizar algunos cambios que mejorarán el potencial de tematización de las Listas de Temas.

Para que la transición sea lo más fluida posible, realizaremos estos cambios paso a paso y esperamos que la migración se complete en algún momento del primer trimestre de 2022.

:white_check_mark: Paso 1: Actualización de selectores CSS

Recientemente hemos añadido las clases .topic-list-header, .topic-list-body y .topic-list-data para iniciar la transición.

  • thead ahora tiene la clase topic-list-header
  • tbody ahora tiene la clase… ¡lo adivinaste! topic-list-body
  • Los elementos td ahora también tienen las clases topic-list-data asociadas.

Para la gran mayoría de los sitios, este cambio será totalmente transparente. Sin embargo, los temas/plugins complejos que anulan nuestras plantillas principales necesitarán algunas actualizaciones.

Actualización de anulaciones de plantillas existentes

Si es posible, recomendamos que elimine las anulaciones de plantillas y utilice una combinación de CSS y puntos de conexión de plugins para la personalización. Si eliminar las anulaciones no es una opción, deberá actualizar manualmente sus anulaciones para incluir las nuevas clases.

Las plantillas a las que se les han añadido clases son:

:black_square_button: Paso 2: Cambio de tipos de elementos

El siguiente paso en este proceso será convertir los elementos table existentes en elementos más adecuados.

Preparación de hojas de estilo personalizadas dirigidas a elementos table

Por ahora, debe eliminar cualquier referencia a table, thead, tbody, tr, td de sus hojas de estilo personalizadas y reemplazarlas con las nuevas clases. Luego, cuando finalmente cambiemos los tipos de elementos, su tematización personalizada debería seguir funcionando sin problemas.

¡Estamos emocionados de ver lo que nuestra comunidad de desarrolladores de temas y plugins podrá construir después de estos cambios! :partying_face:

38 Me gusta
6

¿Puedes compartir un poco más sobre lo que está sucediendo aquí?

4 Me gusta
7

La versión tl;dr es que ya no usaremos el elemento table de HTML para las listas de temas, ya que se comportan de maneras extrañas que no son ideales si quieres hacer cambios significativos con CSS.

16 Me gusta
8

Esto es enorme. Estoy muy emocionado de alejarme de las tablas. Permitirá una tematización mucho más flexible y simple en las listas de temas. :heart_eyes:

9 Me gusta
9

Este es un excelente cambio, porque Ember no permite (hasta donde sé) el intercambio dinámico de etiquetas, por ejemplo, de <table> o <tr> a <div> usando enlaces, a diferencia de las clases, ¡lo cual afortunadamente sí hace!

Eso significa que si una <table> está en la raíz de la plantilla de un componente, estás un poco atascado con ella a menos que la reemplaces por completo, lo que de otra manera sería un exceso innecesario.

En resumen, ¡APRUEBO! :heart_eyes:

11 Me gusta
10

¡Gracias por introducir estos cambios! Solo estoy comprobando antes de ajustar las declaraciones…

El marcado es:

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

y las clases respectivas son/serán:

.topic-list
  .topic-list-header
    (¿se eliminará tr aquí?)
     .topic-list-data
  .topic-list-body
    .topic-list-item
      .topic-list-data
5 Me gusta
11

Sí, todo esto parece correcto :+1:

7 Me gusta
13

¿Hay alguna novedad al respecto? Me encantaría poder estilizar mejor las listas de temas.

4 Me gusta
14

Lamentablemente, esto se ha dejado en segundo plano durante bastante tiempo para dar cabida a otros asuntos urgentes en Discourse. ¡Sin embargo, es algo que planeo retomar en las próximas semanas!

6 Me gusta