밀도 토글 컴포넌트

이 테마 컴포넌트 설치

이 테마 컴포넌트는 사용자가 디스코ourse 포럼의 보기 밀도를 설정할 수 있게 해줍니다. 기본, 여유, 컴팩트 모드를 포함합니다.

17개의 좋아요

역시 대단한 작업이네요, 조던!

iPadOS 18.1.1에서 사이드바의 버튼을 클릭할 때 메뉴가 표시되지 않는 것을 확인했습니다. 버튼은 포커스 상태가 되어 있지만, 아무것도 팝업되지 않습니다. 데스크톱 모드로 전환하면 정상적으로 작동합니다.

수정: 사실 모바일 뷰로 있을 때만 그런 것 같습니다.

z-index 문제인 것 같습니다:


또 다른 사소한 UX 문제: 설정 화면을 처음 방문할 때 현재 밀도(density) 값이 기본적으로 선택되지 않습니다. (참고로, 라벨이 로컬라이즈되지 않은 것 같습니다.)
수정: 브라우저 저장소에 아직 저장되지 않은 값과 더 관련이 있는 것 같습니다.

코드에서 폰트를 변경할 준비가 되어 있는 것을 볼 수 있지만, 이를 위한 인터페이스는 보이지 않습니다. 나중에 구현될 예정인가요?

6개의 좋아요

compact 모드 사용 시 몇 가지 코멘트:

아바타의 플레어(flair)는 일반 크기를 유지하고 있어 이상해 보이며, 게시물 내용과 겹칩니다.

토픽 끝부분의 Suggested와 Related 버튼이 아래쪽 토픽 목록과 겹칩니다.

사용자 설정에는 글꼴 크기 옵션이 있습니다.
컴팩트 뷰가 전역 글꼴 크기를 변경해서는 안 된다고 생각합니다. 두 설정은 별도로 유지되어야 합니다.

토픽 맵 컨테이너가 너비의 100%를 사용하지 않습니다. 보통 오른쪽 끝까지 이어져야 합니다.

푸터 버튼도 마찬가지입니다.

일반 레이아웃에서 날짜를 포함하는 .topic-meta-data에는 답글 버튼과 날짜를 정렬하기 위한 오른쪽 패딩이 있습니다:

하지만 컴팩트 레이아웃에서는 그렇지 않습니다:

일반 레이아웃에서 게시물을 구분하는 수평선이 없기 때문에 게시물 목록의 오른쪽 부분이 이상해 보입니다. 날짜와 답글 버튼이 서로 너무 가깝습니다. 각 버튼과 그 아래에 있는 날짜는 같은 게시물의 일부인 것처럼 보이지만, 실제로는 서로 다른 게시물의 것입니다.

3개의 좋아요

네, 모두 작성되어 있고 정상적으로 작동하지만, 아직은 도입하고 싶지 않았습니다.

다른 보고 사항들에도 감사드립니다. 확인해 보겠습니다. :smile:

4개의 좋아요

여기 있는 이 테마 컴포넌트 설치 버튼이 올바르게 설정되어 있지 않아 다음과 같은 결과가 나타납니다:

… 그리고 다음과 같은 메시지와 함께 실패합니다.

오류가 발생했습니다: git 저장소를 복제하는 중 오류가 발생했습니다. 접근이 거부되었거나 저장소를 찾을 수 없습니다.

마크다운 부분이 없는 URL만 기대합니다.

3개의 좋아요

보고해 주셔서 감사합니다. 수정되었습니다.

2개의 좋아요

다시 인사드립니다. 방금 compact 뷰와 Enhanced(AI 요약) 뷰를 함께 선택해 보았습니다. 결과는 별로였습니다. 이 조합이 큰 의미가 없다고 생각되지만, 선택할 수는 있는 상태입니다.

2개의 좋아요

작은 관찰 사항입니다. compact 모드에서 플레어가 있으면 게시글 텍스트 위에 겹쳐 보입니다.

3개의 좋아요

보고해줘서 고마워, 토마스. 확인해볼게.

1개의 좋아요

제가 답글에서 첫 번째로 언급한 바로 그 내용입니다 :smile:

전용 설정이 이미 존재하는 경우, 컴팩트 뷰에서 글꼴 크기를 변경해야 하는지에 대한 의견을 듣고 싶습니다.

솔직히 큰 문제는 아닙니다. 하루에 두 번씩 밀도 설정을 바꿔가며 사용할 일은 없으니까요… 그냥 단순한 호기심입니다.

여러 가지 밀도 모드를 제공하는 소프트웨어 몇 가지를 빠르게 살펴보았습니다. 컴팩트 모드에서,

  • Discord와 Google Gmail/Calendar는 글꼴 크기를 변경하지 않습니다.
    Slack도 마찬가지일 것 같습니다 (직접 테스트하지는 않고 스크린샷만 확인했습니다)

  • Microsoft Outlook은 글꼴 크기를 14px에서 12px으로 줄입니다.

3개의 좋아요

좋은 질문이네요, Canapin.

컴포넌트를 만들면서 몇 가지 다른 시나리오를 시도해 봤는데, 글자 크기를 줄이는 것이 항상 가장 좋은 선택으로 느껴졌습니다.

3개의 좋아요


Cozy(코지)

여기서 언급할 내용인지 확신은 없지만, Cozy 밀도 모드에서 주제를 구분하는 간격이 일반 밀도와 컴팩트 밀도에 비해 줄바꿈 처리가 조금 일관되지 않아 보입니다.

Discourse 스톡파일의 다른 밀도 설정


default(기본)

compact(컴팩트)

안녕하세요. FOUNDATION 테마에 해당 TC를 활성화했는데, PC에서는 TC 설정을 볼 수 있습니다(좌측 하단 사이드 메뉴). 하지만 모바일로 해당 테마를 사용할 때 TC 설정이 보이지 않습니다. 혹시 원인을 아시는 분 계신가요? 감사합니다.

업데이트: 방금 내 설정에서 찾았네요… (그런데 좌측 하단 사이드 메뉴에는 안 보였는데?)

2개의 좋아요

모바일에서는 사용을 최소화하기 위해 숨겨져 있습니다. 하지만 정말로 접근이 필요하시다면 사용자 설정에서 해당 옵션을 찾으실 수 있습니다.

3개의 좋아요