Discourse-Beitragsliste: Autor und Poster

:information_source: Zusammenfassung Fügt einen Themenautor in die linke Spalte der Themenlisten-Seiten hinzu sowie eine Option, um im Standard-Poster-Spalten nur den letzten Poster anzuzeigen. Der Avatar des Autors kann zudem in Größe und Form angepasst werden.
:eyeglasses: Vorschau https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
:hammer_and_wrench: Repository https://github.com/Lillinator/discourse-topic-list-author-posters
:question: Installationsanleitung So installieren Sie ein Theme oder eine Theme-Komponente
:open_book: Neu bei Discourse Themes? Einsteigerleitfaden zur Verwendung von Discourse Themes

Dieses Theme-Komponente installieren

:woman_technologist:t2: Überblick

Diese Discourse-Theme-Komponente fügt den Avatar des Themenautors in die erste Spalte aller Themenlisten-Routen ein und verfügt über Einstellungen, mit denen der Administrator Form und Größe des Avatars festlegen kann. Zudem wird der Avatar des Autors nicht als erster Avatar in der Liste der Poster angezeigt.

Es gibt außerdem eine Einstellung, um die Spalte der Poster-Avatare so einzustellen, dass nur der letzte (jüngste) Poster angezeigt wird, jedoch nur, wenn mehr als ein Teilnehmer am Thema beteiligt ist. Der Avatar des Autors wird daher nur angezeigt, wenn weitere Poster im Thema vorhanden sind.

Zusätzlich können Administratoren wählen, den Themenautor auf der Kategorien-Seite anzuzeigen, wenn die Ansicht der neuesten Themenlisten aktiviert ist (z. B.: „Kategorien mit neuesten Themen“). Auch hier stehen Optionen für Avatar-Größe und -Form zur Verfügung.

Zudem gibt es einen Schalter zur vertikalen Ausrichtung des Zeileninhalts nach oben oder in die Mitte.

In kleinen Viewports (mobile Größe) erscheint der Autor dort, wo normalerweise der Avatar des letzten Posters zu sehen ist.

Diese Komponente funktioniert gut mit Topic List Excerpts und Discourse AI summary gists.

:gear: Einstellungen

Screenshot der Einstellungen mit Standardoptionen auf der Admin-Seite der Komponente

Einstellungen Beschreibung
Größe des Autoren-Avatars in der Themenliste Größe der Avatare in der Spalte für Autoren-Avatare auf den Seiten der Themenlisten-Routen – klein, mittel oder groß.
Abgerundete Ecken des Autoren-Avatars in der Themenliste Abrundung der Avatare auf den Seiten der Themenlisten-Routen: 0% = quadratisch → 50% = rund. tab_style = abgerundete linke Ecken
Nur letzten Poster in der Themenliste anzeigen Zeigt im Poster-Spalte nur den Avatar des letzten Posters an, jedoch nur, wenn mehr als ein Teilnehmer am Thema beteiligt ist.
Zeileninhalt vertikal nach oben ausrichten Schalter zur vertikalen Ausrichtung der Zeilen nach oben oder in die Mitte
Autor auf der Kategorien-Seite anzeigen Zeigt den Avatar des Autors anstelle des letzten Posters in den Themenlisten auf der Kategorien-Seite an.
Größe des Avatars auf der Kategorien-Seite Größe der Avatare in der Spalte für Autoren-Avatare in den Themenlisten auf der Kategorien-Seite – klein, mittel oder groß.
Abgerundete Ecken des Avatars auf der Kategorien-Seite Abrundung der Avatare auf der Kategorien-Seite: 0% = quadratisch → 50% = rund. tab_style = abgerundete linke Ecken

:camera_flash: Screenshots

Hier sind einige Screenshots mit verschiedenen Einstellungen für Avatar-Größe und -Form, zudem mit erweiterten AI-Summary-Gists.

Screenshots verschiedener Seiten der Themenliste mit aktivierten Komponenten-Einstellungen, sowohl im kompakten als auch im erweiterten Gist-Modus sowie mit ein- bzw. ausgeklappter Seitenleiste

Mit Standardeinstellungen:

Große Avatar-Form mit tab_style und erweiterten Summary-Gists:

Kleine Avatare mit 15% Border-Radius und aktivierter Option Topic_list_show_last_poster_only:

Mittelgroße Avatare mit 0% Border-Radius (quadratisch), aktivierter Option Topic_list_show_last_poster_only und erweiterten Summary-Gists:

Screenshots der Kategorien-Seite mit zwei verschiedenen Größen und Formen von Avataren, entweder Autor oder letzter Poster

Standard-Komponenten-Einstellungen mit mittelgroßen runden Avataren und aktivierter Option Show_author_on_categories_page:

Große Avatare mit tab_style und deaktivierter Option Show_author_on_categories_page:

Screenshot der mobilen Ansicht

Mit tab_style Autoren-Avataren:


:backhand_index_pointing_right:t3: Hinweise

  • Fügt den Avatar des Autors ein und ändert die Poster-Spalte dort, wo es auf den Profilseiten-Tabs erwartet wird.
  • Das Verhalten auf mobilen Geräten entspricht dem Standard in den Footer-Listen der Themen (vorgeschlagene/verwandte Themen) sowie auf den Profil- und Posteingangs-Tabs.
  • Nicht wirklich kompatibel mit dem Horizon-Theme. :slight_smile:

:bulb: Mögliche zukünftige To-Dos

  • Schalter zum Deaktivieren auf mobilen Geräten hinzufügen?
  • Ausnahmen für Kategorien und Tags?
  • Unterstützung für Links-nach-Rechts?
  • Poster-Avatare formen?

:hugs: Wie immer vielen Dank an @Moin für die Idee, das Feedback und die Hilfe beim Debuggen.

13 „Gefällt mir“

Vielen Dank für die Erstellung, es hat sofort ein potenzielles Problem für mich gelöst!

Vielleicht ist dies bereits geplant, ich wollte nur erwähnen, dass mir aufgefallen ist, dass der Abstand und die Ausrichtung der Poster-Avatar-Spalte auf der linken Seite eine seltsame Einrückung aufweisen (die auf Mobilgeräten nicht vorhanden ist, wenn die Komponente deaktiviert ist, zum Vergleich). Dies sieht so aus, als ob das text-align-Attribut von td.posters auch das Bild beeinflusst.
Die Ausrichtung der Poster-Avatar-Liste ändert sich ebenfalls, wenn sie aktiviert ist, und dies sieht so aus, als ob die Ausrichtung von td.topic-list-data die Standardeinstellung überschreibt. Es ist einfach genug, Änderungen am Stylesheet auf meiner Seite vorzunehmen, wenn Sie mit diesen ansonsten zufrieden sind.

Fantastische Komponente, nochmals vielen Dank.

1 „Gefällt mir“

Danke für den Bericht, ich habe gerade einen Fix gepusht. Aktualisieren Sie die Komponente und lassen Sie mich wissen, ob das hilft.

1 „Gefällt mir“

Die Avatar-Linksbündelung ist auf dem Desktop besser. Ich habe dieses CSS hinzugefügt, um die Spalte des mittleren Posters meinen Präferenzen anzupassen:

td.posters.topic-list-data {
    vertical-align: middle !important;
}

Ich denke, Ihre zukünftige Deaktivierung für Mobilgeräte wird auch helfen, da das Styling etwas mehr Leerraum verwendet als nötig.

[quote=“jordanjay29, post:4, topic:394364”]Die Avatar-Linksbündelung ist auf dem Desktop besser. Ich habe diesen CSS-Code hinzugefügt, um die Spalte des mittleren Posters nach meinen Wünschen anzupassen:

[/quote]
Die vertikale Ausrichtung oben ist beabsichtigt, um konsistent mit dem Rest der Themenkarte zu sein, und wird nicht geändert.
Ich habe keine Änderungen für Mobilgeräte vorgenommen, aber ich werde es mir ansehen.

Die vertikale Ausrichtung wurde möglicherweise zu breit in Ihrem CSS angewendet und muss wahrscheinlich nur auf die custom-author-column abzielen, wo Sie td.topic-list-data verwenden. Ich vermute, dass die Änderung des Ziels auf td.custom-author-column.topic-list-data das Problem beheben und die Notwendigkeit benutzerdefinierter Formatierung auf meiner Seite beseitigen wird.

Nein, ich beabsichtigte, dass die Spalte „Poster“ zusammen mit allen anderen Zeilenelementen oben vertikal ausgerichtet wird. Sie wirkt mittig ausgerichtet deplatziert (besonders wenn man Auszüge oder KI-Gists aktiviert), aber ich nehme an, es ist Geschmackssache, also können Sie es nach Belieben anpassen.

Ich habe eine kleine Änderung für Mobilgeräte eingespielt.

3 „Gefällt mir“

Da mein Forum keine Auszüge, Gists oder KI-Zusammenfassungen verwendet, wird das Standard-Discourse-Aussehen bevorzugt. Diese Änderung scheint mir eher in eine dedizierte Theme-Komponente zu gehören, aber wir sind uns uneinig, und ich habe es auf meiner Seite behoben, also keine böse Überraschung.

Mobil sieht etwas besser aus, danke!

@jordanjay29 nach weiterem Nachdenken habe ich mich entschieden, einen Ausrichtungsumschalter hinzuzufügen (ganz einfach).

Hier, bitte schön :slight_smile:

Es gibt eine neue Einstellung Vertikale Ausrichtung der Zeile oben, die Sie deaktivieren können, um die Standardeinstellung in der Mitte zu erhalten. Lassen Sie mich wissen, ob das für Sie funktioniert.


4 „Gefällt mir“