Small details in my Mastodon client that I wanted more people to notice
7 days ago
- #User experience
- #Frontend development
- #Mastodon client design
- 可读的CSS类：通过Svelte的组件CSS作用域、CSS模块以及用于子组件样式的自定义预处理器，使用可读的类名。
- 全局变量：为用户脚本和调试暴露全局变量（例如，_settings.display_accent、_api）。
- 响应式设计：具有响应式布局，侧边栏在特定断点处切换为仅图标模式以节省空间。
- 移动端导航：调整UI元素，如'创建帖子'按钮在移动端与桌面端的位置，导航模仿移动端标签切换。
- 主题表示：将帖子显示为断开的气泡，仅在串接时连接，并对自回复进行视觉调整以减少杂乱。
- 显示名称：默认显示句柄而非显示名称以平衡设计，对回复和转推进行特殊处理。
- 媒体处理：支持图像、视频和音频，多附件使用轮播图，具有懒加载和带替代文本说明的自定义灯箱。
- 点击打开：使整个帖子框可点击，同时避免文本选择或与交互元素冲突以打开帖子。
- 悬停效果：使用CSS技巧（例如，带z-index的::before）实现悬停背景，而不破坏回复布局。
- 树状回复：将回复表示为带有缩进和颜色编码的树状结构，以澄清对话结构。
- 帖子定位：通过使用间隔器确保具有多个祖先的帖子出现在屏幕中央附近，以保持一致性。
- 用户信息显示：在聚焦帖子时在侧面显示用户信息，以提高对话中的意识。
- 关注按钮：将关注按钮仅限于用户个人资料，避免杂乱并鼓励在关注前查看个人资料。
- 软过滤器：将软过滤器类似于内容警告处理，用图标和灰色文本显示。
- 时间线调整：在主时间线中合并转推和主题祖先，以减少重复并保持时间顺序。
- 提及分组：将多个提及分组为单个可点击元素，以节省空间并清理帖子文本。
- HTML解析：解析传入的HTML以处理提及和话题标签，尽管后端存在不一致性，但仍改善用户体验。
- 话题标签处理：移除内联话题标签并将其列在帖子底部，并采用特殊规则清理包含大量话题标签的内容。
- 分组通知：对于没有原生支持的后端，手动分组通知，灵感来源于Phanpy的实现。
- 反应管理：将某些表情反应转换为收藏，将反应显示在交互按钮旁边，并处理后端不一致性。
- 引用显示：在帖子顶部显示引用，展平嵌套引用，旨在鼓励'是的，而且...'风格的互动。
- 帖子框设计：根据移动端（自下而上）和桌面端（自上而下）调整帖子对话框位置，但存在诸如缺乏文件上传支持等限制。