Lista de temas: autores y participantes

[Lilly (Lillian)]

	Resumen	Añade al autor del tema en la columna izquierda de las páginas de lista de temas, así como una opción para mostrar únicamente al último participante en la columna de participantes 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/topic-list-author-posters
	Guía de instalación	Cómo instalar un tema o componente de tema

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 lista 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 aparecerá como el primer avatar en la lista de participantes.

También existe una configuración para que la columna de avatares de participantes muestre únicamente al último (más reciente) participante, 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 participantes en el tema.

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

También hay un interruptor para alinear verticalmente el contenido de la fila arriba o en el centro.

En vistas pequeñas (tamaño móvil), el autor aparecerá donde normalmente se muestra el avatar del último participante.

Este componente funciona bien con Extractos de lista de temas y resúmenes de gists de Discourse AI.

Configuración

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

Configuración	Descripción
Tamaño del avatar del autor en la lista de temas	Tamaño de los avatares en la columna del avatar del autor en las rutas de la página de lista de temas: pequeño, mediano o grande.
Radio de borde del avatar del autor en la lista de temas	Redondeo del avatar en las rutas de la página de lista de temas: 0% = cuadrado → 50% = círculo. tab_style = esquinas izquierdas redondeadas
Mostrar solo al último participante en la lista de temas	Muestra únicamente el avatar del último participante en la columna de participantes, pero solo si hay más de un participante en el tema.
Alinear fila arriba verticalmente	Interruptor para alinear las filas arriba o en el centro
Mostrar autor en la página de categorías	Muestra el avatar del autor en lugar del último participante en las listas de temas de la página de categorías.
Tamaño del avatar del tema en la página de categorías	Tamaño de los avatares en la columna del avatar del autor en las listas de temas de la página de categorías: pequeño, mediano o grande.
Radio de 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 izquierdas redondeadas

Capturas de pantalla

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

Capturas de pantalla de varias páginas de lista 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 15% y Topic_list_show_last_poster_only habilitado:

Avatares de tamaño mediano con radio de borde 0% (cuadrado) y 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 participante.

Configuración predeterminada del componente, con avatares redondos de tamaño mediano 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 vista tamaño móvil

Con avatares del autor tab_style:

---

Notas

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

---

Posibles tareas futuras

• ¿Añadir interruptor para deshabilitar en móvil?
• ¿Exenciones de categorías y etiquetas?
• ¿Soporte de izquierda a derecha?
• ¿Forma de avatares de participantes?

Como siempre, gracias a @Moin por la idea, los comentarios y la ayuda con la depuración.

---

Consulta mi otro material de Discourse

[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 (Lillian)]

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 (Lillian)]

[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 (Lillian)]

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 (Lillian)]

@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.