사이드바 제목 줄바꿈 및 스크롤

이 부분은 개인적으로 별로 마음에 들지 않습니다. 드롭다운 모드인 내비게이션 사이드바:

또한 드롭다운 모드에서는 데스크톱 화면에 확장할 공간이 남아있음에도 불구하고, 메뉴에 스크롤바가 생기는 일이 쉽게 발생합니다. 이 문제를 수정할 수 있을까요?

내 사용자들은 확장된 사이드바보다는 드롭다운 사이드바를 원합니다. 기존 레거시 햄버거 메뉴와 유사하고 오른쪽에 위치하기 때문입니다.

그리고 'Everything’에 왜 'new’와 'unread’가 포함되나요? 이 둘은 따로 분리되어야 하지 않나요?

또한 그 FAQ 링크를 거기서 제거해야 하는데, 아직 CSS를 어떻게 해야 할지 정확히 파악하지 못했습니다.

1개의 좋아요

더 우아하거나 정확한 해결책이 있을 수 있고, 사이드바가 미래에 더 사용자화 가능해질 것이라 생각합니다. 하지만 잠재적으로 불안정할 수 있는 CSS 해결책은 다음과 같습니다:

.sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

이것은 현재 FAQ 링크의 부모 요소 위치(마지막 요소 -1)를 표적으로 합니다. FAQ 링크와 목록의 끝 사이에 다른 요소가 있으면 CSS 선택기가 더 이상 올바른 요소를 표적으로 하지 않게 됩니다.

하지만 이 목록 부분이 변경되지 않을 것이라고 확신한다면, 이 방법을 사용해도 됩니다.

1개의 좋아요

Canapin님 감사합니다. 저는 CSS를 꽤 잘 다루고 포럼에서도 많이 사용하니까 문제없습니다. 말씀해 주신 이유 때문에 자식 요소 코드를 쓰지 않고 그 항목들을 타겟팅하는 방법을 찾고 있었는데, 아직 완전히 파악하지 못했네요. 이전 레거시 메뉴 내용도 CSS를 많이 써서 변경했는데, CSS로 접근하기가 더 쉬웠습니다. 실제로 커뮤니티 아래 전체 섹션을 조작해서 순서를 다르게 배치하고 싶어서, 자바스크립트도 사용해야 할 것 같습니다. 관리자용 커스터마이징이 가능하게 만드는 부분이 정말 중요하거든요. 팁 주셔서 다시 한번 감사합니다! :slight_smile:

그리고 "everything"이 정확히 무엇인지도 아직 잘 모르겠네요. 좀 더 구체적으로 이름을 바꾸고 싶습니다. :thinking:

네, 링크 컨테이너에 고유한 클래스가 없어서 현재 상태로는 특정 요소를 지정하기가 까다롭습니다.

아래 링크가 도움이 될 수 있습니다: sidebarMod: Add/Remove Sidebar Links and Sections

커스터마이즈 → 텍스트에서 js.sidebar.sections.community.links.everything.content를 찾아볼 수 있습니다 :slight_smile:

1개의 좋아요

오케이, 그 CSS 코드가 잘 작동했어요. 그 메뉴 부분의 스태프 뷰에 영향을 줄까 봐 걱정했거든요. 감사합니다! :innocent:

불행히도 텍스트 치환이 작동하지 않아요 :expressionless:

편집: 브라우저를 여러 번 새로고침해도 텍스트 치환이 적용되지 않아서 결국 테마를 바꿔야 했어요. 크롬의 캐싱은 정말 골치 아파요. :woman_facepalming:

1개의 좋아요

마우스를 올렸을 때 표시되는 텍스트도 수정했습니다:

1개의 좋아요

이 방법으로 FAQ를 숨기는 데는 성공했지만, 이후 각 메뉴 섹션의 원치 않는 요소까지 함께 숨겨버리는 부작용이 있다는 것을 발견했습니다 :sweat_smile: 하지만 당연한 일이죠 :woman_facepalming: :upside_down_face:

정말 빨리 FAQ를 작성하거나 다른 사용자에게 위임해야 할 것 같습니다.

1개의 좋아요

아, 그렇군요.

#sidebar-section-content-community .sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

이렇게 하면 더 나아질 것입니다.

2개의 좋아요

안녕하세요,

data-link-name 속성으로도 이들을 타겟팅할 수 있습니다.
예를 들어,

.sidebar-section-link-wrapper {
  .sidebar-section-link {
    &[data-link-name="faq"] {
      display: none;
    }
  }
}
2개의 좋아요

네, 처음에 그 메서드를 사용하려고 했을 때 data-link 구문을 잘못 작성했어요. “-name” 부분을 빼먹어서 어떻게든 불가능한 줄 알았거든요. 제가 바보였어요. 왜냐하면 옛날 레거시 메뉴에서 그렇게 했거든요. 아, 진짜 :woman_facepalming: 감사합니다.

참고로, child[ ] 메서드는 데스크톱 뷰에서만 사용할 수 있습니다.

1개의 좋아요

문제는 모든 링크가 동일한 클래스를 가진 목록 요소 안에 있다는 점입니다.
링크를 숨기면 목록 요소는 “비어 있음” 상태임에도 불구하고 여전히 남아 공간만 차지하게 됩니다.
혹시 제가 놓치고 있는 부분이 있을까요?

2개의 좋아요

커뮤니티 섹션 변경 기능이 코어에서 완전히 작동하게 되면 정말 좋겠네요. "커뮤니티"라는 제목은 쉽게 변경할 수 있었습니다. 하지만 요소들의 순서를 변경하고 싶습니다. 예를 들어 모바일 뷰에서는 ‘내 게시물’ 링크가 '관리’와 ‘검토’ 위에 위치하여, '검토’가 …더 보기 섹션으로 밀려납니다. 제 스태프들은 이 점을 좋아하지 않으며, 저는 모더레이션 제어가 '내 게시물’보다 우선해야 한다는 데 동의합니다. 아마 UX 기능 요청 주제를 따로 만들어야겠지만, 어차피 팀이 향후 이를 커스터마이징할 수 있도록 작업 중이라는 점은 알고 있습니다.

아마 ‘내 게시물’ 링크를 숨기고 전역 링크 섹션으로 이동시키는 방법도 있을 거예요. 모르겠네요. 그 메뉴로 너무 많은 걸 하려고 하는 것 같기도 합니다.

2개의 좋아요

네, 알겠어요. 이런 종류의 문제에는 :has 의사클래스를 사용하면 좋을 텐데, 아직 지원 범위가 제한적이에요.

.sidebar-section-link-wrapper {
  &:has(.sidebar-section-link[data-link-name="faq"]) {
    display: none;
  }
}
2개의 좋아요