英語フォーラムの新しいサイドバーを左側から右側に切り替えます

皆さん、こんにちは。

フォーラムで検索し、数日前に新しいチャットで質問しました。フォーラムに投稿するようにアドバイスされました。誰かが助けてくれることを願っています。

新しいサイドバーを右側に移動するプラグインはありますか?

または、左右を切り替える組み込みの方法はありますか?

「いいね!」 5

これを行うための組み込みの方法も、私が知っている既存のプラグインもありません。したがって、それを行うカスタマイズは可能かもしれませんが、それはおそらく新しい領域を開拓することになり、予期しない問題に遭遇する可能性があります。

「いいね!」 5

デスクトップ表示の場合:

    body #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
        grid-template-columns: minmax(0, 1fr) 0;
    }
    
    body.sidebar-animate #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
    }
    body.has-sidebar-page #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
        grid-template-columns: minmax(0, 1fr) var(--d-sidebar-width);
        padding: 0 0 0 10px;
    }
「いいね!」 8

ありがとうございます。ここに貼り付ければいいですか?

安全のため、Desktop->CSSに入れてください

「いいね!」 6

ありがとうございます。部分的に機能しました。サンドイッチメニューはまだ左上にあり、ロゴを押し出しています。

ナビバーのサンドイッチメニューは、元の位置に右側のアイコンと一緒に残しておきたいと思います。

また、サイドバーをオンにすると、ページ幅が狭くなります。(サイドバーが有効な場合、カスタムページ幅は無視されます)

素晴らしい仕事です @Lhc_fl :clap:

これにはサイト設定があります。「ナビゲーションメニュー」を探して、「ヘッダードロップダウン」に設定してください :slight_smile:

「いいね!」 4

いいえ、質問全体が抜けています。ヘッダードロップダウンを有効にすると、サイドバーが削除されます。:slightly_smiling_face:

スレッドでは、サイドバーを左から右に「切り替える」こと、そしてこれまで通り(あるいは、あるべきだと主張できる)右側にサンドイッチアイコンを配置することについて尋ねています。

サイドバーとアイコンの両方を右側に配置する方法がないため、すでに「ヘッダードロップダウン」を有効にしています。

左側のロゴは「フォーラムホーム」に移動します(素晴らしい)。しかし、ロゴの位置がサイドバーのトグルアイコンに置き換えられ、誤ってサイドバーをトグルしてしまう可能性があります。すべてのメニューアイコンは右側に配置されるべきだと思います。

サイドバーのトグルは常にトグルする必要はないため、ロゴの左側に移動するのはホットスポットが多すぎます。

サイドバーも同様で、ページコンテンツは左側、サイドバーは右側を好みます。

これは個人的な好みだと思います。他のフォーラムオーナーはすべて左側で問題ないのでしょう。

「いいね!」 4

ああ、わかりました。右側のハンバーガーメニューは実際のサイドバーではなく、ドロップダウンメニューをトリガーするだけであることを思い出しました。サイドバーではなくドロップダウンメニューが欲しいのですね。

Discourse のコードを見てみましたが、残念ながら私にはまだ魔法使いの暗号のような数式に見えます :mage: :scroll:
どうやら、2 つのコンポーネントは非常に異なる方法でレンダリングされているようです。

サイドバーのトグルウィジェットを含むヘッダーコンテンツ: discourse/app/assets/javascripts/discourse/app/widgets/header-contents.js at fde9e6bc25227b69195181d45ee4360c25c279da · discourse/discourse · GitHub

サイドバーウィジェット: discourse/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js at 5b6604f5a7e1c8ff29fe556236dbf86872908b03 · discourse/discourse · GitHub

現在の右側ハンバーガーコード: discourse/app/assets/javascripts/discourse/app/widgets/header.js at c43cb0c5716a3671a682c87295f5a7dad61eb65d · discourse/discourse · GitHub

これが、この目的のためのテーマコンポーネントを作成するのに役立つかもしれません。

「いいね!」 3

ありがとうございます。ちなみに、ハンバーガーではなくグリルドチーズサンドイッチです。:nerd_face:

「いいね!」 2

メニューを右側に移動したい理由を理解したいのですが。これはすべてのサイトにとってより良いフィードバックだとお考えですか、それとも左側が適さないというご自身のサイトの特別な事情があるのでしょうか?例えば、他にメニューがありますか?そうでなければ、ナビゲーションメニューを隠したり表示したりするための左側の配置は、業界標準になりつつあると思います。

どちらの言葉がお腹を空かせますか!:rofl: ハンバーガーの方が認識しやすいと思いますが。個人的には、ハンバーグラーと呼ぶのが好きです!:man_detective:

「いいね!」 2

では、この行を追加してください。

span.header-sidebar-toggle {
    order: 1;
}

「いいね!」 2

参考までに、展開後に右側に配置するようにリクエストしたユーザーがいました。ハンバーガーメニューの位置に慣れていたのかもしれません。

「いいね!」 4

ハードワークとアップデートに感謝します。:coffee:

ちなみに、これは可能になりましたか?

「いいね!」 1

こんにちは @haydenjames :slight_smile:
すでにこちらで機能リクエストとして質問されています。
複数のトピックに何度も投稿する必要はありませんので、Discourse 3.0 is Here! からの投稿を移動しました :slight_smile:

また、@Lhc_fl が素晴らしい回避策を提供してくれました。:+1:

ほぼほぼうまくいきました。右から2番目のアイコンのままで、一番右のアイコンにならないようにする必要があっただけです。しかし、@Lhc_flさんがCSSだけでは達成できないことを確認しました

コンテンツを左側に、サイドバー(あまり使われない)を右側に配置したいです。元のハンバーガーアイコンの位置は移動させたくありません。

編集:左右どちらにも配置できる自由度があれば、右側のアイコンを左右に分割せずに済むため、より多くのフォーラムオーナーがサイドバーを有効にするようになると思います。

現在、サイドバーを有効にすると、メニューアイコンが左端と右端に分かれ、フォーラムのロゴが移動するため、ハンバーガーアイコンがフォーラムホームのクリックのすぐ隣に来てしまいます。

これを維持したいです。
image

そして、これを実現したいです。

将来的に可能であれば…よろしくお願いします。:handshake:

「いいね!」 4

このテーマコンポーネントを修正することで、ハンバーガーメニューの位置を変更できる可能性があります。

「いいね!」 1

すみません、よく理解できませんでした。そのプラグインのスクリーンショットは、アイコンを画面の左端と右端に分ける新しいDiscourseのアプローチと全く同じように見えます。

しかし、メニューのトグルハンバーガーアイコンを、フォーラムホームに戻るロゴのすぐ近くに置きたくありません。サイドバーをトグルして、サイドバーのトグルアイコンがホットスポットの左ロゴの位置に来ることなく、フォーラムを通常通り使用したいのです。

現在、開発者が実装しているようにメニューをオフにしても、ページ幅がすでに狭い幅に戻るだけで、何の価値や利点もありません。これは、ほとんどのユーザーがサイドバーをオン/オフし続けることはない(当然のことながら)ことを意味します。

たとえそうしたとしても、ハンバーガーアイコンが戻るホームロゴのホットスポットの左側にあるのは(私の意見では)良い場所ではなく、以前のDiscourseのデザイン、つまりすべてのアイコンがトップメニューバーの右側にあるというデザインに反しています。それを維持したいです。
image
…そして、コンテンツを左側に、サイドバーを右側に配置します。(上記のスクリーンショットの通り)

ご返信ありがとうございます!そのプラグインについてさらに読み進め、同じ変更について話しているかどうかをよりよく理解したいと思います。

「いいね!」 1

私が意味したのは、@Lhc_fl コンポーネントでパネルを右に移動することと組み合わせたことです。私がリンクしたコンポーネントのコードを調べれば、検索とプロフィールの間にハンバーガーメニューを戻すことができるかもしれません。あなたのリクエストと、Lhc_fl による現在の回避策の問題を私が理解していれば、の話ですが。

すでにメニューを移動するためのコードを使用しているため、コード内に、あなたが探している望ましい効果を達成するための例となる詳細があるかもしれません。

モバイルでは、あなたのスクリーンショットはデスクトップモードで探している望ましい位置にあります。

経験のある人なら、モバイルで使用されているコードを抽出してデスクトップにも適用できるかもしれません。デスクトップでサイトをモバイルビューで読み込みながらインスペクト要素を調べることによって、またはその両方によって。

幅については、サイトの幅を変更するための新しいコンポーネントがあり、それを調べることに興味があるかもしれません。

「いいね!」 1

はい、私もそうなることを期待しています。モバイルとデスクトップのメニューアイコンの違いについて、おっしゃる通りです。

「いいね!」 1