グループリストの順序を変更

この Contribute > UX カテゴリの「概要」テキストには、

小さな「生活の質」の向上についても。

と書かれています。

ということで、始めます :slight_smile:

グループをアルファベット順に並べていただけますか?

https://meta.discourse.org/g

ありがとうございます :kissing_face_with_closed_eyes:

「いいね!」 4

このフォーラムのグループのことですか?

もしそうでないなら、あなたのフォーラムでそれをどのように行うか喜んでお見せします。

「いいね!」 1

コンテキスト:\n\nWhat order are Groups listed in? And can I change it? - #4 by Stephen

「いいね!」 2

フルネームで並べ替えると、インターフェイス言語によって順序が変わります。(すべてのデフォルトグループは、それに基づいてフルネームが変更されます)。英語またはドイツ語でリストを見ている場合でも、同じ順序で並べ替えたいです。インターフェイス言語を確認することなく、「モデレーターグループはグループXとグループYの間にある」とユーザーに言うことができるようにしたいです。

「いいね!」 2

では、フルネームではなく、@Name を大きいフォントで一番上に表示するということでしょうか? :thinking:

「いいね!」 2

はい、ぜひ教えてください :slight_smile:

これを実現するテーマコンポーネントはありますか?

これは、管理ダッシュボードの「サイトについて」ページのグループ一覧の下にあり、一番下までスクロールすると表示されます。

「アバウト」ページで追加グループの順序を設定すると、グループページでの表示方法も変わりますか?

「いいね!」 1

そう思います、試してみます

うーん、違いが見えません。そちらで試してみてください。そうは思わないのですが。

「いいね!」 2

\nまだこれが有効だと思いますか?:thinking:

グループはまだ…

つまり:

非常に紛らわしいグループの順序の小さなサンプルを次に示します。

「いいね!」 1

グループリストを並べ替えて位置を固定するための2つの方法を考えました。モックアップは以下にあります。

Moinが言ったように、異なる言語では、名前に基づいてグループを並べ替えるとグループが移動してしまうためです。

オプション1:

最も簡単な方法は、カテゴリをドラッグして並べ替えることですが、カテゴリが多い場合、これはすぐに面倒な作業になります。

/g グループページに、新しいボタン :gear: グループの並べ替え を追加します。


その後、グリッパーアイコンが表示され、コンテンツに合わせてグループをドラッグできるようになります。ただし、グループが多い場合、これはモバイルフレンドリーではありません。


オプション2

おそらく、既存のUIを使用してグループを並べ替えるのが良いアプローチでしょう。編集バッジグループやカテゴリ固定位置エディタからインスピレーションを得ました。

基本的に、グループの名前を作成し、好きな順序で並べ替えることができ、その後、作成したグループ名にグループを追加して、それらも並べ替えることができます。すみません、分かりにくいですね :sweat_smile:


ここでも、:gear: グループの並べ替え ボタンから開始します。

これにより、このグループエディタが表示されます。バッジエディタで「入門」「コミュニティ」「投稿」グループなどを移動できるのと同じように機能します。

その後、グループエディタ(上記参照)の アイコンを押すことで、例えば「地域」グループを次のように編集/再編成できます。


ご意見は?

「いいね!」 3

お時間をいただき、ご検討いただきありがとうございます :slight_smile:

オプション1が最も論理的だと思います。オプション2はカテゴリをグループ化する必要があるため、少し複雑すぎるように見えます。

オプション1とこの部分について:

カテゴリの並べ替え機能/UIをグループにも適用できるかもしれません。

「いいね!」 3

それは実際に有益でしょう。そのようなものがあるのは理にかなっています。グループ作成時にアルファベット順にするのはどうでしょうか。

「いいね!」 1

この機能でいくつか試行錯誤したところ、Flexboxコンテナ上にある場合はグループの順序を並べ替えることが可能であることが分かりました。

Horizonでは、これがデフォルトの設計仕様となっています。そのため、必要に応じて現在のテーマを確認し、調整を行う価値があります。

.groups-boxes .group-box[data-group-name="group1"] {
order: -3;
}
.groups-boxes .group-box[data-group-name="group2"] {
order: -2;
}
.groups-boxes .group-box[data-group-name="group3"] {
order: -1;
}

互換性は未テストですが、Flex表示は共通の標準であるため、最新のブラウザとの互換性は高いようです。

この方法で見つかった唯一の問題は、グループボックスに私のCSSスタイルが反映されなかったことです。body.group-boxes を試してみましたが、成功しませんでした。

ご提案をお待ちしています :slight_smile:

「いいね!」 2

@satonotdead さん、あなたは天才ですね :person_bowing:t2:

私のグループの NameFull Name は変更していません。

単に、あなたの提案をそのまま採用して、LightテーマとDarkテーマの両方にこれを追加しただけです(Horizonは無効化しています):

/* Re-order all  groups by their Full Name */
.groups-boxes>.group-box{order:999}
.groups-boxes>.group-box[data-group-name="group-3d-printing"]{order:1}
.groups-boxes>.group-box[data-group-name="admins"]{order:2}
.groups-boxes>.group-box[data-group-name="group-android"]{order:3}
.groups-boxes>.group-box[data-group-name="group-evo"]{order:4}
.groups-boxes>.group-box[data-group-name="BIGMEET"]{order:5}
.groups-boxes>.group-box[data-group-name="group-challenges"]{order:6}
.groups-boxes>.group-box[data-group-name="group-challenges-cmt"]{order:7}
.groups-boxes>.group-box[data-group-name="commercial-operators"]{order:8}
.groups-boxes>.group-box[data-group-name="group-air-2"]{order:9}
.groups-boxes>.group-box[data-group-name="group-air-2s"]{order:10}
.groups-boxes>.group-box[data-group-name="group-air-3"]{order:11}
.groups-boxes>.group-box[data-group-name="group-air-3s"]{order:12}
.groups-boxes>.group-box[data-group-name="group-dji-avata"]{order:13}
.groups-boxes>.group-box[data-group-name="group-flip"]{order:14}
.groups-boxes>.group-box[data-group-name="group-fly"]{order:15}
.groups-boxes>.group-box[data-group-name="group-dji-fpv"]{order:16}
.groups-boxes>.group-box[data-group-name="group-go4"]{order:17}
.groups-boxes>.group-box[data-group-name="group-dji-lito"]{order:18}
.groups-boxes>.group-box[data-group-name="group-mavic-2"]{order:19}
.groups-boxes>.group-box[data-group-name="group-mavic-3"]{order:20}
.groups-boxes>.group-box[data-group-name="group-mavic-4"]{order:21}
.groups-boxes>.group-box[data-group-name="group-mini-1"]{order:22}
.groups-boxes>.group-box[data-group-name="group-mavic-pro"]{order:23}
.groups-boxes>.group-box[data-group-name="group-mini-2"]{order:24}
.groups-boxes>.group-box[data-group-name="group-mini-3-pro"]{order:25}
.groups-boxes>.group-box[data-group-name="group-mini-4-pro"]{order:26}
.groups-boxes>.group-box[data-group-name="group-mini-4k"]{order:27}
.groups-boxes>.group-box[data-group-name="group-mini-5-pro"]{order:28}
.groups-boxes>.group-box[data-group-name="group-mini-se"]{order:29}
.groups-boxes>.group-box[data-group-name="group-neo"]{order:30}
.groups-boxes>.group-box[data-group-name="group-dji-sc"]{order:31}
.groups-boxes>.group-box[data-group-name="beta-testers"]{order:32}
.groups-boxes>.group-box[data-group-name="group-fpv"]{order:33}
.groups-boxes>.group-box[data-group-name="group-ios"]{order:34}
.groups-boxes>.group-box[data-group-name="group-litchi"]{order:35}
.groups-boxes>.group-box[data-group-name="moderators"]{order:36}
.groups-boxes>.group-box[data-group-name="group-eastmidlands"]{order:37}
.groups-boxes>.group-box[data-group-name="group-eastofengland"]{order:38}
.groups-boxes>.group-box[data-group-name="group-london"]{order:39}
.groups-boxes>.group-box[data-group-name="group-northeast"]{order:40}
.groups-boxes>.group-box[data-group-name="group-northwest"]{order:41}
.groups-boxes>.group-box[data-group-name="group-northernirel"]{order:42}
.groups-boxes>.group-box[data-group-name="group-scotland"]{order:43}
.groups-boxes>.group-box[data-group-name="group-southeast"]{order:44}
.groups-boxes>.group-box[data-group-name="group-southwest"]{order:45}
.groups-boxes>.group-box[data-group-name="group-wales"]{order:46}
.groups-boxes>.group-box[data-group-name="group-westmidlands"]{order:47}
.groups-boxes>.group-box[data-group-name="group-yorkshumber"]{order:48}
.groups-boxes>.group-box[data-group-name="staff"]{order:49}
.groups-boxes>.group-box[data-group-name="trust_level_0"]{order:50}
.groups-boxes>.group-box[data-group-name="trust_level_1"]{order:51}
.groups-boxes>.group-box[data-group-name="trust_level_2"]{order:52}
.groups-boxes>.group-box[data-group-name="trust_level_3"]{order:53}
.groups-boxes>.group-box[data-group-name="trust_level_4"]{order:54}

これで、以下のような状態から:


以下のような状態になりました:


@satonotdead さん、本当にありがとうございます。これで一日が最高になりました :chefs_kiss:

「いいね!」 2

素晴らしいですね。お役に立てて本当に嬉しいです。信じてください、この解決策を見つけたことで、私にとっても一日が素晴らしいものになりました(!)。私たちのコミュニティでは、グループ/ティアはカスタマイズされており、それらを順序立てて表示できることは私たちにとって本当に重要です。

なお、バッジも並べ替えることができます。グループと連携してバッジを使用している方々の中には、Discourseのデフォルト状態ではそれをうまくやることが難しいと感じていた方もいます。

「いいね!」 1

@Discourse 以前私が提案した内容は、将来のスプリントに向けて引き続き有効です :blush:

「いいね!」 1