Publicité de la maison non centrée dans topic-list-between (alignée à gauche)

Bug
,
1

Résumé

Les publicités internes rendues dans l’emplacement topic-list-between ne sont plus centrées sur la largeur de la liste de sujets. Au lieu de cela, elles apparaissent alignées à gauche (confinées à la zone de la première colonne). Cela ressemble à une régression causée par le fait de rendre le composant house-ad sans balise (tagless), ce qui casse la sémantique du tableau.

Étapes pour reproduire

  1. Allez dans Admin → Plugins → Ads
  2. Créez une Publicité interne (House Ad)
  3. Activez-la pour l’emplacement : topic-list-between
  4. Visitez la page d’accueil (ou toute liste de sujets utilisant la disposition de tableau standard)
  5. Observez l’alignement de la publicité interne

Comportement attendu

La publicité interne devrait s’afficher centrée sur toute la largeur de la liste de sujets (s’étendant sur toutes les colonnes), comme c’était le cas auparavant.

Comportement actuel

La publicité interne est alignée à gauche et n’occupe que la partie gauche du tableau (environ l’espace de la colonne « titre du sujet »), au lieu de s’étendre sur la ligne.

Analyse technique

Ceci semble être causé par un balisage de tableau invalide produit par le composant house-ad.

Fichier :
plugins/discourse-adplugin/assets/javascripts/discourse/components/house-ad.gjs

Le composant est sans balise (tagless) :

@tagName("")
export default class HouseAd extends AdComponent {

Mais il rend un div avec un attribut colspan :

<div
  colspan={{this.colspanAttribute}}
  class={{concatClass "house-creative" this.adUnitClass}}
  ...attributes
>

Pourquoi cela casse

  • colspan ne fonctionne que sur <td> / <th>, pas sur <div>.
  • Dans le tableau de la liste de sujets, cela se traduit par un <div> directement à l’intérieur d’un <tr>, ce qui est un HTML invalide et amène le navigateur à le disposer incorrectement (le faisant généralement se réduire à la zone de la première colonne).
  • La logique colspanAttribute() vérifie this.tagName === "td" (ou équivalent), mais comme le composant est sans balise, il ne devient jamais "td", donc colspan n’est effectivement jamais appliqué.

Source probable de la régression

Ceci semble avoir été introduit par l’application des règles de linting / le refactoring des « composants sans balise » (le changement qui a converti les composants en sans balise), ce qui a involontairement cassé les composants qui doivent se rendre comme de véritables cellules de tableau dans certains connecteurs/emplacements.

Environnement

  • Version de Discourse : dernière (tests-passés)
  • Plugin Ad : discourse-adplugin intégré
  • Navigateurs testés : Chrome + Firefox (semble indépendant du navigateur)
1 « J'aime »