用户卡片重新设计实验

sam · 2023 年2 月 10 日 02:18

鉴于这个错误……也许是这个……

davidkingham · 2023 年2 月 10 日 03:50

就是那个，谢谢 Sam。

不确定为什么我的徽章标签现在显示出来了。

就我个人而言，我会将 .d-user-card__main-content 的不透明度设置为 90% 左右，因为图片被裁剪了，用户无法控制显示除照片顶部一小部分以外的任何内容。

除此之外，我仍然认为需要一个按钮或链接来查看用户的完整个人资料。我不得不反复向用户解释他们必须点击头像两次，这完全不直观。

jordan.vidrine · 2023 年2 月 10 日 13:46

这是一个很棒的观察！

jesus2099 · 2023 年2 月 12 日 23:44

抱歉，在不支持的 Android 9 Kiwi 浏览器中仍然存在此问题。

我忘记了它位于屏幕顶部之外的问题，现在：

始终在屏幕外，位于屏幕上方太高的地方，无论点击哪个用户图标
不透明度问题：看起来很暗
z-index 问题：位于（包括所有用户图标在内的）多个元素后面，并且上面的任何内容都无法点击

这次我认为我已经提到了 Kiwi 上新用户卡片的所有样式表问题。
之前的用户卡片没有问题。

Don · 2023 年2 月 13 日 11:31

嘿 @jesus2099，我尝试在 Kiwi 浏览器上重现你的问题，所以我刚安装并检查了一下。我想我找到了原因。如果我启用 Hide annoying ads（隐藏烦人的广告）选项，我就会遇到同样的问题

如果我关闭它，用户卡片对我来说就能正常工作。

你是否启用了此选项？如果是，你能尝试禁用它并检查一下效果吗？

实际上，我认为这是阻止加载主题组件的 JavaScript 等的原因。正如我所见，它加载了旧的用户卡片，我认为它与新的用户卡片组件混合在一起，导致 CSS 等被阻塞……这就是原因。

从新的主题组件开始的几行被激活，这影响了旧的用户卡片。

github.com/discourse/experimental-usercard

scss/user-card.scss

3c67ac308


      
          // RESET
          .user-card {
            all: initial;
            position: absolute;
            .btn {
              margin: 0;
            }
            * {
              font-family: var(--font-family);
            }
            .card-row:not(.first-row) {
              margin-top: 0;
            }
            .card-avatar-placeholder {
              border: 6px solid var(--secondary);
              width: 100px;
              height: 100px;
              position: relative;
              top: -50px;
            }

This file has been truncated. show original

这只是为了重置旧的用户卡片样式，只要新的用户卡片是主题组件状态，并且尚未合并到核心。所以我认为当它被合并时，这不会是一个问题。

jesus2099 · 2023 年2 月 13 日 13:11

哦 @Don，你说得对！

这个反广告功能正在阻止来自 cloudfront.net 的所有 JavaScript！

你认为当新的用户卡成为官方卡后，它是否还会像今天旧的用户卡一样不再被阻止？

附注：这个反广告功能在所有地方默认开启，我们可以逐个站点停用。

jordan.vidrine · 2023 年2 月 13 日 13:36

这是正确的，因为它将在核心中加载，而不是在核心外部的组件中加载。

darkpixlz · 2023 年2 月 13 日 14:35

似乎已更新。我 100% 更喜欢之前的带框统计数据：

供参考（我认为更好看）

另外，加载动画似乎仍有一些问题。

还有另一个问题，似乎新的更改与我的主题不兼容。

darkpixlz · 2023 年2 月 13 日 16:03

另外，个人简介去哪了？

jordan.vidrine · 2023 年2 月 13 日 16:29

我看到了……

darkpixlz · 2023 年2 月 13 日 16:30

也许试试移动视图？

Canapin · 2023 年2 月 13 日 16:37

我在桌面版和移动版上都看到了简介。

那么更有可能是你那边修复了，对吧？

darkpixlz · 2023 年2 月 13 日 16:38

Android 还是 iPhone，以及 Web 还是 DiscourseHub？
iOS DiscourseHub 没有此功能

Canapin · 2023 年2 月 13 日 16:43

是的，我的 iPad 上确实没有显示简介！

最让我困扰的是，无论使用什么设备，我都无法让我的漂亮的猫咪始终完全可见

AquaL1te · 2023 年2 月 14 日 07:42

此组件与此其他主题组件配合使用效果不佳：GitHub - discourse/discourse-user-card-directory: Theme component which replaces the user directory with a grid of user cards
用户卡片不显示背景。

jordan.vidrine · 2023 年2 月 16 日 22:54

屏幕截图包含@Canapin 的个人简介。该个人简介仅包含一个火箭。

mattdm · 2023 年2 月 16 日 23:16

我喜欢它！它解决了我们注意到的一些问题：

更大的真实姓名——同时仍然有空间容纳一个同样很长的名字。
精选徽章更加突出——这与 Fedora 的自定义徽章很相配。

有一点我不确定：“将用户状态移至头像图标，而不是完整的描述”。这是右下角的吗？它会取代群组的“头像装饰”吗？

我认为最好能有一个选项，可以将状态文本展开显示在某个地方。图标似乎不太明显。

其他想法：

我们禁用了“生日提醒”，因为它会暴露个人身份信息，我们的合规人员要求我们做一些复杂的处理，直到我说“如果我们不这样做呢？”。我实际上更希望将整个空间用于显示状态，甚至可以省略网站 URL。
同样，如果一个人不使用“Cheers”或“Solved”，那么那个空间会放什么呢？填满时看起来不错，但只有一半的框可能看起来很奇怪？
我其实有点喜欢旧卡片上头像打破边框的方式。
自定义用户字段会放在哪里？我们提供了一个代词选项，并希望它易于发现。
“精选话题”怎么样？我喜欢这个主意，但在当前的卡片上，它可能会变成一团乱麻的文字。

mattdm · 2023 年2 月 16 日 23:48

哦，根据我的用户卡，还有更多想法：

从我的头像生成的背景……有点难看，是吧？
是的，我想念那个打破常规的头像
- 也许实际上更大的图片会更好？也许这是我的错，因为它不仅仅是我的脸。
哦，我需要更新我的位置
我认为 Fedora 徽章（参见 https://badges.fedoraproject.org/user/mattdm）在这里会很好看。但默认形状有点平淡。
这可能以前就在那里，但我从未留意过，生日蛋糕和日期——我想那是我加入网站的日期？——可能会让人们错误地猜测我的年轻程度。如果它不代表生日，也许应该换个图标？或者_说明_它是什么？

Canapin · 2023 年2 月 17 日 00:30

不知为何，我记得我曾在 iPad 上尝试打开 @darkpixlz 的个人资料，但没有看到他们的简介，不过我想我当时脑子短路了。

sam · 2023 年2 月 17 日 00:35

快速 Bug 报告。

点击徽章时，卡片会在过渡期间保持显示。它应该提前隐藏它。（Firefox Linux）

话题		回复	浏览量
New user cards and user profile page design deployed Feature	63	8451	2015 年7 月 3 日
User Card Directory Theme component official , user-card-directory	137	17972	2025 年12 月 30 日
User Card view Support user-card	2	540	2023 年4 月 9 日
User cards customization on Meta Discourse Support user-card	4	138	2024 年7 月 27 日
Topic Cards Theme component official , topic-cards	103	6192	2025 年12 月 18 日

用户卡片重新设计实验

相关话题