Discourse를 래핑할 때 오버레이가 잘못 배치됩니다

개발
1

안녕하세요 :waving_hand:

전체 discourse를 감싸서 양쪽 사이드바의 색상을 다르게 설정하려고 하면, 사용자 카드와 같은 오버레이 요소가 잘못 배치되는 문제가 발생합니다.

17
171113×780 58.9 KB

사용자 카드는 원래 클릭된 사용자 바로 옆에 열려야 합니다. 하지만 실제로는 제가 만든 사이드바의 너비만큼 가로 방향으로 위치가 어긋납니다. 따라서 이러한 오버레이의 위치 지정이 어떻게 구현되어 있는지, 그리고 사이드바를 유지하면서 이러한 위치 어긋남을 어떻게 방지할 수 있는지 궁금합니다.

많은 도움 부탁드립니다 :clinking_beer_mugs:

2

네, 클라이언트용 대형 플러그인을 개발하던 중 추가적으로 큰 배너를 넣을 때 이 문제를 겪었습니다. 제 경우 오프셋이 완전히 엉망이었어요(화면 밖으로 나가 있었죠!)

더 간단한 해결책이 있을 수도 있지만, 사실 이 문제는 꽤 복잡해서 함수를 오버라이드해야 합니다. 예를 들어 사용자 카드(user card)의 경우:

          api.modifyClass('component:user-card-contents',  {
            _positionCard(target) {

이것은 여기서 찾을 수 있는 믹스인(mixin)에서 가져온 것입니다: discourse/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 at b3eb67976dd0c0129736fe0b86167d7e512b51f4 · discourse/discourse · GitHub

저는 배너의 가시성에 따라 수정을 적용할지 여부를 결정하기 위해 jQuery를 사용했습니다. 어떤 페이지에는 큰 '배너’가 있었고, 다른 페이지에는 없었거든요. 비슷한 전략을 사용할 수 있습니다.

솔직히 말해서, 당신의 예시는 그렇게 나빠 보이지 않아요 — 그냥 그대로 두는 것을 고려해 볼까요?

3

문제는 기본적으로 모든 오버레이가 잘못 배치되어 있다는 것입니다. 존재할 수 있는 모든 오버레이의 위치 지정 메서드를 모두 오버라이드하고 싶지는 않습니다.

예시 이미지에서는 브라우저 창이 전체 크기가 아니어서 괜찮아 보이지만, 일반적으로 측면 영역이 더 넓기 때문에 오배치가 더 심해집니다. 일부 오버레이는 화면 밖으로 거의 벗어나 있습니다.

4

네, 짜증나긴 하죠. 커스터마이징을 주제 목록(Topic List)에만 제한하고, 주제 보기(Topic view)는 최대한 건드리지 않는 것이 좋습니다. 또, '변형(variants)'을 너무 많이 만들지 않으면 훨씬 간단해집니다.

5

특정 뷰를 커스터마이징하지 않았습니다. 전체 포럼을 컨테이너에 넣어서 양쪽 색상을 다르게 설정하고 싶습니다.

6

어떻게 구현하고 계신가요? #main div 주위에 새로운 컨테이너를 추가하고 계신 건가요?

#main-outlet에 배경색을 추가하고, body에 양쪽의 배경색을 추가하는 방식이 더 쉬울 수 있습니다.

7

네, 나중에 그렇게 생각했어요! 그래서:

body {
   background-color: red;
}

#main-outlet {
    background-color: white;
}

아직도 두꺼운 배너 문제는 남아 있지만, 그다지 큰 문제는 아닙니다.