愿望清单:显示“用户为这篇帖子获得了徽章”的视觉提示

我对自定义(效果、其他)需要了解 CSS 表示满意,但最初的显示/隐藏功能以及包含/排除哪些徽章应该作为设置提供。

7 个赞

我认为有一个 Discourse 托管计划是完全不可能做到这一点的。此外,许多管理员在将 CSS 添加到从 GitHub 安装的主题时会遇到困难。
但我的观点更侧重于这样一个事实:您首先需要意识到 CSS 的存在,并且它很容易隐藏某些内容。文档当然会有帮助,但根据我的经验,大多数人都不阅读它。

为什么有一个设置可以禁用“Powered by Discourse”链接?它也可以很容易地用 CSS 隐藏。

6 个赞

感谢大家的额外反馈!我今天会调查添加一些设置。:slightly_smiling_face:

4 个赞

这是我添加设置的初稿。

全局设置

每个徽章的设置

设置本身相当简单,但行为比我希望的要复杂一些。为了避免暴露不应暴露的信息,在帖子中显示徽章目前需要启用以下三个设置:

  1. 在公共徽章页面上显示徽章
  2. 在徽章页面上显示授予徽章的帖子
  3. 在授予徽章的帖子中显示徽章

每个设置的原因是:

  1. 当徽章未在公共徽章页面上显示时,在帖子中显示徽章似乎有些矛盾。
  2. 当我们不在徽章页面上显示帖子时,在帖子中显示徽章似乎存在潜在的信息泄露风险。
  3. 这是允许在帖子中显示徽章的新设置。

假设让这个新选项依赖于现有选项的设置是合理的,这会引发一些问题,这些问题在很大程度上取决于 Discourse 的整体设计语言,因此我非常希望得到 @chapoi 的额外反馈。

特别是,在 Discourse 管理后台中,如何适当地显示一个选项需要等待其他选项启用后才能生效?

一个相关的问题是,如果系统徽章没有同时启用前两个选项,那么新选项将永远不起作用,因为这些选项在系统徽章上是只读的。对于这些徽章,是否应该将其标记为只读设置,但为所有其他系统徽章保留可配置选项?

最后,一个面向所有感兴趣的人的问题:哪些系统徽章应该默认启用此选项?

3 个赞

说得非常好,感谢您对此进行深入探讨!

是的,我认为你在这方面思路很对。

目前,我认为我们缺乏一个结构化的方法。

我在想我们需要类似这样的东西:

但需要更好的文案。 :sweat_smile:

你觉得怎么样 @ella(我们的管理设计主管)

2 个赞

谢谢你的想法,查理,我认为这可行。

我在 Discourse 管理后台的其他地方找不到此类 UI 的示例,所以我自己动手做了。它还需要一些润色(而且文案还可以改进!:grinning_face_with_smiling_eyes:),但这足以大致了解它的功能。

4 个赞

我倾向于选择“发帖”类别中的那些。

3 个赞

同意,添加一些结构会让这个更加清晰,例如:

用法

  • 允许徽章用作标题
  • 可以多次授予

可见性

  • 在公共徽章页面上显示徽章
  • 在徽章页面上显示授予徽章的帖子
  • 在授予徽章的帖子中显示徽章

对于工具提示,怎么样:

需要同时启用“在公共徽章页面上显示徽章”和“在徽章页面上显示授予徽章的帖子”。

4 个赞

好消息,各位!

此 PR 刚刚被合并!

3 个赞

@ganncamp 我已将其部署到您的网站。:slightly_smiling_face:

2 个赞

这是个好消息!!!!谢谢!

2 个赞

好的……赠马不看牙口……

显示效果有点令人失望:

Selection_2150

我会看看能不能用 CSS 来处理这个问题。

添加 CSS 的编辑

// 使帖子中显示的徽章更大
.topic-meta-data .user-badge-buttons {
transform: scale(1.3);
margin-left: 0px;
}

而我无法用 CSS 触及的是顺序。我惊讶地发现徽章显示在显示名称和用户名之间。可以更改吗?

3 个赞

感谢您的反馈,@ganncamp:slightly_smiling_face:
您说得对,它显示在用户名和显示名称之间确实有点奇怪,我会看看我能对此做些什么。
当您提到更改顺序时,您是指这个问题,还是也想更改多个徽章被授予单个帖子时的徽章顺序?

1 个赞

好的!我在这份拉取请求中调整了一些内容:

以下是不同帖子标题选项的一些截图:




1 个赞

是的。我(目前 :sweat_smile: )不关心徽章的顺序。

我已经将这些调整合并并部署到您的网站了,@ganncamp:slightly_smiling_face:

4 个赞

谢谢!

这是我为感兴趣的人准备的最终 CSS 代码:

// 使在帖子中显示的徽章更大、更醒目
.topic-meta-data .user-badge-buttons .svg-icon {
     transform: scale(1.3);
     // 这是“更醒目”的部分
     border-radius: 50%;
     background-color: var(--highlight-bg);
     border-width: 2px;
     border-style: solid;
     border-color: var(--highlight);
     padding: 4px;
}

结果:
Selection_2162

4 个赞

此主题已在 2 天后自动关闭。不再允许回复。