토픽 스타일 변경 사항 - 피드백

말씀이 틀린 것은 아니지만, 문제는 이 컴포넌트들이 서로 다른 방식으로 설정되어 있다는 점에 있습니다. 하나는 d-icon을 사용하고 다른 하나는 현재로서는 그렇게 적용하기 어렵습니다. 이 부분이 변경되기를 원하므로, 방법을 아시면 자유롭게 도와주세요.

새로운 스타일링을 적용하려면 더 많은 공간이 필요하지만, 현재 패딩이 너무 많다는 데에는 동의합니다.

이것은 토글이 처음 도입된 이후 디자이너들 사이에서 계속 이어져 온 논쟁입니다. 정답이나 오답은 없습니다.


Screenshot 2023-11-14 at 1.48.35 PM

이것은 디자인 세션에서 나온 아이디어 중 제가 개인적으로 매우 좋아했던 것입니다. Sam과 cvx의 지적 사항(들)을 (일부) 해결합니다. 다음 반복에서 이 방향으로 시도해 보겠습니다.

3개의 좋아요
지금까지 이에 대한 제 생각은...

제 생각에는 꽤 괜찮아 보입니다!

4개의 좋아요

화살표(chevron)는 왼쪽에 배치하는 것이 더 좋을 것 같습니다. 오른쪽에 있으면 대부분의 사람들이 보지 못할 것 같아요. 마우스를 올리지 않는 한 일반 텍스트(코드 블록 같은 느낌)처럼 보이거든요. 저도 거의 놓칠 뻔했습니다.

3개의 좋아요

(14. :wink:) 최근 클릭 핸들러가 추가되면서 링크를 클릭하거나, 코드 복사 버튼을 사용하거나, 이미지를 확대하려고 하거나, 심지어 텍스트를 선택하려고 해도 details 블록이 접히게 됩니다… :eyes:

4개의 좋아요

전적으로 동의합니다. 지난 며칠 동안 여러 개의 세부 정보 블록을 읽을 때 거의 놓칠 뻔했습니다. 처음에는 코드 블록과 비슷해 보여서 그런 것 같습니다.

이것은 코드가 아닙니다

비어 있음

이것은 코드입니다
8개의 좋아요

이상하네요. 제 환경에서는 링크 클릭이 정상적으로 동작합니다. 디테일 블록은 접히지만 링크도 함께 열립니다. 다른 시나리오는 아직 테스트해 보지 않았습니다. 그리고 JS 작업이 좀 더 세련되어야 한다는 데 동의합니다. :winking_face_with_tongue:

체비언(화살표)의 위치와 관련해서, @jordan.vidrine님은 어떻게 생각하시나요?
한 번 더 수정 작업을 진행할까요? 원래 제가 구상했던 대로, 체비언 대신 일반적인 삼각형을 사용하고 열려 있을 때만 배경색을 적용하는 방식으로요?

1개의 좋아요

쉐브론을 계속 사용하는 것이 좋다고 생각하지만, 왼쪽에 위치를 잡는 것은 좋은 아이디어인 것 같습니다.

1개의 좋아요

다른 것을 말씀하시는 건가요? 우리는 여기에 클릭 핸들러를 추가하지 않았습니다.

핸들러가 하나 있었습니다. Charlie가 오늘 2c941c4에서 이를 제거했습니다. :slightly_smiling_face:

하! 와, 이게 뭘 하고 있는지 궁금했거든. 정확히 눈앞에 있었는데도 못 봤어.

2개의 좋아요

네, 요약 부분만 클릭할 수 있는 것이 아니라, 아무 곳에서나 마우스를 올리면 하이라이트가 되고 클릭으로 닫을 수 있다는 아이디어가 정말 마음에 들었어요. 그런데 다른 클릭의 전파는 놓치고 있었네요 :woman_facepalming:

인용구 안에서 세부 사항을 놓치기 매우 쉬운 것도 사실입니다. 배경 하이라이트가 거의 보이지 않고, 체브론(화살표)이 텍스트에서 멀리 떨어져 있기 때문입니다.

5개의 좋아요

최신 버전과 관련해 몇 가지 꼼꼼한 의견들…

화살표는 중앙 정렬 대신 베이스라인(baseline) 기준으로 정렬하는 게 나을까요? 여러 줄로 된 예시에서는 중앙 정렬보다 이렇게 하는 편이 더 좋게 느껴집니다… 하지만 이건 주관적인 판단일 수도 있겠네요:

중앙 정렬

베이스라인 정렬

패딩은 인용구(quote)와 일치해야 할까요? 현재 상단 부분이 약간 조여 보이는 것 같습니다.

컨테이너 전체에 패딩을 적용한다면, 마지막 요소의 패딩을 제거하는 것도 고려해볼 수 있을 것 같습니다… 콘텐츠 유형이 다양해서 너무 복잡한 문제가 될 수도 있지만, 다음과 같은 방식을 시도해볼 수 있습니다:

details > :last-child {
  padding-bottom: 0;
}

인용구 내부에 있을 때는 배경이 가려지지 않도록 한 단계 어두운 색을 사용하는 것에 동의합니다.

Summary

이 텍스트는 숨겨집니다.

이 문제를 해결하는 데 도움이 될 수 있는 변수를 사용할 수 있을 것 같습니다… details의 배경을 다음과 같은 방식으로 설정한다면

:root {
  --d-details-bg: var(--primary-100);
}

details {
  background: var(--d-details-bg);
}

인용구에서 이를 오버라이드할 수 있겠죠… 인용구 변수에 "더 어둡게 해야 함"이라는 일반적인 설정을 추가하는 것도 가능할까요? 이런 상황이 다른 곳에도 있는지 기억이 나지 않습니다…

blockquote {
  --darker-quote-bg: var(--primary-200);
  --d-details-bg: var(--darker-quote-bg); 
}
4개의 좋아요

100% 공감합니다. 현재 원인이 아니라면, 그저 오류일 뿐입니다.

3개의 좋아요

이 목적을 위해 rgba(var(--primary-rgb),0.25) 같은 것을 사용하는 것을 좋아합니다. 이렇게 하면 해당 요소가 포함된 요소의 현재 배경색을 조금 더 어둡게 만들 뿐이거든요.

2개의 좋아요

전반적으로 최신 버전이 곧 출시될 준비가 거의 끝났다고 생각합니다 :hugs:

확신은 없지만 해결이 어려운 사소한 문제 하나:

출시를 막는 문제는 아니지만, 회색 패널 때문에 하나의 엔티티를 보고 있는 것처럼 보입니다.

3개의 좋아요

네, 아마도 경계선 같은 걸 추가하면 더 명확해질 거라고 확신해요. 오늘 한번 살펴볼게요.

1개의 좋아요

전체적으로는 마음에 듭니다. 다만, 이 제안이 눈에 띄었습니다.

텍스트 요소의 배경색을 고르는 일은 때때로 완벽한 밝은 회색 톤을 찾는 것과 비슷합니다.

var(--primary-not-so-light-you-cant-see-it-but-not-so-dark-it-looks-clunky)

하지만 거의 다 된 것 같고, 전체적으로는 마음에 듭니다.

5개의 좋아요

코드 블록에도 인용 블록과 동일한 배경 어둡게 처리를 추가합니다

이렇게 하면 문제가 해결될 것입니다 @sam

2개의 좋아요

두 가지 더 (15번과 16번이라고 불러도 됩니다 :wink:)

  • summary 요소의 실제 클릭 가능한 영역은 커서를 변경하고 마우스를 올렸을 때 하이라이트가 되는 요소보다 작습니다.
  • 그 결과, 요소에 마우스를 올렸을 때의 배경색과 요소를 확장할 때의 배경색 변경으로 인해 요소를 확장할 때 배경색이 잠시 깜빡이는 현상이 발생합니다.

수정:

  1. 렌더링된 게시글과 작성기(Composer) 사이의 차이점:

    vs
2개의 좋아요