Moderniser notre liste de sujets HTML - préparation des thèmes, composants et plugins

Annonces
1

La structure de notre liste de sujets est restée largement inchangée depuis le début du projet Discourse. Pour tirer parti des dernières technologies web, nous prévoyons des changements qui amélioreront le potentiel de thématisation des listes de sujets.

Pour rendre la transition aussi fluide que possible, nous apporterons ces changements étape par étape, et espérons que la migration sera achevée au cours du premier trimestre 2022.

:white_check_mark: Étape 1 : Mise à jour des sélecteurs CSS

Nous avons récemment ajouté les classes .topic-list-header, .topic-list-body et .topic-list-data pour commencer la transition.

  • thead a maintenant la classe topic-list-header
  • tbody a maintenant la classe… vous l’avez deviné ! topic-list-body
  • Les éléments td ont maintenant également des classes topic-list-data qui leur sont associées.

Pour la grande majorité des sites, ce changement sera totalement transparent. Cependant, les thèmes/plugins complexes qui remplacent nos modèles principaux nécessiteront quelques mises à jour.

Mise à jour des remplacements de modèles existants

Si possible, nous vous recommandons de supprimer les remplacements de modèles et d’utiliser une combinaison de CSS et de points de sortie de plugin pour la personnalisation. Si la suppression des remplacements n’est pas une option, vous devrez alors mettre à jour manuellement vos remplacements pour inclure les nouvelles classes.

Les modèles auxquels des classes ont été ajoutées sont :

:black_square_button: Étape 2 : Changement des types d’éléments

La prochaine étape de ce processus consistera à convertir les éléments table existants en éléments plus appropriés.

Préparation des feuilles de style personnalisées ciblant les éléments table

Pour l’instant, vous devriez supprimer toute référence à table, thead, tbody, tr, td de vos feuilles de style personnalisées, et les remplacer par les nouvelles classes. Ensuite, lorsque nous changerons finalement les types d’éléments, votre thématisation personnalisée devrait continuer à fonctionner sans problème.

Nous sommes impatients de voir ce que notre communauté de développeurs de thèmes et de plugins pourra construire suite à ces changements ! :partying_face:

38 « J'aime »
6

Pouvez-vous nous en dire un peu plus sur ce qui se passe ici ?

4 « J'aime »
7

En bref, nous n’allons plus utiliser l’élément table HTML pour les listes de sujets, car ils se comportent de manière étrange et peu idéale si vous souhaitez apporter des modifications importantes avec CSS.

16 « J'aime »
8

C’est énorme - je suis tellement ravi de m’éloigner des tableaux. Cela permettra un thème beaucoup plus flexible et simple sur les listes de sujets. :heart_eyes:

9 « J'aime »
9

C’est un excellent changement, car Ember ne permet pas (à ma connaissance) de remplacer dynamiquement des balises, par exemple de <table> ou <tr> à <div> en utilisant des liaisons, contrairement aux classes, ce qu’il fait heureusement !

Cela signifie que si un <table> se trouve à la racine du modèle d’un composant, vous êtes un peu coincé avec lui, à moins de le remplacer entièrement, ce qui serait autrement un peu excessif et inutile.

En bref, J’APPROUVE ! :heart_eyes:

11 « J'aime »
10

Merci d’avoir introduit ces changements ! Je vérifie juste avant d’ajuster les déclarations…

Le balisage est :

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

et les classes respectives sont/seront :

.topic-list
  .topic-list-header
    (tr sera abandonné ici ?)
     .topic-list-data
  .topic-list-body
    .topic-list-item
      .topic-list-data
5 « J'aime »
11

Oui, tout cela semble correct :+1:

7 « J'aime »
13

Y a-t-il une mise à jour à ce sujet ? J’aimerais pouvoir mieux styliser les listes de sujets.

4 « J'aime »
14

Malheureusement, cela a été mis de côté pendant un certain temps pour faire place à d’autres éléments urgents chez Discourse. C’est quelque chose que j’ai l’intention de reprendre dans les semaines à venir cependant !

6 « J'aime »