代替投票カテゴリスタイル

カスタマイズ テーマコンポーネント
,
1

このテーマコンポーネントは、Discourse Voting プラグインを使用する指定されたカテゴリに対して、代替のスタイリングを提供します。

インストール

リポジトリリンク
https://github.com/discourse/discourse-alternative-voting-category-style

テーマコンポーネントとそのインストール方法に不慣れな場合は、テーマインストールガイドをご覧ください。Discourse のテーマについてさらに詳しく学びたい場合は、このガイドも参照してください。

プレビュー

preview
preview2558×1286 133 KB

全体のコンセプトは、@erlend_sh によって作成されたこのモックアップに基づいています。

注目すべき機能

  • コンパクトな表示
  • より目立つ投票数の表示
  • 投票済みトピックを示す色付きアイコン

設定

現在、スタイルを適用するカテゴリを指定するための設定が 1 つあります。

voting-settings
voting-settings1462×337 27.4 KB

追加のカスタマイズ

投票トピック内の特定のタグの見た目をカスタマイズしたい場合（上記のプレビュー画像の「IN PROGRESS」タグを参照）、追加のコンポーネントを作成し、以下の 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

即座のお返事ありがとうございます！！！

第一に

このコンポーネントは現時点では純粋にスタイリングのためのものだという点に留意してください。トピック一覧から直接投票することはできません。

なるほど、それは知りませんでした。トピック一覧から実際に投票できるものだと思っていました。わかりました。改めて検討する必要がありますね。

第二に
実際のデータや投票数が表示されていないようです。ここに2枚の画像を添付します。1枚はスタイルを有効にした場合、もう1枚は無効にした場合です。

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 ルールを追加すれば対応できるはずです。私は Ratings プラグインをインストールしていないため実際にテストはできませんが、以下のような記述になると思います。

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

実は現在、このコンポーネントの作業を進めています（長い間手つかずの状態でした！）。デフォルトでカスタムトピックリストの内容が正しく配置されるように調整できるか確認してみます。

「いいね！」 3
16

完璧です、ありがとうございます :ok_hand:

「いいね！」 1
17

このテーマコンポーネントをインストールし、2つのカテゴリで有効にしました。1つはバグがあり、もう1つは正常に表示されます。違いは、カテゴリ名がリストに表示され、投票数と重なっていることです。考えられる唯一の違いは、バグのあるカテゴリにはサブカテゴリがあり、もう一方にはないことです。

バグあり、サブカテゴリあり：

image
image878×278 17.7 KB

正常、サブカテゴリなし：

image
image840×280 17.9 KB

参考までに、これはGrey Amberカラーパレットのデフォルトテーマです。

「いいね！」 1
18

レポートありがとうございます。コンポーネントを更新すると、以下の修正が適用されます。

「いいね！」 4
19

この超高速な対応に本当に感謝します！修正はうまくいきました。

追伸：#voting タグを追加してください。このコンポーネントは隠しておくには良すぎます。 :slight_smile:

「いいね！」 3
20

個々のトピックの投票インジケーターが同じように見えるようにするテーマコンポーネントはありますか？

「いいね！」 1
21

このコンポーネントは、参加者、ビュー、アクティビティ時間を表示する列も非表示にします。それを分離して、投票スタイルの変更だけを簡単に有効にできるようにすると良いかもしれません。そうすれば、それらを非表示にすることなく済むでしょう。

または、

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

を @if $use_compact_width == \"true\" { の中に移動しますか？

「いいね！」 2