Lista de temas de Discourse: autores y participantes

[Lilly]

	Resumen	Añade al autor del tema en la columna izquierda de las páginas de listas de temas, así como una opción para mostrar solo al último poster en la columna de posters predeterminada. El avatar del autor también puede ajustarse en tamaño y forma.
	Vista previa	https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
	Repositorio	https://github.com/Lillinator/discourse-topic-list-author-posters
	Guía de instalación	Cómo instalar un tema o un componente de tema
	¿Nuevo en los temas de Discourse?	Guía para principiantes sobre el uso de los temas de Discourse

Instalar este componente de tema

Descripción general

Este componente de tema de Discourse inserta el avatar del autor del tema en la primera columna de todas las rutas de listas de temas y cuenta con configuraciones que permiten al administrador especificar la forma y el tamaño del avatar. Además, el avatar del autor no se mostrará como el primer avatar en la lista de posters.

También existe una configuración para que la columna de avatares de posters muestre solo al último (más reciente) poster, pero solo si hay más de un participante en el tema. Por lo tanto, el avatar del autor solo se mostrará si hay otros posters en el tema.

Además, los administradores también pueden optar por mostrar al autor del tema en la página de categorías cuando están habilitadas las vistas de listas de temas más recientes (es decir: Categorías con temas más recientes), y también hay opciones de tamaño y forma de avatar.

También hay un interruptor para alinear verticalmente el contenido de la fila en la parte superior o en el medio.

En vistas de pantalla pequeña (tamaño móvil), el autor aparecerá donde está el avatar del último poster.

Este componente funciona bien con Extractos de listas de temas y Resúmenes de gists con IA de Discourse.

Configuraciones

Captura de pantalla de las configuraciones con las opciones predeterminadas en la página de administración del componente

Configuraciones	Descripción
Tamaño del avatar del autor en la lista de temas	Tamaño de los avatares en la columna de avatar del autor de las rutas de páginas de listas de temas: pequeño, medio o grande.
Radio del borde del avatar del autor en la lista de temas	Redondeo del avatar en las rutas de páginas de listas de temas: 0% = cuadrado → 50% = círculo. tab_style = esquinas redondeadas a la izquierda
Mostrar solo al último poster en la lista de temas	Mostrar solo el avatar del último poster en la columna de posters, pero solo si hay más de un participante en el tema.
Alinear verticalmente la fila hacia arriba	Interruptor para alinear las filas hacia arriba o hacia el medio
Mostrar autor en la página de categorías	Mostrar el avatar del autor en lugar del último poster en las listas de temas de la página de categorías.
Tamaño del avatar en la página de categorías	Tamaño de los avatares en la columna de avatar del autor en las listas de temas de la página de categorías: pequeño, medio o grande.
Radio del borde del avatar en la página de categorías	Redondeo del avatar en la página de categorías: 0% = cuadrado → 50% = círculo. tab_style = esquinas redondeadas a la izquierda

Capturas de pantalla

Aquí hay algunas capturas de pantalla con diferentes configuraciones de tamaño y forma de avatar, también mostrando resúmenes de gists con IA expandidos.

Capturas de pantalla de varias páginas de listas de temas con diferentes configuraciones del componente habilitadas, mostrando modos de gists compactos y expandidos, y barra lateral expandida/colapsada

Con la configuración predeterminada:

Forma de avatar tab_style grande con resúmenes de gists expandidos:

Avatares pequeños con forma de radio de borde del 15% y Topic_list_show_last_poster_only habilitado:

Avatares de tamaño medio con radio de borde del 0% (cuadrado) con Topic_list_show_last_poster_only habilitado y resúmenes de gists expandidos:

Capturas de pantalla de la página de categorías mostrando 2 tamaños y formas diferentes de avatares con autor o último poster.

Configuraciones predeterminadas del componente, con avatares redondos de tamaño medio y Show_author_on_categories_page habilitado:

Avatares tab_style de tamaño grande y Show_author_on_categories_page deshabilitado:

Captura de pantalla de la vista en tamaño móvil

Con avatares de autor tab_style:

---

Notas

• Inserta el avatar del autor y cambia la columna de posters donde se espera en las pestañas de la página de perfil.
• El comportamiento en móviles es el mismo que el predeterminado en las listas del pie de página de temas (temas sugeridos/relacionados) y en las páginas de pestañas de perfil y bandeja de entrada.
• No es realmente compatible con el tema horizon.

---

Posibles tareas futuras

• ¿Añadir un interruptor para deshabilitar en móviles?
• ¿Excepciones para categorías y etiquetas?
• ¿Soporte de izquierda a derecha?
• ¿Dar forma a los avatares de los posters?

Como siempre, gracias a @Moin por la idea, los comentarios y la ayuda para depurar.

[jordanjay29]

¡Gracias por crear esto, resolvió instantáneamente un problema potencial para mí!

@Lilly

Mejoras adicionales de estilo

Quizás esto ya esté planeado, quería mencionar que noté que el relleno y la alineación de la columna del avatar del póster a la izquierda tienen una sangría extraña (que no está presente en el móvil con el componente deshabilitado, a modo de comparación). Parece que el atributo text-align de td.posters también está afectando a la imagen.
La alineación de la lista de avatares de los pósters también cambia cuando está habilitada, y parece que la alineación de td.topic-list-data está anulando la predeterminada. Es bastante fácil hacer cambios de estilo por mi parte si estás de acuerdo con esto por lo demás.
Componente fantástico, gracias de nuevo.

[Lilly]

gracias por el informe, acabo de implementar una corrección. actualiza el componente y avísame si eso ayuda.

[jordanjay29]

La alineación izquierda del avatar es mejor en el escritorio. Agregué este CSS para ajustar la columna del póster central a mis preferencias:

td.posters.topic-list-data {
    vertical-align: middle !important;
}

Creo que su futura desactivación móvil también ayudará, porque el estilo utiliza un poco más de espacio en blanco del necesario.

[Lilly]

[quote=“jordanjay29, post:4, topic:394364”]La alineación a la izquierda del avatar es mejor en el escritorio. Agregué este CSS para ajustar la columna del póster del medio a mis preferencias:

[/quote]

La alineación vertical superior es intencional para ser consistente con el resto de la tarjeta del tema y no se cambiará.

No hice ningún cambio en el móvil, pero lo revisaré.

[jordanjay29]

Es posible que la alineación vertical se haya aplicado de forma demasiado amplia en su CSS y probablemente solo necesite dirigirse a la custom-author-column donde está utilizando td.topic-list-data. Sospecho que cambiar el objetivo a td.custom-author-column.topic-list-data lo resolverá y eliminará la necesidad de estilos personalizados para solucionarlo de mi parte.

[Lilly]

No, pretendía que la columna de pósteres estuviera alineada verticalmente arriba junto con todos los demás elementos de la fila. Se ve fuera de lugar alineada en el medio (especialmente si habilitas extractos o resúmenes de IA), pero supongo que es una cuestión de gusto, así que puedes ajustarlo como prefieras.

He subido un pequeño cambio para móvil.

[jordanjay29]

Dado que mi foro no utiliza extractos, gists ni resúmenes de IA, se prefiere la apariencia predeterminada de Discourse. Ese cambio me parece que tendría más sentido en un componente de tema dedicado, pero diferimos y lo he arreglado por mi parte, así que no hay resentimientos.

El aspecto móvil se ve un poco mejor, ¡gracias!

[Lilly]

@jordanjay29 después de pensarlo más, decidí agregar un interruptor de alineación (bastante fácil).

Aquí tienes

Hay una nueva configuración Alinear verticalmente la fila superior que puedes desactivar para obtener el valor predeterminado en el medio. Avísame si eso funciona para ti.