Lista de Tópicos: Autor e Posters

[Lilly (Lillian)]

	Resumo	Adiciona o autor do tópico à coluna esquerda das páginas de lista de tópicos, bem como uma opção para exibir apenas o último postador na coluna de postadores padrão. O avatar do autor também pode ser dimensionado e moldado.
	Pré-visualização	https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
	Repositório	https://github.com/Lillinator/topic-list-author-posters
	Guia de Instalação	Como instalar um tema ou componente de tema

Instale este componente de tema

Visão geral

Este componente de tema do Discourse insere o avatar do autor do tópico na primeira coluna de todas as rotas de lista de tópicos e possui configurações que permitem ao administrador especificar a forma e o tamanho do avatar. Além disso, o avatar do autor não será exibido como o primeiro avatar na lista de postadores.

Há também uma configuração para fazer com que a coluna de avatares dos postadores exiba apenas o último (mais recente) postador, mas apenas se houver mais de um participante no tópico. Assim, o avatar do autor só será exibido se houver outros postadores no tópico.

Além disso, os administradores também podem optar por exibir o autor do tópico na página da categoria quando as visualizações de lista de tópicos recentes estiverem habilitadas (ou seja: Categorias com tópicos recentes), e há opções de tamanho e forma de avatar também.

Há também uma alternância para alinhar verticalmente o conteúdo da linha no topo ou no meio.

Em viewports pequenas (tamanho de celular), o autor aparecerá onde está o avatar do último postador.

Este componente funciona bem com Trechos de Lista de Tópicos e Resumos de gists do Discourse AI.

Configurações

Captura de tela das configurações com opções padrão na página de administração do componente

Configurações	Descrição
Tamanho do avatar do autor na lista de tópicos	Tamanho dos avatares na coluna do avatar do autor nas rotas da página de lista de tópicos - pequeno, médio ou grande.
Raio da borda do avatar do autor na lista de tópicos	Arredondamento do avatar nas rotas da página de lista de tópicos: 0% = quadrado → 50% = círculo. tab_style = cantos esquerdos arredondados
Mostrar apenas o último postador na lista de tópicos	Exibir apenas o avatar do último postador na coluna de postadores, mas apenas se houver mais de um participante no tópico.
Alinhar linha verticalmente no topo	Alternância para alinhar as linhas no topo ou no meio
Mostrar autor na página de categorias	Exibir o avatar do autor em vez do último postador nas listas de tópicos na página de categorias.
Tamanho do avatar do tópico na página de categorias	Tamanho dos avatares na coluna do avatar do autor nas listas de tópicos da página de categorias - pequeno, médio ou grande.
Raio da borda do avatar na página de categorias	Arredondamento do avatar na página de categorias: 0% = quadrado → 50% = círculo. tab_style = cantos esquerdos arredondados

Capturas de tela

Aqui estão algumas capturas de tela com diferentes configurações de tamanho e forma de avatar, também mostrando com resumos de gists da IA expandidos.

Capturas de tela de várias páginas de lista de tópicos com diferentes configurações de componente habilitadas, mostrando modos de gists compactos e expandidos, e barra lateral expandida/colapsada

Com configurações padrão:

Formato de avatar tab_style grande com resumos de gists expandidos:

Avatares pequenos com formato de raio de borda 15% e Topic_list_show_last_poster_only habilitado:

Avatares de tamanho médio com raio de borda 0% (quadrado) com Topic_list_show_last_poster_only habilitado, e resumos de gists expandidos:

Capturas de tela da Página de Categorias mostrando 2 tamanhos e formas diferentes de avatares com autor ou último postador.

Configurações padrão do componente, com avatares redondos de tamanho médio e Show_author_on_categories_page habilitado:

Avatares tab_style de tamanho grande e Show_author_on_categories_page desabilitado:

Captura de tela da visualização em tamanho de celular

Com avatares de autor tab_style:

---

Notas

• Insere o avatar do autor e altera a coluna de postadores onde esperado nas guias da página de perfil.
• O comportamento móvel é o mesmo que o padrão nas listas de rodapé de tópicos (tópicos sugeridos/relacionados) e nas páginas de guias de perfil e caixa de entrada.
• Não é realmente compatível com o tema horizon.

---

Possíveis tarefas futuras

• Adicionar alternância de desabilitação móvel?
• Isenções de categoria e tag?
• Suporte de esquerda para direita?
• Formatar avatares de postadores?

Como sempre, obrigado a @Moin pela ideia, feedback e ajuda na depuração.

---

Confira meus outros recursos do Discourse

[jordanjay29]

Obrigado por criar isto, resolveu instantaneamente um problema potencial para mim!

@Lilly

Melhorias adicionais de estilo

Talvez isso já esteja planejado, mas queria mencionar que notei que o preenchimento e o alinhamento da coluna do avatar do autor à esquerda têm um recuo estranho (que não está presente no celular com o componente desativado, para comparação). Parece que o atributo text-align do td.posters também está afetando a imagem.
O alinhamento da lista de avatares dos autores também muda quando ativado, e parece que o alinhamento de td.topic-list-data está substituindo o padrão. É fácil fazer alterações de folha de estilo por minha conta, se você estiver satisfeito com estes, de qualquer forma.
Componente fantástico, obrigado novamente.

[Lilly (Lillian)]

obrigado pelo relatório, acabei de enviar uma correção. atualize o componente e me avise se isso ajuda.

[jordanjay29]

O alinhamento do avatar à esquerda é melhor no desktop. Adicionei este CSS para ajustar a coluna do pôster do meio às minhas preferências:

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

Acho que sua futura desativação móvel também ajudará, porque o estilo usa um pouco mais de espaço em branco do que o necessário.

[Lilly (Lillian)]

@jordanjay29

O alinhamento esquerdo do avatar é melhor no desktop. Adicionei este CSS para ajustar a coluna do pôster do meio às minhas preferências:\n\n

o alinhamento vertical superior é intencional para ser consistente com o restante do cartão do tópico e não será alterado.

Eu não fiz nenhuma alteração no celular, mas vou verificar.

[jordanjay29]

O alinhamento vertical pode ter sido aplicado de forma muito ampla no seu CSS e provavelmente só precisa ter como alvo a custom-author-column onde você está usando td.topic-list-data. Suspeito que mudar o alvo para td.custom-author-column.topic-list-data resolverá e removerá a necessidade de estilização personalizada para corrigir por minha parte.

[Lilly (Lillian)]

não, eu pretendia que a coluna de pôsteres estivesse alinhada verticalmente no topo, juntamente com todos os outros elementos da linha. Ela parece deslocada alinhada ao meio (especialmente se você ativar trechos ou ai-gists), mas suponho que seja uma questão de gosto, então você pode ajustar como preferir.

Enviei uma pequena alteração para dispositivos móveis.

[jordanjay29]

Como meu fórum não usa trechos, gists ou resumos de IA, a aparência padrão do Discourse é a preferida. Essa mudança parece fazer mais sentido em um componente de tema dedicado para mim, mas discordamos e eu corrigi no meu lado, então sem ressentimentos.

O visual no celular está um pouco melhor, obrigado!

[Lilly (Lillian)]

@jordanjay29 depois de pensar mais sobre isso, decidi adicionar uma opção de alternância de alinhamento (fácil o suficiente).

aqui está

há uma nova configuração Alinhar verticalmente a linha superior que você pode desativar para obter o padrão central. me avise se isso funciona para você.