Header Submenus

固定モード(常にメニューを表示する、スクロールダウンしても表示される)をオンにすると、バグが発生しているようです。

これは Discourse 2.9.0.beta8 で確認されており、公式の Discourse テーマプレビューサイトでも簡単に再現できました。最初に気づいたのは約2週間前だと思いますが、正確にいつから発生しているかは定かではありません。

再現手順:

  • テーマコンポーネントの設定で固定モードをオンにする。
  • 返信が多いスレッドをクリックする。
  • (初めてスレッドを読む場合、一番上にいる場合は、数件の返信までスクロールダウンし、スレッドリストに戻り、再度スレッドをクリックして、以前見ていた投稿に戻る。)

ページ上部に必要なパディングの量が誤って計算され、投稿の先頭や投稿者の名前がヘッダーの下に隠れてしまい、切り取られてしまいます。

読んでいる投稿者の名前を見るために、毎回少し上にスクロールする必要があります。

スレッドに入ると、このように表示されます。

本来は、このように表示されるはずです。

本当に奇妙なのは、常に発生するわけではなく、Ctrl-F5 を押すと多くの場合修正されることです。しかし、しばらくするとまた発生します。

CSS を編集して main-outlet に追加されるパディング量を増やすと、ある程度は修正されますが、そうするとトピックリストの上部に多くの空白が表示されてしまいます。トピックリストとスレッドでは異なるパディングが必要なようです。あるいは、どちらかがパディングを二重に適用しているか、どこかから余分なパディングが追加されているのかもしれません。

(編集:場合によっては、ページが十分に上にスクロールできず、問題を確認できないことがあります。例えば、スレッドの最後の投稿に移動し、それが短い投稿の場合、手動でできるだけ下にスクロールしても、ヘッダーが投稿者の名前と重なる方法がありません。これは、状況によってはうまくいっているように見える理由を説明している可能性があります。バグを最も確実に再現するには、ブラウザウィンドウの高さをあまり高くしない状態でテストしてください。)

「いいね!」 3

ログイン画面にこれが表示されないようにする方法はありますか? 次のCSSで実現できますが、それでもヘッダーサブメニューが一瞬表示されてから非表示になります。

.static-login .top-menu {
	display: none;
}
.static-login .d-header-wrap {
	display: none;
}

static-loginページでこれが表示されないようにする、より良い方法はありますか?

「いいね!」 1

このテーマやその他のテーマはクローラービューでは機能しません。クローラービューは、Discourse の JavaScript のほとんどを読み込みません。

「いいね!」 3

クリスさん、このコンポーネントはチャットとサイドバーでの使用のために更新が必要かもしれません。fixed_mode設定をオンにすると、チャットとサイドバーが下に移動せず、d-headerの後ろに配置されます。

以下のCSSはうまく修正されるようですが、Category Banners とはうまく連携しません。なぜなら、カテゴリページで #main-outlet が追加で40px下に押し出されるように見えるからです。よろしくお願いします!

.sidebar-wrapper, .main-chat-outlet, .chat-drawer {
    margin-top: 40px !important;
}
「いいね!」 2

ご指摘ありがとうございます。修正を追加しました。

「いいね!」 1

素晴らしい、クリスさん、ありがとうございます! #main-outlet が 40px 下がっている理由をご存知ですか?

#main-outlet {
   padding-top: calc(1.8em + 40px);
}

「いいね!」 2

ah、見落としていました。これは削除でき、このPRがマージされ次第削除されます: UX: remove old main-outlet adjustment by awesomerobot · Pull Request #19 · discourse/discourse-header-submenus · GitHub

更新: マージされましたので、コンポーネントを更新すれば余分なスペースはなくなります。

「いいね!」 2

アイコンの名前はどこで見つけられますか?

「いいね!」 3

ここにリストされているものはすべて利用可能だと思います: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

ただし、一部のアイコンには追加の手順が必要です… デフォルトで Discourse で使用しないアイコンの名前は、Svg icons テーマ設定に追加する必要があります。

具体的に言うと、デフォルトで Discourse で使用するすべてのアイコンはここにリストされています: discourse/lib/svg_sprite.rb at da0d20d4a99aab40bd08bf133a425be413521d5a · discourse/discourse · GitHub

そして、テーマ ( svg icons 設定経由) で使用できるすべてのアイコンは、このディレクトリにあります: discourse/vendor/assets/svg-icons at main · discourse/discourse · GitHub

GitHub で SVG ファイルを表示しても、大きな白いボックスが表示されるため、あまり役に立ちません。

しかし、raw ボタンをクリックしてページソースを表示すると、アイコン名は symbolid です。

「いいね!」 3

最高です、本当にありがとうございます

「いいね!」 2

クリスさん、ありがとうございます。これで解決しました。ただし、他に2つの問題に気づきました。.topic-navigation を40px下に移動させる必要があり、.topic-post.sticky-avatar .topic-avatar は下にスクロールすると計算が正しくなくなり、d-headerの後ろに隠れてしまいます。また、コンポーザーとチャットウィンドウを高く展開しすぎると、コントロールがd-headerの後ろに隠れてしまう可能性があります。これで全てだと思います!

編集:もう一つ、アンカーリンクにアクセスすると、見出しがヘッダーの下に隠れてしまいます。

「いいね!」 2

2件の投稿が新しいトピックに分割されました:コンポーネントがチャットを押し下げ、チャット入力を部分的に隠します

既存トピックに2件の投稿がマージされました: コンポーネントがチャットを押し下げ、チャット入力を部分的に隠します

これを解決した人はいますか?画面上のリソースを再利用し、追加のスペースを使用しないというアプローチは気に入っています。

ロゴにカーソルを合わせると、ブログ、ドキュメント、またはウィキに移動できるのは本当にクールです!

「いいね!」 2

参考までに、Krisさんが言及した「svgアイコンのテーマ設定」は、現在「管理」>「設定」>「その他」> の下の方にある svg アイコンサブセット(これで合っていると思います??)で見つけることができます。

「いいね!」 1

新しいGlimmerライトボックスに小さなz-indexの問題があります。ライトボックスが1000なので、1001ではライトボックスの上に表示されてしまいます。

「いいね!」 2

クラシックなz-indexの問題です。Discourseが次にアップデートされる際に修正されます。

「いいね!」 4

この素敵なプラグインをありがとうございます。

ログインしていないときにヘッダーのサブメニューを表示しない方法はありますか?

または、(開発のアイデアとして?)より良いのは、メニュー項目をグループ(信頼レベルなど)にリンクさせることでしょうか?
頼みやすいのはわかっています…

ありがとうございます。
C.

「いいね!」 3

ヘッダーサブメニューを使うのが好きですが、トップヘッダーがたくさんあり、その結果モバイルでは見栄えが悪くなります。ヘッダーが画面外に伸びてスクロールしなければならない状態にならないようにしたいのですが、可能でしょうか?

「いいね!」 2

モバイルでは、最も重要なリンクをすべて「ナビゲーション」ヘッダーのサブメニューにコンパイルすることで、問題を解決しました。

「いいね!」 2