Alternative Voting Category Style

This theme component offers alternative styling for any specified categories that make use of the Discourse Voting plugin.

Installation

Repository Link
https://github.com/discourse/discourse-alternative-voting-category-style

If you are unfamiliar with theme components and how to install them, check out the theme installation guide. And if you’d like to learn more about Discourse themes, take a look at this guide.

Preview

The overall idea is based off of this mockup created by @erlend_sh.

Notable Features

  • Compact view
  • More prominent vote count
  • Colored icon to indicate that you voted on the topic

Settings

There is currently one setting use to specify which categories to apply the style:

Extra Customizations

If you want to customize the look of specific tags within your voting topic (see the “IN PROGRESS” tag in the preview image above), you can create an additional component and modify the following CSS to fit your needs

.voting-category.list-container {
    .topic-list-item:not(.about-topic) {
        // Common styling for all listed tags
        [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;
        }
        // Specific styling for individual tags
        [data-tag-name="in-progress"] {
            color: #9e63d0;
        }
        [data-tag-name="my-tag-one"] {
            color: #5bd04a;
        }
        [data-tag-name="my-tag-two"] {
            color: #5f5dd0;
        }
    }
}

Future

The one thing that you may notice missing from the original mockup is an excerpt of the topic under the topic title. This feature would require changes to core or the voting plugin that will need to wait for now.

As always, please let me know if you experience any issues.

Big thanks @simon and @erlend_sh for working with me on this :heart_eyes:

38 лайков

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 лайков

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 лайков

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 лайков

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 лайков

This component has been updated! The changes include:

  • Support for font awesome changes
  • Additional setting to toggle between small-width and large-width
6 лайков

Этот компонент всё ещё работает?

Я использую экземпляр free.discourse.group и ищу альтернативу плагину Discourse Vote.

Компонент по-прежнему работает, но он предназначен для использования вместе с плагином голосования, а не вместо него. Он предоставляет только альтернативный вариант стиля для плагина голосования.

3 лайка

А, теперь я понял, спасибо за внимание :hugs:

3 лайка

Кто-то всё ещё активно использует это? Попробовал с текущей версией плагина для голосования (0.5) — выглядит довольно хорошо, но, похоже, больше не работает, по крайней мере в нашем случае.

Можете уточнить, что именно не функционирует? Я только что проверил, и всё кажется рабочим. Отмечу, что этот компонент сейчас отвечает исключительно за стилизацию. Голосовать напрямую из списка тем невозможно.

2 лайка

Спасибо за быстрый ответ!!!

Во-первых

Отмечу, что этот компонент сейчас отвечает только за стилизацию. Вы не можете голосовать напрямую из списка тем.

Понял, я этого не осознавал. Думал, что он как раз позволяет делать именно это: голосовать из списка тем. Хорошо, что я это знаю. Значит, нужно пересмотреть подход.

Во-вторых
Кажется, что он не отображает реальные данные/голоса. Вот два скриншота: один с активированным стилем, другой — с отключенным.


Я подозревал конфликт с используемой темой, но даже при смене на другую проблема не решается.

1 лайк

Хм, я только что проверил это на актуальном сайте, и у меня не возникает никаких проблем ни со счётчиком голосов, ни с индикатором «Я проголосовал»:

Можете ли вы проверить, нет ли ошибок в консоли вашего браузера? Пробовали ли вы использовать новую тему по умолчанию без каких-либо дополнительных компонентов или настроек?

2 лайка

Вы должны иметь возможность добавить правило CSS в тему или компонент, чтобы исправить это. У меня не установлен плагин Ratings для тестирования, но, думаю, это должно быть что-то вроде:

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

Я сейчас работаю над этим компонентом (он давно не обновлялся!), поэтому посмотрю, можно ли сделать так, чтобы любой пользовательский контент списка тем по умолчанию позиционировался корректно.

3 лайка

Отлично, спасибо :ok_hand:

1 лайк

Я установил этот компонент темы и включил его в двух категориях. Одна выглядит с ошибками, другая — нормально. Разница в том, что в списке отображается название категории, которое накладывается на счётчик голосов. Единственное, что я могу предположить, — это то, что категория с ошибкой имеет подкатегории, а другая — нет.

С ошибкой, есть подкатегории:

Хорошо, нет подкатегорий:

На всякий случай, если это поможет, используется тема Default с цветовой палитрой Grey Amber.

1 лайк

Спасибо за отчет! Если вы обновите компонент, вы получите следующее исправление:

4 лайка

Спасибо большое за такую сверхбыструю реакцию! Исправление работает.

PS: пожалуйста, добавьте тег #voting, этот компонент слишком хорош, чтобы его скрывать. :slight_smile:

3 лайка

Существует ли компонент темы, который придаст индикатору голосования на отдельных темах такой же вид?

1 лайк

Этот компонент также скрывает столбцы с участниками, просмотрами и временем активности. Было бы неплохо разделить это, чтобы можно было легко включить только изменение стиля голосования, не скрывая при этом эти данные?

Или — перенести

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

внутрь @if $use_compact_width == "true" {?

2 лайка