サイドバーのタイトルの折り返しとスクロール

UX
1

これはあまり好きではありません。ドロップダウンモードのナビゲーションサイドバー：

IMG_3301
IMG_3301633×399 77.7 KB

また、ドロップダウンモードでは、まだデスクトップ画面スペースがあるにもかかわらず、メニューにスクロールバーが表示されてしまうのはなぜですか？これを修正できますか？

menu
menu391×679 42.7 KB

私のユーザーは、展開されたものよりもドロップダウンサイドバーを好みます。なぜなら、それは古いレガシーハンバーガーメニューに似ており、右側にあるからです。

そして、なぜ「すべて」に「新規」と「未読」が含まれているのですか？それらは別々であるべきではないですか？

また、そのFAQリンクをそこから削除する必要がありますが、まだCSSをうまく設定できていません。

「いいね！」 1
2

より洗練された、あるいは正確な解決策があるかもしれませんが、サイドバーは将来的にさらにカスタマイズ可能になると考えていますが、潜在的に信頼性の低いCSSソリューションは次のようになります。

.sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

image
image745×254 25.9 KB

これは、FAQリンクの親（最後の要素-1）の現在の位置を対象としています。FAQリンクとリストの末尾の間に他の要素があると、CSSセレクターは適切な要素を対象としなくなります。

ただし、リストのこの部分が変更されないと確信している場合は、それを使用できます。

「いいね！」 1
3

@Canapinさん、ありがとうございます。CSSはかなり得意で、フォーラムでもかなり使っていますし、問題ありません。それらの項目をどのようにターゲットにするのか、まだよくわかっていませんでしたが、あなたが指摘した理由から、子要素のコードを使わずに済むことを願っていました。古いレガシーメニューの内容もCSSでたくさん変更しましたが、CSSでアクセスしやすかったです。実際、コミュニティの下のセクション全体を操作して、物事を異なる順序で配置したいので、JavaScriptも使用する必要があると思います。管理者がカスタマイズできるようにしたいのです。チップをありがとうございました！:slight_smile:

また、「すべて」が何であるかは、まだあまり明確ではありません。より具体的に名前を変更したいと思っています。:thinking:

5

リンクコンテナには一意のクラスがないため、現在の状態ではそれらをターゲットにするのは難しいです。

こちらが参考になるかもしれません: sidebarMod: Add/Remove Sidebar Links and Sections

カスタマイズ → テキストで js.sidebar.sections.community.links.everything.content を探してみてください :slight_smile:

「いいね！」 1
6

CSSコードは機能しました。メニューのその部分のスタッフビューに影響するのではないかと心配していました。ありがとうございます！:innocent:

残念ながら、テキスト置換が機能しませんでした :expressionless:

編集：ブラウザを何度もリロードしても、テキスト置換が機能するためにテーマを切り替える必要がありました。Chromeのキャッシュは面倒です。:woman_facepalming:

「いいね！」 1
7

マウスオーバーテキストも変更しました。

IMG_3332
IMG_3332873×143 58.2 KB

「いいね！」 1
8

そのため、FAQを非表示にすることはできますが、その後、各メニューセクションの要素を非表示にするという望ましくない効果があることも発見しました :sweat_smile: しかし、もちろんそれはそうです :woman_facepalming: :upside_down_face:

本当にFAQを作成するか、ユーザーに委任する必要があります。

9

ああ、そうです。

#sidebar-section-content-community .sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

これで良くなるはずです。

「いいね！」 1
10

こんにちは。

data-link-name 属性でもこれらをターゲットにできます。

例：

.sidebar-section-link-wrapper {
  .sidebar-section-link {
    &[data-link-name="faq"] {
      display: none;
    }
  }
}
「いいね！」 1
11

はい、最初にそのメソッドを使おうとして、データリンクの構文を間違えていました。「-name」の部分を忘れて、どういうわけかできないと思っていました。古いレガシーメニューでやった方法と似ているので、愚かでした。DOH :woman_facepalming: ありがとうございます。

ちなみに、childメソッドはデスクトップビューでのみ使用可能です。

「いいね！」 1
12

問題は、すべてのリンクが、まったく同じクラスを持つリスト要素内にあることです。
リンクを非表示にすると、リスト要素は残り、「空」であるにもかかわらず場所を取ります。
私が何か見落としているのでなければ？

「いいね！」 2
13

コミュニティセクションの変更がコアで完全に機能するようになると、とても良くなるでしょう。 「コミュニティ」のタイトルは簡単に変更できましたが、要素の順序を変更したいです。たとえば、モバイルビューでは、「マイ投稿」リンクが「管理者」と「レビュー」の上にあり、そのため「レビュー」は「…その他」セクションにあります。私のスタッフはこの状況を好んでおらず、モデレーターコントロールは「マイ投稿」よりも優先されるべきだと私も同意します。UX機能リクエストのトピックを作成すべきですが、チームが将来的にそれをカスタマイズ可能にするために取り組んでいることはわかっています。

「マイ投稿」へのリンクを非表示にしてから、グローバルリンクセクションに移動させることができると思います。どうすればいいかわかりませんが、おそらくそのメニューでやりすぎようとしているのでしょう。

「いいね！」 2
14

なるほど。このような問題には :has 疑似クラスを使うと便利ですが、少し制限があります。

.sidebar-section-link-wrapper {
  &:has(.sidebar-section-link[data-link-name="faq"]) {
    display: none;
  }
}
「いいね！」 2