グループメンバーページで投稿済みと確認済みの列を非表示にするCSS、その2

開発
1

2021年3月のフォーラムスレッドのフォローアップです。

デスクトップ表示でグループ詳細メンバーリストから「投稿済み」と「最終確認済み」の列を非表示にするCSSは、グループが参加リクエスト制に設定されている場合に「承認」と「拒否」ボタンを非表示にするようになりました。

修正または置き換える必要があるCSSは次のとおりです。

/* グループ詳細メンバーリストから「投稿済み」と「最終確認済み」の列を削除 */
.group-members {
  th {
    &:nth-child(5),
    &:nth-child(6) {
      display: none;
    }
  }
  td {
    &:nth-child(4),
    &:nth-child(5) {
      display: none;
    }
  }
}

nth-child CSSコードの使用と、「承認」および「拒否」ボタンが消えることとのトレードオフを示すビデオは次のとおりです。

https://www.loom.com/share/d066ea1a765a4ce4b3b13a952f98fb1b

https://[yourdiscourseforumurl].com/g/[YourGroupName] で、「投稿済み」と「最終確認済み」の列のみを非表示にし、他のものは何も非表示にしない、より的を絞ったCSSを提供してくださる親切な方に、事前に感謝いたします。

「いいね！」 2
2

こんにちは。

これは少し難しい問題ですね。なぜなら、特定のクラスをターゲットにするものが何も見当たらないからです。しかし、CSSで解決できる方法が見つかったので、テンプレートを変更せずに実現できると思います。:slightly_smiling_face:

問題は、tdにターゲットにしやすい特定のクラスがないことですが、その中身をターゲットにすることはできます。

このCSSは、tdの中身をチェックし、それがspanであれば非表示にします（日付はspanに入っています）。しかし、リクエストページではボタンがbuttonなので、このCSSはボタンのtdを非表示にしません。

/* グループ詳細メンバーリストから「投稿済み」と「閲覧済み」の列を削除 */
table.group-members {
  th {
    &:nth-child(4),
    &:nth-child(5) {
      display: none;
    }
  }
  td {
    &:nth-child(4),
    &:nth-child(5) {
      > span {
        display: none;
      }
    }
  }
}

別の方法です :arrow_down_small:

しかし、テーブルヘッダー行のbulk-selectとテーブルボディ行のgroup-ownerクラスをターゲットにすることもできます。このCSSは、bulk-selectとgroup-ownerクラスが表示される場合にのみアクティブになります。これらはリクエストページには表示されないため、アクティブになりません。

/* グループ詳細メンバーリストから「投稿済み」と「閲覧済み」の列を削除 */
table.group-members {
  th.bulk-select {
    + th + th + th,
    + th + th + th + th {
      display: none;
    }
  }
  td.group-owner {
    + td + td,
    + td + td + td {
      display: none;
    }
  }
}

お役に立てば幸いです :slightly_smiling_face:

「いいね！」 3
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.