Discourse をラップした際、オーバーレイの位置がずれる

開発
1

こんにちは :waving_hand:

Discourse 全体をラップして、左右のサイドバーを異なる色にするように設定すると、ユーザーカードなどのオーバーレイの位置がずれる問題が発生します。

17
171113×780 58.9 KB

ユーザーカードは、クリックされたユーザーのすぐ隣に開くはずですが、実際にはサイドバーの幅分だけ水平方向にずれて表示されてしまいます。そこで、このオーバーレイの位置決めはどのように実装されているのか、またサイドバーを維持しつつこのような位置ずれを回避する方法について教えていただけないでしょうか。

よろしくお願いいたします :clinking_beer_mugs:

2

はい、クライアント向けの大規模プラグイン開発中に、余分な大型バナーを追加した際、私もこの問題に遭遇しました。私の場合、オフセットが全くおかしな値になっていて（画面外に出ていました！）

より簡単な解決策があるかもしれませんが、実際には少し複雑で、関数をオーバーライドする必要があります。例えば、ユーザーカードの場合：

          api.modifyClass('component:user-card-contents',  {
            _positionCard(target) {

これはミックスインから来ており、以下の場所にあります：discourse/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 at b3eb67976dd0c0129736fe0b86167d7e512b51f4 · discourse/discourse · GitHub

私は jQuery を使って、バナーの表示状態に応じて修正を適用するかどうかを判断しました。一部のページでは大きな「バナー」がありましたが、他のページにはありませんでした。同様の戦略を採用することもできます。

正直なところ、あなたの例はそれほど悪くないように見えます。そのままにしておくことを検討してもよいかもしれません。

3

問題は、基本的にすべてのオーバーレイの位置がずれていることです。存在する可能性のあるすべてのオーバーレイの位置決定メソッドをすべて上書きしたくはありません。

例の画像では、ブラウザウィンドウがフルサイズでなかったため、一見問題ないように見えます。しかし、実際にはサイドバーなどがより大きくなるため、位置のズレがより顕著になります。一部のオーバーレイは画面外にほぼ出てしまっています。

4

ああ、確かに面倒ですよね。カスタマイズをトピック一覧に限定し、トピック表示は可能な限り変更しないようにして、バリエーションを減らすことで生活をシンプルに保つのが良いでしょう。

5

特定のビューをカスタマイズしていません。フォラム全体をコンテナに入れて、サイドを異なる色にしたいのです。

6

どのように実現しようとしていますか？#main div の周りに新しいコンテナを追加しているのでしょうか？

もしそうであれば、#main-outlet に背景色を設定し、サイド部分の背景色を body に設定する方が簡単かもしれません。

7

はい、後で私もそう思いました！なので：

body {
   background-color: red;
}

#main-outlet {
    background-color: white;
}

太いバナーの問題は残っていますが、それほど大きな問題ではありません。