2つのコンポーネントに関する競合する宣言：フル幅レイアウトとヘッダー検索

開発
1

ヘッダー内の .contents div は、両方のコンポーネントで再配置されているようです。

フル幅レイアウトの構造:
image

ヘッダー検索の構造:
image

そのため、一緒に使用することはできません。しかし、どこを修正するのが最善か分かりません。

「いいね！」 3
2

先週、これと全く同じ問題にこの2つのコンポーネントで遭遇しました…フルウィズコンポーネントは一時的な実験として意図していたので少し厄介ですが、デフォルトで統合する予定がないため、予想よりも長く残ることになります。

フルウィズコンポーネントは、ヘッダーテンプレートを変更する必要があるため（レイアウトの問題を克服できた唯一の方法）、理想的ではありません。

一見したところ…ヘッダー検索コンポーネントのテンプレートオーバーライドは必要ないと思いますが、ウィジェットデコレーターに移動することを検討できるため、問題は回避されます。

「いいね！」 4
3

一時的な修正として、フルウィズコンポーネントのヘッダーコンテンツウィジェットを変更しないようにしました。これにより、サイドバーのトグルとタイトルは__toggle-and-logoの下にグループ化されなくなります。そして、両方をトグルグリッドエリアに配置します。これまでのところレイアウトの問題は見られませんでしたが、何か見落としているかもしれません。

非常に人気があると思います。現在3つのカスタマイズプロジェクトがありますが、すべてフルウィズを選択しました。そのため、この投稿をしました。一般的な選択と思われるものを実現するために、公式コンポーネントを微調整したくありません。

「いいね！」 2
4

もし私の記憶が正しければ、余分なラッパーは、タイトルをトピックコンテンツに揃えやすくします。なぜなら、結合された .header-contents__toggle-and-logo の幅を var(--d-sidebar-width) に設定でき、これはコンテンツに関係なくサイドバーと同じ幅になるからです。

Screenshot 2023-06-26 at 4.52.20 PM
Screenshot 2023-06-26 at 4.52.20 PM527×264 30.1 KB

余分なラッパーがない場合、レイアウトは機能しますが、2つのグリッド列では単一の幅に依存できません。

Screenshot 2023-06-26 at 4.54.13 PM
Screenshot 2023-06-26 at 4.54.13 PM437×110 7.75 KB

サイドバーのトグルは常に固定幅であると仮定し、それに基づいて最大ロゴ幅を計算する必要があります。それは機能しますが、より壊れやすいものだったと記憶しています…しばらくこれを見ていませんが、もう一度試す価値があるかもしれません :thinking:

これに戻ると…オーバーライドでなぜそうされたのかがわかります。それなしでは、タイトルまたはヘッダーアイコンウィジェットを装飾する必要があるため、.title または .panel 内にコンテンツを追加することになり、検索バーのセンタリングがより困難になります…そして、レイアウトをより壊れやすくし、他のヘッダーコンポーネントとの互換性を低下させるCSSが必要になります。理想的には、検索バーのコンテンツはこれらのdivの外にあるべきですが、それをフックするものがありません。

ウィジェットにプラグインアウトレットを追加できるようになったため、それは役立つかもしれません…

これにより、.panel div の内側ではなく、その前方にコンテンツを追加できるようになります（decorateWidget を使用する場合）。この場合、ヘッダー検索コンポーネントからテンプレートオーバーライドを削除し、新しいコネクタを追加できます。

javascripts/discourse/connectors/before-header-panel

これには以下が含まれる可能性があります

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

ウィジェットにプラグインアウトレットを追加して、プラグインアウトレットにウィジェットを追加できるようにするのは少し複雑なように思えます… @david/@cvx パフォーマンスに悪影響があるか、その他の問題が発生するかどうかご存知ですか？

「いいね！」 1
5

ちなみに、フル幅コンポーネントで試した修正は以下のとおりです。https://github.com/discourse/discourse-full-width-component/compare/main...nolosb:discourse-full-width-component:header-contents

つまり：

  • トグルとタイトルロゴの周りの追加のラッパーdivなしで、デフォルトのテンプレートレイアウトを使用する
  • アイテムをグリッドエリアに合わせる

しかし、トピックタイトルがヘッダーに表示されると、タイトルロゴが小さなロゴに戻ることに気づきました。これは、ここメタのフル幅レイアウトでも発生します。常にフルロゴを表示するために、どのテンプレート引数を使用すればよいのか、よくわかりません。

6

なるほど、両方を同じグリッドエリアに入れ、ロゴにマージンを適用するのですね。それは妥当な妥協案のようです！

そのため、home-logo はここで再オープンされています。

サイドバーが表示されていない場合は、デフォルトのロゴロジックを使用して大/小を切り替えます。サイドバーが表示されている場合は、常に大きなロゴを返します。

「いいね！」 1
7

少し遅くなるかもしれませんが、この場合はページにプラグインのアウトレットが1つしかないため、それほど心配していません（例えば、25回以上レンダリングされるトピックリストアイテムのプラグインアウトレットとは対照的です）。

そこに追加するアウトレットは素晴らしいと思います :white_check_mark:

「いいね！」 1
8

了解しました。テンプレートのオーバーライドを回避するために両方のコンポーネントを更新しました。

これで連携して動作するはずです :rocket: ご提案ありがとうございました @manuel！

「いいね！」 3