모바일용 고정 아바타

Hello :wave: This theme component is activate sticky avatars for mobile.

I reused the core sticky avatars feature to make it useable on mobile.
The whole section (topic avatar + topic meta data) is sticky to top. If the post height is out of screen long or if scrolling up on long posts. I removed the sticky avatar for short posts when scrolling up so it will only activate on long posts on mobile.

I disabled this feature on personal messages with some css overwrite.

Because on the sticky section I set up a background color var(--secondary), I moved the topic post highlight from .topic-post to .topic-post .contents so only the section below avatar and meta data will highlighted. :arrow_down_small:

On this post only the contents section is highlighted.

13개의 좋아요

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

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

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

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

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

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

Also, I’m getting an error message with this theme component (see below). Is this component no longer being maintained?

[Admin Notice] Theme ‘Sticky Avatars for Mobile’ contains code which needs
updating. (id: discourse.widgets-decommissioned) (learn more)

1개의 좋아요

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

2개의 좋아요

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

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

4개의 좋아요