Estilo de Categoria de Votação Alternativa

Este componente de tema oferece estilização alternativa para quaisquer categorias especificadas que utilizem o plugin Discourse Voting.

Instalação

Link do Repositório
https://github.com/discourse/discourse-alternative-voting-category-style

Se você não está familiarizado com componentes de tema e como instalá-los, consulte o guia de instalação de tema. E se quiser aprender mais sobre temas do Discourse, dê uma olhada neste guia.

Pré-visualização

A ideia geral é baseada neste mockup criado por @erlend_sh.

Recursos Notáveis

  • Visual compacto
  • Contagem de votos mais proeminente
  • Ícone colorido para indicar que você votou no tópico

Configurações

Atualmente, há uma configuração usada para especificar quais categorias aplicar o estilo:

Customizações Extras

Se você deseja personalizar a aparência de tags específicas dentro do seu tópico de votação (veja a tag “EM ANDAMENTO” na imagem de pré-visualização acima), você pode criar um componente adicional e modificar o seguinte CSS para atender às suas necessidades:

.voting-category.list-container {
    .topic-list-item:not(.about-topic) {
        // Estilização comum para todas as tags listadas
        [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;
        }
        // Estilização específica para tags individuais
        [data-tag-name="in-progress"] {
            color: #9e63d0;
        }
        [data-tag-name="my-tag-one"] {
            color: #5bd04a;
        }
        [data-tag-name="my-tag-two"] {
            color: #5f5dd0;
        }
    }
}

Futuro

A única coisa que você pode notar ausente no mockup original é um resumo do tópico abaixo do título do tópico. Esse recurso exigiria alterações no núcleo ou no plugin de votação, que precisarão aguardar por enquanto.

Como sempre, por favor, me avise se você encontrar algum problema.

Muito obrigado @simon e @erlend_sh por trabalharem comigo nisso :heart_eyes:

38 curtidas

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 curtidas

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 curtidas

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 curtidas

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 curtidas

This component has been updated! The changes include:

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

Este componente ainda funciona?

Eu uso uma instância de free.discourse.group e estou procurando uma alternativa para o Discourse Vote Plugin.

O componente ainda funciona, mas ele foi feito para ser usado junto com o plugin de votação, não no lugar dele. Ele apenas oferece uma opção de estilo alternativo para o plugin de votação.

3 curtidas

Ah, agora entendi, obrigado pela atenção :hugs:

3 curtidas

Alguém ainda está usando isso ativamente? Testei com a versão atual do plugin de votação (0.5), parece bem bom, mas não parece mais funcionar — pelo menos na nossa instância.

Pode detalhar o que não está funcionando? Acabei de testar e tudo parece estar funcionando. Vale notar que este componente é puramente de estilo no momento. Você não consegue votar diretamente na lista de tópicos.

2 curtidas

Obrigado pela resposta imediata!!!

Primeiro

Observando que este componente é puramente de estilo no momento. Você não consegue votar diretamente na lista de tópicos.

Ok, eu não percebi isso. Eu pensei que ele permitiria exatamente isso: votar na lista de tópicos. Bom saber. Preciso reavaliar então.

Segundo

Parece que não mostra os dados/votos reais. Aqui estão duas imagens: uma com o estilo ativado e outra desativada.


Eu suspeitava de um conflito com o tema usado, mas mesmo usando outro, parece que não resolve o problema.

1 curtida

Hmm, acabei de testar em um site atualizado e não estou tendo problemas com a contagem de votos ou o indicador “Votei”:

Você pode verificar se há algum erro no console do seu navegador? Já tentou com um tema padrão totalmente novo, sem outros componentes ou personalizações adicionados?

2 curtidas

Você deve ser capaz de adicionar uma regra CSS a um tema/componente para corrigir isso. Não tenho o plugin Ratings instalado para testar, mas acho que deve ser algo assim:

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

Na verdade, estou trabalhando nesse componente agora (não era tocado há muito tempo!), então vou ver se consigo fazer com que qualquer conteúdo personalizado da lista de tópicos seja posicionado corretamente por padrão.

3 curtidas

Perfeito, obrigado :ok_hand:

1 curtida

Instalei este componente de tema e o ativei em duas categorias. Uma parece apresentar um bug, a outra parece boa. A diferença é que o nome da categoria está aparecendo na lista, sobrepondo-se à contagem de votos. A única diferença que consigo pensar é que a categoria com o bug tem subcategorias, enquanto a outra não tem.

Com bug, tem subcategorias:

Boa, sem subcategorias:

Caso ajude, este é o tema Padrão com a paleta de cores Grey Amber.

1 curtida

Obrigado pelo relatório! Se você atualizar o componente, deverá obter a seguinte correção:

4 curtidas

Muito obrigado por esta reação hiper-rápida! A correção funciona.

PS: por favor, adicione a tag #voting, este componente é bom demais para escondê-lo. :slight_smile:

3 curtidas

Existe um componente de tema que faz com que o indicador de voto em tópicos individuais tenha a mesma aparência?

1 curtida

Este componente também oculta as colunas que mostram participantes, visualizações e tempo de atividade. Seria bom ter isso separado, para que se pudesse facilmente habilitar apenas a mudança de estilo de votação sem também ocultar essas?

Ou — mover

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

para dentro de @if $use_compact_width == "true" {
?

2 curtidas