그룹 목록 순서 변경

The “about” text for this Contribute > UX category says:

Also for small “quality of life” improvements.

So here goes :slight_smile:

Can we please order the groups alphabetically?

https://meta.discourse.org/g

Thanks :kissing_face_with_closed_eyes:

4개의 좋아요

are you referring to the groups in this forum?

If not I’ll be happy to show you how to do it for your own forum

1개의 좋아요

For context:

Can we order them by Full Name please?

They’re presented to us with the Full Name at the top in a big font so it makes no logical sense to order them by the smaller secondary sub-text :man_shrugging:

2개의 좋아요

Ordering by full name means the order differs depending on your interface language. (All default groups change their full name based on that). I prefer to have the same order no matter if I am currently looking at the list in English or German. I like to be able to say “the moderator group is between group-X and group-Y” to a user, knowing that it will be the same for them without checking their interface language.

2개의 좋아요

Then the @Name, not the Full Name, should be displayed at the top in the larger font? :thinking:

2개의 좋아요

Yes, please do share :slight_smile:

Is there a theme component that does this?

This is under the group listing on the about your site page on the admin dashboard scroll to the bottom and it will be their

Does the setting for ordering the additional groups on the about page also change how they are shown on the groups page?

1개의 좋아요

I think so let me try

Hmm I’m not seeing a difference in it try on your end I think not though

2개의 좋아요

I think this still stands? :thinking:

Groups are still being…

Meaning:

Here’s a small sample of the very confusing group ordering:

1개의 좋아요

I’ve thought up two ways to reorder the group list so their position remains fixed, mockups are below.

Because like Moin said different languages would move groups around if they were ordered by First Name.

Option 1:

The easiest option is drag categories around however if there are lots of categories this would easily become a cumbersome task.

On the /g groups page add a new button :gear: Reorder Groups


Then grip icons appear and you’d be able to drag groups around at your content. However, this is not that mobile friendly if there are lots of groups.


Option 2

Perhaps the way to approach this is by using existing UI to reorder groups. I took inspiration from the edit badge group and the category fixed positions editor.

Essentially, you’d create a group name for your groups, and be able to order them in any way you want and then you’d add groups into the group name you made and order them around too. Sorry that is confusing :sweat_smile:


Again you’d start off with :gear: Reorder Groups button

That would bring up this group editor. So just like the badge editor where you can move around the Getting started, community & posting groups etc

You can then edit / reorganise the Region group for example like so by pressing the icon in the Group Editor (pictured above)


Thoughts?

3개의 좋아요

I appreciate the time and thought you’ve given this :slight_smile:

Option 1 seems the most logical I think, where Option 2 seems a little over complex with the need for having to group the categories.

Re option 1 and this part:

Perhaps the Reorder Categories functionality / UI could be applied to groups too:

3개의 좋아요

That actually Would be of benifit it makes sense to have something like that Mabye upon group creation we just make it in alphebetical orders

1개의 좋아요

CSS의 display: flex 또는 display: grid를 사용하면 컨테이너 안의 요소를 배치할 수 있음을 발견했습니다.

Horizon에서는 이것이 기본 설계 원칙이므로, 필요할 경우 활성 테마를 확인하여 그에 맞게 조정하는 것이 좋습니다:

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

어색한 대안은 그룹의 내부 이름을 1_group, 2_group, 3_group으로 변경하는 것이었지만, 눈이 피로해져서 :smiling_face_with_tear: TC를 탐색하고 시행착오를 거치며 이 해결책을 찾았습니다.

도움이 되기를 바랍니다.

2개의 좋아요

@satonotdead 님, 정말 천재시네요 :person_bowing:t2:

저는 어떤 그룹의 Name이나 Full Name도 변경하지 않았습니다.

단순히 제안을 받아들여 이 내용을 라이트 테마와 다크 테마 양쪽에 추가했습니다 (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개의 좋아요

좋아요, 도움이 되었다니 정말 기쁩니다. 믿어주세요, 이 해결책을 찾은 것도 저에게는 큰 기쁨이었답니다! (진짜예요!) 저희 커뮤니티에서는 그룹/티어가 커스텀으로 설정되어 있어서, 이를 순서대로 표시할 수 있다는 점이 우리에게 정말 중요합니다.

참고로 배지도 순서를 바꿀 수 있습니다. 그룹과 연동하여 배지를 사용하다가 디스코스의 기본 상태에서는 이를 처리하는 것이 어려웠던 분들을 위해 알려드립니다.

1개의 좋아요

@Discourse 이전의 제안은 여전히 향후 스프린트를 위해 유효합니다 :blush:

1개의 좋아요