Hauswerbung nicht zentriert in topic-list-between (linksbündig)

Fehler
,
1

Zusammenfassung

Hausanzeigen, die in der Platzierung topic-list-between gerendert werden, sind nicht mehr über die gesamte Breite der Themenliste zentriert. Stattdessen erscheinen sie linksbündig (auf den Bereich der ersten Spalte beschränkt). Dies scheint eine Regression zu sein, die dadurch verursacht wurde, dass die Komponente house-ad taglos gemacht wurde, was die Tabellen-Semantik verletzt.

Schritte zur Reproduktion

  1. Gehen Sie zu Admin → Plugins → Ads
  2. Erstellen Sie eine Hausanzeige
  3. Aktivieren Sie sie für die Platzierung: topic-list-between
  4. Besuchen Sie die Homepage (oder eine beliebige Themenliste, die das Standard-Tabellenlayout verwendet)
  5. Beobachten Sie die Ausrichtung der Hausanzeige

Erwartetes Verhalten

Die Hausanzeige sollte zentriert über die gesamte Breite der Themenliste (alle Spalten umfassend) gerendert werden, wie es zuvor der Fall war.

Tatsächliches Verhalten

Die Hausanzeige ist linksbündig und belegt nur den linken Teil der Tabelle (etwa den Bereich der „Thementitel“-Spalte), anstatt sich über die gesamte Zeile zu erstrecken.

Technische Analyse

Dies scheint durch eine ungültige Tabellen-Markup verursacht zu werden, die von der Komponente house-ad erzeugt wird.

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

Die Komponente ist taglos:

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

Aber sie rendert ein div mit einem colspan-Attribut:

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

Warum dies fehlschlägt

  • colspan funktioniert nur bei <td> / <th>, nicht bei <div>.
  • In der Themenlisten-Tabelle wird dies zu einem <div> direkt innerhalb eines <tr>, was ungültiges HTML ist und dazu führt, dass der Browser es falsch darstellt (typischerweise wird es in den Bereich der ersten Spalte komprimiert).
  • Die colspanAttribute()-Logik prüft this.tagName === "td" (oder Äquivalent), aber da die Komponente taglos ist, wird sie nie "td", sodass colspan effektiv nie angewendet wird.

Wahrscheinliche Ursache der Regression

Dies scheint durch die Lint-Erzwingung/Refaktorierung für „taglose Komponenten“ eingeführt worden zu sein (die Änderung, die Komponenten in taglos umgewandelt hat), welche unbeabsichtigt Komponenten unterbrochen hat, die in bestimmten Connectors/Platzierungen als echte Tabellenzellen gerendert werden müssen.

Umgebung

  • Discourse-Version: neueste (tests-passed)
  • Ad-Plugin: eingebautes discourse-adplugin
  • Getestete Browser: Chrome + Firefox (scheint browserunabhängig zu sein)
1 „Gefällt mir“