Modernisierung unserer Topic List HTML - Vorbereitung von Themes, Komponenten und Plugins

Ankündigungen
1

Unsere Themenlisten-Markup ist seit Beginn des Discourse-Projekts weitgehend unverändert geblieben. Um die neuesten Webtechnologien nutzen zu können, planen wir einige Änderungen, die das Theming-Potenzial von Topic Lists verbessern werden.

Um den Übergang so reibungslos wie möglich zu gestalten, werden wir diese Änderungen schrittweise vornehmen und hoffen, dass die Migration irgendwann im ersten Quartal 2022 abgeschlossen sein wird.

:white_check_mark: Schritt 1: Aktualisieren von CSS-Selektoren

Wir haben kürzlich die Klassen .topic-list-header, .topic-list-body und .topic-list-data hinzugefügt, um den Übergang einzuleiten.

  • thead hat jetzt die Klasse topic-list-header
  • tbody hat jetzt die Klasse… Sie haben es erraten! topic-list-body
  • td-Elemente haben jetzt auch die Klassen topic-list-data

Für die überwiegende Mehrheit der Websites wird diese Änderung nahtlos verlaufen. Komplexe Themes/Plugins, die unsere Kernvorlagen überschreiben, müssen jedoch einige Updates erhalten.

Aktualisieren bestehender Vorlagenüberschreibungen

Wenn möglich, empfehlen wir, Vorlagenüberschreibungen zu entfernen und eine Kombination aus CSS und Plugin-Outlets für die Anpassung zu verwenden. Wenn das Entfernen der Überschreibungen keine Option ist, müssen Sie Ihre Überschreibungen manuell aktualisieren, um die neuen Klassen einzuschließen.

Die Vorlagen, denen Klassen hinzugefügt wurden, sind:

:black_square_button: Schritt 2: Ändern von Elementtypen

Der nächste Schritt in diesem Prozess wird die Konvertierung der vorhandenen table-Elemente in geeignetere Elemente sein.

Vorbereiten benutzerdefinierter Stylesheets, die auf table-Elemente abzielen

Entfernen Sie vorerst alle Verweise auf table, thead, tbody, tr, td aus Ihren benutzerdefinierten Stylesheets und ersetzen Sie sie durch die neuen Klassen. Wenn wir dann schließlich die Elementtypen ändern, sollte Ihr benutzerdefiniertes Theming ohne Probleme weiter funktionieren.

Wir sind gespannt, was unsere Community von Theme- und Plugin-Entwicklern nach diesen Änderungen bauen wird! :partying_face:

38 „Gefällt mir“
6

Können Sie ein wenig mehr darüber erzählen, was hier passiert?

4 „Gefällt mir“
7

Die Kurzfassung ist, dass wir das HTML-table-Element nicht mehr für Themenlisten verwenden werden, da es sich auf seltsame Weise verhält, was nicht gut ist, wenn man wesentliche Änderungen mit CSS vornehmen möchte.

16 „Gefällt mir“
8

Das ist riesig – ich freue mich so darauf, weg von Tabellen zu kommen. Es wird ein viel flexibleres und einfacheres Theming für Themenlisten ermöglichen. :heart_eyes:

9 „Gefällt mir“
9

Das ist eine ausgezeichnete Änderung, da Ember (soweit ich weiß) kein dynamisches Austauschen von Tags erlaubt, z. B. <table> oder <tr> zu <div> mittels Bindings, im Gegensatz zu Klassen, was es glücklicherweise tut!

Das bedeutet, wenn sich eine <table> im Stammverzeichnis einer Komponentenvorlage befindet, ist man damit irgendwie gefangen, es sei denn, man überschreibt das Ganze, was ansonsten ein unnötiger Overkill wäre.

Kurz gesagt, ich STIMME ZU! :heart_eyes:

11 „Gefällt mir“
10

Vielen Dank für die Einführung dieser Änderungen! Ich überprüfe nur noch einmal, bevor ich die Deklarationen anpasse.

Das Markup ist:

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

und die entsprechenden Klassen sind/werden sein:

.topic-list
  .topic-list-header
    (tr wird hier fallen gelassen?)
     .topic-list-data
  .topic-list-body
    .topic-list-item
      .topic-list-data
5 „Gefällt mir“
11

Ja, das sieht alles richtig aus :+1:

7 „Gefällt mir“
13

[quote=„Jordan Vidrine, Beitrag:1, Thema:209654, Benutzername:jordan.vidrine”]Der nächste Schritt in diesem Prozess wird die Umwandlung der vorhandenen table-Elemente in besser geeignete Elemente sein.[/quote]

Gibt es ein Update dazu? Ich würde die Themenlisten gerne besser gestalten können.

4 „Gefällt mir“
14

Leider wurde dies eine ganze Weile auf Eis gelegt, um Platz für andere dringende Angelegenheiten bei Discourse zu schaffen. Es ist jedoch etwas, das ich in den kommenden Wochen wieder aufgreifen werde!

6 „Gefällt mir“