fullApp 임베드 모드의 레이아웃

기여 버그
,
1

팀 여러분 안녕하세요!

fullApp 임베드가 출시되자마자 바로 제 사이트에서 시도해 보았습니다. 레이아웃 관련 사항을 몇 가지 수정해야 해서, 그 내용을 공유해 드리려 합니다. 여러분에게도 유용할 수 있을 것 같습니다.

4가지 문제를 발견했습니다:

  1. 왼쪽의 빈 공간. 텍스트 폭이 좁은 경우(약 700px)에는 임베드가 정상적으로 표시되었습니다. 하지만 콘텐츠 폭이 넓은 경우(900px 이상)에는 왼쪽에 빈 영역이 발생했습니다.

  2. 오른쪽의 빈 공간. 1번 문제를 수정한 후, 오른쪽에 빈 영역이 나타났습니다.

  3. 너무 높은 높이, 하단 빈 공간. 기본적으로 임베드의 높이는 위쪽 콘텐츠의 높이에 맞춰집니다. 콘텐츠가 긴 경우, 댓글 아래에 큰 빈 영역이 발생했는데, 때로는 화면 2~3개 높이만큼 비어 있었습니다.

  4. 1px 플리커. 한 동료는 Ubuntu의 Chrome 브라우저에서 댓글 섹션이 1px씩 위아래로 깜빡이는 현상을 목격했습니다. (Mac에서는 발생하지 않았습니다.) CSS 규칙을 하나 더 추가하여 수정했습니다.

결국, 이 스니펫으로 모든 문제를 해결했습니다:

body.embed-mode #main-outlet-wrapper {
  display: block !important;
}
body.embed-mode {
  --topic-body-width: 100%;
}

/* height */
body.embed-mode .topic-post:first-child {
  display: none !important;
}
/* flicker */
.post-stream--cloaked {
  min-height: 0 !important;
}

이것을 Default 테마에 적용했습니다.

이 문제들이 Discourse에서 직접 수정될 수 있다고 생각하시나요?

문제를 재현하기 위해 전체 HTML을 공유하는 것도 기꺼이 하겠습니다.

감사합니다!

3개의 좋아요