Header Submenus

[LeoDavidson]

고정 모드(스크롤해도 메뉴가 항상 표시됨)를 켜면 현재 버그가 발생하는 것 같습니다.

Discourse 2.9.0.beta8에서 이 문제를 확인했으며, 공식 Discourse 테마 미리보기 사이트에서도 쉽게 재현할 수 있었습니다. 처음 이 문제를 인지한 것은 약 2주 전인 것 같지만, 정확히 언제부터 발생하기 시작했는지 확실하지 않습니다.

재현 방법:

• 테마 구성 요소 설정에서 고정 모드를 켜세요.
• 답글이 많은 스레드를 클릭하세요.
• (해당 스레드를 처음 읽는 경우이고, 현재 맨 위에 있다면 몇 개의 답글을 아래로 스크롤한 후 스레드 목록으로 돌아간 다음 해당 스레드를 다시 클릭하여 이전에 있던 게시물로 이동하세요.)

페이지 상단에 필요한 패딩 양이 잘못 계산되어, 게시물 상단과 작성자 이름이 헤더 아래로 스크롤되어 잘려 보입니다.

스레드를 클릭할 때마다 작성자가 누구인지 확인하려면 항상 조금씩 위로 스크롤해야 합니다.

스레드에 진입할 때 보이는 모습은 다음과 같습니다:

다음과 같은 모습이 되어야 합니다:

정말 이상한 점은 이것이 항상 발생하는 것은 아니며, Ctrl-F5를 누르면 종종 해결된다는 것입니다. 하지만 잠시 후 다시 발생합니다.

CSS를 편집하여 main-outlet에 추가되는 패딩 양을 늘리면 문제가 어느 정도 해결되지만, 그렇게 하면 주제 목록 상단에 큰 빈 공간이 생깁니다. 주제 목록과 스레드에 서로 다른 패딩이 필요한 것 같거나, 아니면 그중 하나가 패딩을 두 번 추가하거나 다른 곳에서 추가 패딩을 적용하고 있는 것 같습니다.

(수정: 때로는 페이지를 위로 충분히 스크롤할 수 없어 문제를 볼 수 없습니다. 예를 들어, 스레드의 마지막 게시물로 이동했을 때 그 게시물이 짧으면, 수동으로 최대한 아래로 스크롤해도 헤더가 작성자 이름과 겹칠 수 없습니다. 이는 일부 상황에서 문제가 없는 것처럼 보이는 이유를 설명할 수 있습니다. 버그를 가장 신뢰할 수 있게 재현하려면 매우 높지 않은 브라우저 창을 사용하세요.)

[Tris20 (Tristan)]

로그인 화면에서 이 요소가 표시되지 않도록 막을 방법이 있을까요? 아래 CSS로 처리할 수는 있지만, 그래도 헤더 서브메뉴가 1초간 표시된 이후에 숨겨집니다.

.static-login .top-menu {
	display: none;
}
.static-login .d-header-wrap {
	display: none;
}

static-login 페이지에서 이 요소가 표시되는 것을 방지하는 더 나은 방법이 있을까요?

[awesomerobot (Kris)]

이 주제와 다른 주제들은 크롤러 보기에서 작동하지 않습니다. 크롤러 보기에서는 Discourse의 대부분의 JavaScript가 로드되지 않기 때문입니다.

[davidkingham]

Kris님, 이 컴포넌트를 채팅과 사이드바에 사용하도록 업데이트하면 좋겠습니다. fixed_mode 설정이 켜져 있을 때 채팅과 사이드바가 아래로 이동하지 않고 d-header 뒤에 가려집니다.

아래 CSS는 문제를 잘 해결해 주는데, Category Banners 과는 잘 맞지 않는 것 같습니다. 카테고리 페이지에서 #main-outlet이 추가로 40px 아래로 밀리는 현상이 발생하기 때문입니다. 감사합니다!

.sidebar-wrapper, .main-chat-outlet, .chat-drawer {
    margin-top: 40px !important;
}

[awesomerobot (Kris)]

이 문제를 지적해 주셔서 감사합니다! 방금 여기에 몇 가지 수정 사항을 추가했습니다:

UX: update fixed styling for sidebar & chat (#18)

[davidkingham]

완벽해요, Kris! #main-outlet이 40px 아래로 내려가는 이유가 뭔지 혹시 알고 계신가요?

#main-outlet {
   padding-top: calc(1.8em + 40px);
}

[awesomerobot (Kris)]

아, 그 부분을 놓치고 있었네요 — 삭제할 수 있으며, 이 PR이 병합되면 사라집니다: UX: remove old main-outlet adjustment - Pull Request #19 - discourse/discourse-header-submenus - GitHub

업데이트: 이제 병합되었으므로, 컴포넌트를 업데이트하면 여분의 공백이 사라집니다.

[P2W (Mike Riddick)]

아이콘 이름을 어디서 찾을 수 있을까요?

[awesomerobot (Kris)]

여기에 나열된 모든 항목이 사용 가능하다고 생각합니다: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

다만 일부 아이콘은 추가 단계가 필요합니다… Discourse에서 기본적으로 사용하지 않는 아이콘의 경우, 해당 아이콘 이름을 Svg icons 테마 설정에 추가해야 합니다.

정확하게 알고 싶으시다면, Discourse에서 기본적으로 사용하는 모든 아이콘은 여기에 나열되어 있습니다: discourse/lib/svg_sprite.rb at da0d20d4a99aab40bd08bf133a425be413521d5a · discourse/discourse · GitHub

그리고 테마에서 사용할 수 있는 모든 아이콘(svg icons 설정을 통해)은 이 디렉터리에 있습니다: discourse/vendor/assets/svg-icons at main · discourse/discourse · GitHub

GitHub에서 SVG 파일을 보는 것은 큰 도움이 되지 않습니다. 큰 흰색 박스만 보이기 때문입니다:

하지만 raw 버튼을 클릭하여 페이지 소스를 볼 수 있으며, 아이콘 이름은 symbol의 id입니다.

[P2W (Mike Riddick)]

정말 대단해요, 너무 감사합니다

[davidkingham]

크리스, 고마워요. 그걸로 해결됐어요. 그런데 다른 문제도 몇 가지 발견했어요. .topic-navigation은 40px 아래로 내려가야 하고, .topic-post.sticky-avatar .topic-avatar는 아래로 스크롤할 때 계산이 잘못되어 d-header 뒤에 가려지는 것 같아요. 또한, 작성기(composer)와 채팅 창을 너무 높이 확장하면 컨트롤이 d-header 뒤에 가려지는 문제도 있어요. 이 정도면 모든 문제를 다 짚은 것 같아요!

수정: 한 가지 더, 앵커 링크로 이동하면 제목이 헤더 아래에 가려져 있어요.

[satonotdead]

혹시 이 문제를 해결하신 분 계신가요? 추가 공간을 사용하지 않고 화면에 이미 있는 리소스를 재사용하는 방식이 좋습니다.

로고 위에 마우스를 올리면 블로그, 문서, 위키로 이동할 수 있다는 점이 정말 멋진 것 같습니다!

[alxndr (Alexander)]

참고로, Kris가 언급한 "svg icons theme setting"은 현재 Admin > Settings > Other > 하단 쪽에서 svg icon subset으로 확인할 수 있습니다 (…이게 맞는지 모르겠네요??)

[davidkingham]

새로운 Glimmer 라이트박스에서 작은 z-index 문제가 있습니다. 라이트박스가 1000이므로 1001은 단순히 라이트박스 위에 배치됩니다.

[awesomerobot (Kris)]

전형적인 z-index 문제입니다. Discourse가 다음에 업데이트될 때 수정될 예정입니다.

UX: increase experimental lightbox z-index (#22865)

[clement]

좋은 플러그인을 만들어 주셔서 감사합니다.

로그인하지 않은 상태에서 헤더의 하위 메뉴를 표시하지 않는 방법이 있을까요?

아니면 (개발 아이디어로) 메뉴 항목을 그룹(신뢰 수준 등)으로 링크하도록 하는 것은 어떨까요?
물론 제가 쉽게 요청하는 거라는 건 알지만요…

감사합니다.
C.

[Kieran_Berryman]

다른 곳에 이미 같은 질문이 올라와 있다면 죄송합니다. 헤더 하위 메뉴를 사용하는 걸 정말 좋아하지만, 상단 헤더가 너무 많아서 모바일에서 보이는 상태가 꽤 안 좋습니다. 헤더가 화면 밖으로 확장되어 스크롤이 생기지 않도록 하고 싶은데, 이게 가능한지 궁금합니다.

[Kieran_Berryman]

음, 결국 모바일에서 가장 중요한 링크들을 서브메뉴로 정리해서 “내비게이션” 상단 헤더에 넣는 방식으로 문제를 해결했어요.