Widersprüchliche Deklarationen für zwei Komponenten: Vollbreitenlayout und Header-Suche

Es scheint, dass beide Komponenten das .contents-Div im Header neu anordnen.
Die Struktur mit dem Vollbild-Layout:
image

Struktur mit Header-Suche:
image

Ich kann sie also nicht zusammen verwenden. Aber ich bin mir nicht sicher, wo ich das am besten beheben kann?

3 „Gefällt mir“

Ich bin letzte Woche auf genau dieses Problem mit diesen beiden Komponenten gestoßen… es ist etwas knifflig, weil ich beabsichtigt hatte, dass die Vollbreitenkomponente ein temporäres Experiment sein sollte, aber wir haben nichts auf der Roadmap, um sie standardmäßig zu integrieren, sodass sie länger bleibt, als ich erwartet hatte.

Die Vollbreitenkomponente ist nicht ideal, da sie die Header-Vorlage ändern muss (die einzige Möglichkeit, einige Layoutprobleme zu überwinden).

Auf den ersten Blick… ich glaube nicht, dass die Vorlagenüberschreibung in der Header-Suchkomponente notwendig ist, daher kann ich mir ansehen, wie ich das in einen Widget-Decorator verschiebe, was das Problem vermeiden würde.

4 „Gefällt mir“

Was ich als temporäre Lösung versucht habe, ist, das header-contents-Widget auf der Vollbreitenkomponente nicht zu ändern. Die sidebar-toggle und der Titel sind also nicht unter __toggle-and-logo gruppiert. Und dann ordne ich beide einfach im toggle grid-area an. Bisher habe ich damit keine Layout-Probleme gesehen. Aber ich vermisse wahrscheinlich etwas?

Ich denke, sie ist sehr beliebt. Ich habe drei aktuelle Anpassungsprojekte und alle haben sich für die Vollbreite entschieden. Deshalb habe ich das auch gepostet. Ich würde es vorziehen, keine offiziellen Komponenten zu bearbeiten, um das zu erreichen, was eine gängige Wahl zu sein scheint.

2 „Gefällt mir“

Wenn ich mich recht erinnere, erleichterte der zusätzliche Wrapper die Ausrichtung des Titels am Themainhalt, da ich die kombinierte Breite von .header-contents__toggle-and-logo auf var(--d-sidebar-width) setzen kann, und diese ist unabhängig vom Inhalt genauso breit wie die Seitenleiste.

Ohne den zusätzlichen Wrapper ist das Layout machbar… aber mit zwei Grid-Spalten kann ich mich nicht auf eine einzige Breite für beide verlassen.

Ich muss davon ausgehen, dass der Seitenleisten-Umschalter immer eine statische Breite hat und dann die maximale Logo-Breite darauf basierend berechnen. Das funktioniert, aber ich erinnere mich, dass es anfälliger war… Ich habe mir das schon länger nicht mehr angesehen, aber vielleicht ist es einen weiteren Versuch wert :thinking:

Zurück dazu… Ich kann verstehen, warum es mit einer Überschreibung gemacht wurde. Ohne sie muss man das Titel- oder Header-Icons-Widget dekorieren, sodass man Inhalt innerhalb von .title oder .panel hinzufügt, was die Zentrierung der Suchleiste erschwert… und CSS erfordert, das das Layout anfälliger macht und die Kompatibilität mit anderen Header-Komponenten erschwert. Idealerweise sollte der Inhalt der Suchleiste außerhalb dieser Divs liegen, aber es gibt nichts, woran man sich halten könnte, um das zu tun.

Wir können jetzt einen Plugin-Outlet zu Widgets hinzufügen, das könnte helfen…

Dies würde es ermöglichen, Inhalt vor dem .panel-Div hinzuzufügen, anstatt ihn mit decorateWidget hineinzufügen. In diesem Fall könnte die Template-Überschreibung aus der Header-Suchkomponente entfernt werden und ein neuer Connector kann hinzugefügt werden zu:

javascripts/discourse/connectors/before-header-panel

welcher enthalten könnte

<MountWidget @widget="search-banner" />

Das Hinzufügen eines Plugin-Outlets zu einem Widget, um dann ein Widget zu einem Plugin-Outlet hinzuzufügen, erscheint jedoch etwas umständlich… @david/@cvx wisst ihr, ob das schlecht für die Leistung wäre oder andere Probleme verursachen würde?

1 „Gefällt mir“

Übrigens, hier ist, was ich als Korrektur für die Vollbreitenkomponente versucht habe: https://github.com/discourse/discourse-full-width-component/compare/main...nolosb:discourse-full-width-component:header-contents

Das heißt:

  • Verwenden Sie das Standard-Vorlagenlayout ohne zusätzlichen umgebenden div um Umschalter und Titellogo
  • Ordnen Sie Elemente den Rasterbereichen zu

Ich sehe jedoch, dass das Titellogo wieder zum kleinen Logo wechselt, wenn Themenüberschriften in der Kopfzeile angezeigt werden. Dies geschieht auch hier auf Meta im Vollbreitenlayout. Ich verstehe nicht wirklich, welche Vorlagenargumente ich hier verwenden soll, um immer das vollständige Logo anzuzeigen.

Ich verstehe, Sie haben beide in denselben Grid-Bereich gelegt und einen Rand für das Logo angewendet … das scheint ein vernünftiger Kompromiss zu sein!

Deshalb wird hier home-logo wieder geöffnet:

Wenn die Seitenleiste nicht angezeigt wird, verwendet es die Standard-Logo-Logik, um zwischen groß/klein zu wechseln … wenn die Seitenleiste angezeigt wird, gibt es immer das große Logo zurück.

1 „Gefällt mir“

Es wäre vielleicht etwas langsamer, aber ich mache mir in diesem Fall keine allzu großen Sorgen, da es nur eine Instanz des Plugin-Ausgangs auf der Seite gibt (im Gegensatz zu einem Plugin-Ausgang für Themenlisten-Elemente, der 25 Mal oder öfter gerendert würde).

Das Hinzufügen eines Ausgangs dort klingt für mich großartig :white_check_mark:

1 „Gefällt mir“

ok, ich habe beide Komponenten aktualisiert, um Template-Überschreibungen zu vermeiden —

Jetzt sollten sie zusammenarbeiten :rocket: Danke für die Vorschläge @manuel!

3 „Gefällt mir“