Estilo de categoría de votación alternativa

Este componente de tema ofrece estilos alternativos para cualquier categoría especificada que utilice el plugin Discourse Voting.

Instalación

Enlace al repositorio
https://github.com/discourse/discourse-alternative-voting-category-style

Si no estás familiarizado con los componentes de tema y cómo instalarlos, consulta la guía de instalación de temas. Y si deseas aprender más sobre los temas de Discourse, echa un vistazo a esta guía.

Vista previa

La idea general se basa en este boceto creado por @erlend_sh.

Características destacadas

  • Vista compacta
  • Conteo de votos más destacado
  • Icono de color para indicar que has votado en el tema

Configuración

Actualmente hay una configuración utilizada para especificar a qué categorías se les aplicará el estilo:

Personalizaciones adicionales

Si deseas personalizar el aspecto de etiquetas específicas dentro de tu tema de votación (consulta la etiqueta “EN PROGRESO” en la imagen de vista previa anterior), puedes crear un componente adicional y modificar el siguiente CSS para adaptarlo a tus necesidades:

.voting-category.list-container {
    .topic-list-item:not(.about-topic) {
        // Estilos comunes para todas las etiquetas 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;
        }
        // Estilos específicos para etiquetas individuales
        [data-tag-name="in-progress"] {
            color: #9e63d0;
        }
        [data-tag-name="my-tag-one"] {
            color: #5bd04a;
        }
        [data-tag-name="my-tag-two"] {
            color: #5f5dd0;
        }
    }
}

Futuro

Lo único que podrías notar que falta en el boceto original es un extracto del tema debajo del título del tema. Esta característica requeriría cambios en el núcleo o en el plugin de votación, por lo que deberá esperar por ahora.

Como siempre, por favor házmelo saber si experimentas algún problema.

Muchas gracias a @simon y @erlend_sh por trabajar conmigo en esto :heart_eyes:

38 Me gusta

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 Me gusta

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 Me gusta

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 Me gusta

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 Me gusta

This component has been updated! The changes include:

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

¿Este componente sigue funcionando?

Uso una instancia de free.discourse.group y estoy buscando una alternativa para el plugin de votación de Discourse

El componente sigue funcionando, pero está pensado para usarse junto con el plugin de votación, no en su lugar. Solo ofrece una opción de estilo alternativo para el plugin de votación.

3 Me gusta

Ah, ahora lo entiendo, gracias por tu atención :hugs:

3 Me gusta

¿Alguien lo está usando activamente? Lo probé con la versión actual del plugin de votación (0.5), se ve bastante bien, pero parece que ya no funciona, al menos en nuestra instancia.

¿Podrías detallar qué es lo que no funciona? Acabo de probarlo y todo parece estar en orden. Cabe mencionar que este componente es solo de estilo por ahora. No puedes votar directamente desde la lista de temas.

2 Me gusta

¡Gracias por la respuesta inmediata!!!

Primero

Teniendo en cuenta que este componente es puramente de estilo por ahora. No puedes votar directamente desde la lista de temas.

Vale, no me había dado cuenta de eso. Pensé que permitiría exactamente eso: votar desde la lista de temas. Bueno, es bueno saberlo. Tendré que reevaluar entonces.

Segundo

No parece mostrar los datos/votos reales. Aquí hay dos imágenes: una con el estilo activado y otra desactivada.


Sospeché que podría haber un conflicto con el tema utilizado, pero incluso usando otro, parece que no se resuelve el problema.

1 me gusta

Hmm, acabo de probarlo en un sitio actualizado y no tengo ningún problema con el recuento de votos ni con el indicador “He votado”:

¿Podrías verificar si hay algún error en la consola de tu navegador? ¿Has probado con un tema predeterminado nuevo sin otros componentes o personalizaciones agregados?

2 Me gusta

Deberías poder agregar una regla CSS a un tema o componente para solucionarlo. No tengo el plugin de Calificaciones instalado para probarlo, pero creo que debería ser algo así:

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

De hecho, estoy trabajando en este componente en este momento (¡no se había modificado en mucho tiempo!), así que veré si puedo hacer que cualquier contenido personalizado de la lista de temas se posicione correctamente de forma predeterminada.

3 Me gusta

Perfecto, gracias :ok_hand:

1 me gusta

He instalado este componente de tema y lo he habilitado en dos categorías. Una se ve con errores y la otra se ve bien. La diferencia es que el nombre de la categoría aparece en la lista, superponiéndose con el recuento de votos. La única diferencia que se me ocurre es que la categoría con el error tiene subcategorías, mientras que la otra no las tiene.

Con errores, tiene subcategorías:

Bien, sin subcategorías:

Por si sirve de ayuda, este es el tema predeterminado con la paleta de colores Grey Amber.

1 me gusta

¡Gracias por el informe! Si actualizas el componente, deberías obtener la siguiente corrección:

4 Me gusta

¡Muchas gracias por esta reacción hiperrápida! La solución funciona.

PD: por favor, añade la etiqueta #voting, este componente es demasiado bueno para ocultarlo. :slight_smile:

3 Me gusta

¿Hay algún componente temático que haga que el indicador de votos en temas individuales tenga el mismo aspecto?

1 me gusta

Este componente también oculta las columnas que muestran los participantes, las vistas y el tiempo de actividad. Sería bueno tener eso separado, para que uno pudiera habilitar fácilmente solo el cambio de estilo de votación sin ocultar también esos?

O — mover

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

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

2 Me gusta