사용자 프로필에서 "..." 대신 "그리고 다른 XY개 그룹" 표시

기여 UX
,
1

저희 커뮤니티에서는 모든 사용자의 모든 그룹 목록의 탐색성이 매우 좋지 않다는 점을 발견했습니다. “…” 링크는 놓치기 쉽습니다. 특히 가시성이 제한된 사용자의 경우 더 쉽게 놓칠 수 있습니다.
이 링크에 더 명확한 라벨을 추가하는 것이 가능할까요?

4개의 좋아요
2

더 복잡한 코딩을 하지 않는 한 “XY” 카운트를 가져오기 어려울 수 있지만, 이 사용자 정의 CSS를 추가하면 상황이 개선될 것입니다:

dd.groups:last-child > a::after {
  content: 'and more';
}

group_css

이 CSS를 사이트 전체에서 철저하게 테스트하지는 않았지만, 일부 확인 결과 프로필 페이지의 그룹 링크에만 적용되는 것 같습니다. 잘못된 위치에 표시된다면 알려 주십시오.

(또한, ...의 발견 가능성이 좋지 않다는 데에도 동의하며, 코어에서 이러한 방향으로의 변경이 환영됩니다.)

1개의 좋아요
3

실제로, 마침표를 제거하지 않고서는 꽤 어색해 보이지만, "그리고 기타"라고만 작성해도 개선이 될 것입니다.

이것들은 로컬라이제이션 메시지의 일부가 아니라 여기에서 하드코딩된 것으로 보입니다:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/user/collapsed-info.gjs#L91

1개의 좋아요
4

이렇게 하면 어떨까요?

  • 먼저 마지막 이름이 지정된 링크 뒤에 쉼표를 추가합니다.
  • 다음으로 ...를 숨깁니다.
  • 그 다음 and more 텍스트를 삽입합니다 – 기술적으로 ...를 위한 공간은 여전히 존재하므로, 이를 약간 뒤로 당깁니다.
  • (또한 다른 위치에서 발생할 수 있는 잠재적인 충돌을 피하기 위해 더 구체적인 선택자를 추가했습니다)
.user-main .about .secondary dd.groups span:last-of-type::after {
  content: ",";
}

.user-main .about .secondary dd.groups:last-child > a {
  visibility: hidden;
}


.user-main .about .secondary dd.groups:last-child > a::after {
  visibility: visible;
  margin-left: -.8rem;
  content: "and more";
}

image

...를 플로우에서 완전히 제거하는 더 세련된 방법이 있을 수 있지만, 마이너스 마진 방식이 괜찮게 작동하는 것 같습니다.

1개의 좋아요