모바일용 고정 아바타

안녕하세요 :wave: 이 테마 컴포넌트는 모바일에서 고정 아바타(sticky avatars)를 활성화합니다.

핵심 고정 아바타 기능을 재사용하여 모바일에서도 사용할 수 있도록 했습니다.
전체 섹션(토픽 아바타 + 토픽 메타데이터)이 상단에 고정됩니다. 게시글 높이가 화면보다 길거나 긴 게시글에서 위로 스크롤할 때 활성화됩니다. 짧은 게시글에서는 위로 스크롤할 때 고정 아바타를 제거하여, 모바일에서는 긴 게시글에서만 활성화되도록 했습니다.

개인 메시지에서는 일부 CSS 오버라이드를 통해 이 기능을 비활성화했습니다.

고정 섹션에 배경색 var(--secondary)를 설정했기 때문에, 토픽 게시글 하이라이트를 .topic-post에서 .topic-post .contents로 이동하여 아바타와 메타데이터 아래 섹션만 하이라이트되도록 했습니다. :arrow_down_small:

이 게시글에서는 contents 섹션만 하이라이트됩니다.

13개의 좋아요

@Don 님, 정말 잘하셨습니다!

점점 고정된 아바타 프레임 아래에 드롭 섀도우를 적용하려면 어떻게 해야 하나요?
(예: box-shadow: 0 -10px 30px 8px #CCCCCC;)

테마 컴포넌트에 은은한 드롭 섀도우를 추가할 수 있는 기능이 있으면 좋겠습니다. 관리자가 #HEX 코드와 블러, 스프레드 값을 입력할 수 있는 형태죠. 하지만 개발 측에서 그 정도까지 구현하기는 부담스러울 수도 있겠네요.

그렇다면 현재로서는 드롭 섀도우를 지정/활성화하기 위한 적절한 CSS 오버라이드는 무엇일까요?

topic-meta-data를 대상으로 시도해 봤더니 그 요소 전체 주위에 그림자가 생겼고, 아래쪽에만 적용되지 않았습니다. 또한 그림자에 topic-avatar도 포함되지 않았습니다.

어떤 조언이든 큰 도움이 될 것입니다! :folded_hands:

또한, 이 테마 컴포넌트에서 오류 메시지가 표시됩니다(아래 참조). 이 컴포넌트는 더 이상 유지보수되지 않는 건가요?

[관리자 알림] 테마 'Sticky Avatars for Mobile’에는 업데이트가 필요한 코드가 포함되어 있습니다. (id: discourse.widgets-decommissioned) (자세히 알아보기)

1개의 좋아요

@Don 모바일에서 내 사이트를 방문할 때마다 이 오류가 나는 이유가 뭘까요? 혹시 아이디어가 있으신가요?

2개의 좋아요

또한, 스티키 바는 스크롤 시 깜빡이는 경향이 있습니다.

컴포넌트가 유지 관리되지 않는다면 unmaintained 태그가 있어야 합니다 :slight_smile:

4개의 좋아요