Wie erreicht man ein Side-by-Side-Layout für Themenbeiträge wie diesen?

Unterstützung
1

Ich würde gerne ein nebeneinanderliegendes Layout für meine Discourse-Instanz erreichen (siehe angehängtes Bild). Könnte mir jemand bitte Anleitungen geben, wie das geht? Ich bin für jede Hilfe dankbar!

Dieses Bild enthält einen Screenshot eines YouTube-Kommentars eines Benutzers namens „Everyone“, der die Verwendung von Kollisionen im Charakterdesign und in der Animation diskutiert, die Implementierung einer Kapselform für die Kollisionsberechnung anstelle einer langen Antenne vorschlägt und die Bequemlichkeit der Verwendung einer einfachen Box zur Vermeidung von Komplikationen erwähnt. (Beschriftet von KI)
Dieses Bild enthält einen Screenshot eines YouTube-Kommentars eines Benutzers namens „Everyone“, der die Verwendung von Kollisionen im Charakterdesign und in der Animation diskutiert, die Implementierung einer Kapselform für die Kollisionsberechnung anstelle einer langen Antenne vorschlägt und die Bequemlichkeit der Verwendung einer einfachen Box zur Vermeidung von Komplikationen erwähnt. (Beschriftet von KI)2768×836 249 KB

2 „Gefällt mir“
3

CSS Flexbox, vielleicht? Einfach aus dem Kopf. Dann vielleicht die API/Requests verwenden, um einige andere Daten wie die Beitragszahl abzurufen.

4

Was Sie im Wesentlichen wollen, ist, die horizontalen Balken durch vertikale Balken zu ersetzen?
Sie könnten dies mit einer Thema-Komponente machen, und es lässt sich nicht nur mit CSS umsetzen.
Es erfordert Sorgfalt, um nichts zu zerbrechen, und es könnte nicht trivial sein :nachdenklich:

1 „Gefällt mir“
5

Ich habe einige grundlegende Flexbox-Experimentiert, aber es hat nur das Layout kaputt gemacht.

6

Hallo @Canapin! Grundsätzlich möchte ich, dass die Details des Post-Autors links sind und der Beitrag rechts, anstatt dass sie übereinander liegen wie im Standard-Discourse-Layout.
Wäre hilfreich, wenn es dafür Mods gibt.

1 „Gefällt mir“
7

Ich stimme zu, dass man diese Elemente nicht auf saubere Weise mit CSS neu positionieren kann. Der Avatar und die Standard-Metadaten sind auf der Vorlage separat angeordnet:

image
image574×122 11.9 KB

Ich frage mich, wie das auf den Epic-Foren tatsächlich gemacht wird. Ist das ein Vorlagen-Override? Ich sehe an dieser Stelle keinen Plugin-Outlet:

image
image574×105 8.12 KB

1 „Gefällt mir“
8

Soweit ich sehe, haben sie die Daten (Benutzername usw.) nach dem Inhalt des post-avatar-Widgets erneut hinzugefügt, etwas Breite zu .topic-avatar hinzugefügt und alles andere mit CSS ausgeblendet, außer dem Datum. Ich werde versuchen, es zu reproduzieren.

1 „Gefällt mir“
9

Sie können diese grundlegende Theme-Komponente ausprobieren: GitHub - Arkshine/discourse-topic-avatar-vertical-layout.

Lassen Sie mich wissen, wenn Sie Probleme feststellen.

  1. Es verschiebt das poster-name-Widget unter das post-avatar-Widget. Keine anderen Änderungen außer CSS-Anpassungen. ↩︎

9 „Gefällt mir“
10

Das hat wie am Schnürchen geklappt! Vielen Dank, Kumpel.

2 „Gefällt mir“
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.