备选投票类别风格

自定义 主题组件
,
1

此主题组件为使用 Discourse 投票插件的任何指定类别提供替代样式。

安装

仓库链接
https://github.com/discourse/discourse-alternative-voting-category-style

如果您不熟悉主题组件及其安装方法，请查看 主题安装指南。如果您想进一步了解 Discourse 主题，请阅读 本指南。

预览

preview
preview2558×1286 133 KB

整体构思基于 @erlend_sh 创建的 此原型。

显著功能

  • 紧凑视图
  • 更突出的投票计数
  • 彩色图标以指示您已对主题进行投票

设置

目前有一个设置用于指定应用样式的类别：

voting-settings
voting-settings1462×337 27.4 KB

额外自定义

如果您想自定义投票主题中特定标签的外观（参见上方预览图像中的“进行中”标签），您可以创建一个额外的组件，并修改以下 CSS 以适应您的需求：

.voting-category.list-container {
    .topic-list-item:not(.about-topic) {
        // 所有列出标签的通用样式
        [data-tag-name="in-progress"],
        [data-tag-name="my-tag-one"],
        [data-tag-name="my-tag-two"] {
            font-weight: bold;
            text-transform: uppercase;
            font-family: Trebuchet MS;
        }
        // 各个标签的特定样式
        [data-tag-name="in-progress"] {
            color: #9e63d0;
        }
        [data-tag-name="my-tag-one"] {
            color: #5bd04a;
        }
        [data-tag-name="my-tag-two"] {
            color: #5f5dd0;
        }
    }
}

未来计划

您可能注意到原始原型中缺少的一项内容是主题标题下方的主题摘要。此功能需要对核心或投票插件进行修改，目前需暂时搁置。

一如既往，如果您遇到任何问题，请随时告知我。

非常感谢 @simon 和 @erlend_sh 与我合作完成此项工作 :heart_eyes:

38 个赞
Upvote plugin help
Display vote/like counter in main page
Voting box does not appear
Discourse Topic Voting
Issues with topic list order for Voting/Latest
FKB Pro - Social theme
FKB Pro - Social theme
Questions about the technical architecture of Discourse
Discourse forum for feature requests with upvotes + comments?
What is this voting layout?
Increase visibility of the vote button and count
[PAID] Need to feature the Wishlist block on the homepage
Customizing your site with existing theme components
How to Show "Vote" Buttons Alongside List of Topics
Topic List Voting Column
Show total votes next to total replies, views and activity columns
2

Great theme component! One thing I found was that the unlisted icon is not fitting into your design. The topic title is overlapping it.

03%20AM

8 个赞
3

Thanks for the quick feedback! I will try to get that fixed a little later today :slightly_smiling_face:

Edit: @Sean_R I just pushed a quick fix. I may try to tinker with it a little more to get it even better, but there shouldn’t be any more overlap!

6 个赞
4

Looks good now

image

I also had to change the CSS to make the topic list wider.

Was

.voting-category.list-container {
  max-width: $small-width;

Changed to

.voting-category.list-container {
  max-width: $large-width;
6 个赞
5

Thanks for confirming that is fixed!

The smaller width was based on the original design. The rationale was that there was so little information displayed on each topic row that it would look odd at full width. I can imagine some people might feel the opposite - that the smaller width looks odd. A width option to toggle via a theme setting would be an easy addition. I’ll add that to my to-do list with this.

5 个赞
6

This component has been updated! The changes include:

  • Support for font awesome changes
  • Additional setting to toggle between small-width and large-width
6 个赞
7

Does this component still work?

I use an instance of free.discourse.group and am looking for an alternative for the Discourse Vote Plugin

8

The component still works, but it is meant to be used alongside the voting plugin, not instead. It only provides an alternative style option for the voting plugin.

3 个赞
9

Ah, now I get it, thanks for your attention :hugs:

3 个赞
10

还有人活跃使用这个吗？我用投票插件的当前版本（0.5）测试了一下，界面看起来不错，但似乎已经无法正常工作了——至少在我们的实例中是这样。

11

你能具体说明一下哪些功能不正常吗？我刚刚测试过，一切似乎都在正常运行。需要说明的是，该组件目前仅用于样式设置。你无法直接在主题列表中投票。

2 个赞
12

感谢您的即时回复！！！

首先

请注意，该组件目前仅用于样式设置。您无法直接从主题列表中投票。

好的，我此前并未意识到这一点。我以为它确实能实现这一功能：直接从主题列表投票。了解，需要重新评估了。

其次
它似乎并未显示实际的数据或投票结果。这里有两张截图：一张是样式启用状态，另一张是样式禁用状态。

Bildschirmfoto 2020-10-07 um 21.47.41
Bildschirmfoto 2020-10-07 um 21.47.411770×560 16.5 KB

Bildschirmfoto 2020-10-07 um 21.51.15
Bildschirmfoto 2020-10-07 um 21.51.152298×526 52.4 KB

我怀疑是与所用主题存在冲突，但即使更换了其他主题，问题似乎仍未解决。

1 个赞
13

嗯，我刚刚在一个最新的网站上测试了，投票计数和“我已投票”指示器都没有任何问题：

Screen Shot 2020-10-07 at 1.09.23 PM
Screen Shot 2020-10-07 at 1.09.23 PM2302×1092 145 KB

你能检查一下浏览器的控制台是否有错误吗？你是否尝试过使用一个全新的默认主题，不添加任何其他组件或自定义设置？

2 个赞
15

您应该可以通过为主题或组件添加一条 CSS 规则来解决此问题。我尚未安装评分插件进行测试，但我想它应该类似于以下内容：

.rating-list {
  margin-left: 65px;
}

我目前正在这项组件上进行一些工作（它已经很久没有被修改过了！），因此我会看看能否让任何自定义的主题列表内容默认都能正确定位。

3 个赞
16

完美，谢谢 :ok_hand:

1 个赞
17

我已安装此主题组件并已启用它，但只在两个类别中启用了。一个类别看起来有 bug，另一个看起来很好。我能想到的区别是，类别名称出现在列表中，与投票数重叠。我能想到的唯一区别是，有 bug 的类别有子类别，而另一个则没有。

有 bug，有子类别：

image
image878×278 17.7 KB

良好，无子类别：

image
image840×280 17.9 KB

如果这对您有帮助，这是带有“Grey Amber”配色方案的默认主题。

1 个赞
18

感谢您的报告！如果您更新组件，应该会收到以下修复程序：

4 个赞
19

非常感谢您如此快速的响应！修复有效。

PS：请添加#voting标签，这个组件太棒了，不能隐藏它。:slight_smile:

3 个赞
20

是否有某个主题组件能让单个帖子的投票指示器具有相同的外观？

1 个赞
21

此组件还会隐藏显示参与者、视图和活动时间的列。将其分开可能会更好，这样就可以轻松地启用投票样式更改，而无需隐藏这些内容？

或者 — 将

  .posters,
  .views,
  .activity {
    display: none;
  }

移到 @if $use_compact_width == "true" { 内部？

2 个赞