移动端粘性头像

自定义 主题组件
1

  • Describe this theme/component in one or two sentences

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

  • Add screenshots (if applicable)

  • Add more details and explain the settings (if applicable)

    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.

    highlighted-post
    highlighted-post497×314 38.9 KB

  • add the preview and repository links

    |||
    |-|-|-|
    | :hammer_and_wrench:|Repository| GitHub - VaperinaDEV/discourse-mobile-sticky-avatars: Sticky Avatars for Mobile |
    | :question:|Install Guide|How to install a theme or theme component|
    | :open_book:|New to Discourse Themes?| Beginner’s guide to using Discourse Themes|

13 个赞
2

干得好，@Don！

我该如何为固定的头像框下方添加投影？
（类似这样： box-shadow: 0 -10px 30px 8px #CCCCCC;）

如果主题组件有一个功能，可以让管理员输入一个 #HEX 值和模糊/扩散值等，从而添加一个微妙的投影，那就太好了。但这可能不值得您费力。

现在，正确的 CSS 覆盖代码是什么，可以定位/启用投影？

当我尝试定位 topic-meta-data 时，它会在整个元素周围添加阴影，而不仅仅是底部，并且阴影也没有包含 topic-avatar。

非常感谢您的任何建议！:folded_hands:

3

另外，我的这个主题组件也收到了错误信息（见下文）。这个组件是否已不再维护？

[管理通知] 主题“移动端粘性头像”包含需要更新的代码。（id: discourse.widgets-decommissioned）（了解更多）

IMG_4376.PNG
IMG_4376.PNG1206×2622 263 KB

1 个赞
4

@Don 有什么想法为什么我访问我的网站时在手机上出现这个错误吗？

2 个赞