Lista de Tópicos do Discourse: Autor e Participantes

| :information_source: | Resumo | Adiciona um autor de tópico à coluna da esquerda das páginas de lista de tópicos, bem como uma opção para exibir apenas o pôster mais recente na coluna de pôsteres padrão. O avatar do autor também pode ter seu tamanho e formato ajustados. |
| :eyeglasses: | Prévia | :link:Theme Creator |
| :hammer_and_wrench: | Repositório | :link:GitHub - Lillinator/discourse-topic-list-author-posters: Discourse theme component for topic list views showing topic author in the first column and option to show last poster in the middle column. |
| :question: | Guia de Instalação | Como instalar um tema ou componente de tema |
| :open_book: | Novo em Temas do Discourse? | Guia para iniciantes sobre como usar Temas do Discourse |

Instalar este componente de tema

:woman_technologist:t2: Visão Geral

Este componente de tema do Discourse insere um 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 o formato e o tamanho do avatar. Além disso, o avatar do autor não aparecerá como o primeiro avatar na lista de pôsteres.

Há também uma configuração para fazer com que a coluna de avatares dos pôsteres exiba apenas o pôster mais recente, mas somente se houver mais de um participante no tópico. Assim, o avatar do autor só aparecerá se houver outros pôsteres 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 mais recentes estiverem ativadas (ou seja: Categorias com tópicos mais recentes), e também há opções de tamanho e formato de avatar.

Há também uma opção para alinhar verticalmente o conteúdo da linha no topo ou no meio.

Em visualização de tela pequena (tamanho móvel), o autor aparecerá onde está o avatar do pôster mais recente.

Este tópico funciona bem com Excertos da Lista de Tópicos e resumos do Discourse AI gists.

:gear: 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 da lista de tópicos Tamanho dos avatares na coluna de avatar do autor das rotas da página de lista de tópicos - small (pequeno), medium (médio) ou large (grande).
Raio da borda do avatar do autor da 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 pôster na lista de tópicos Mostrar apenas o avatar do último pôster na coluna de pôsteres, mas somente se houver mais de um participante no tópico.
Alinhar verticalmente o topo da linha Opção para alinhar as linhas no topo ou no meio
Mostrar autor na página de categorias Mostrar o avatar do autor em vez do último pôster nas listas de tópicos na página de categorias.
Tamanho do avatar da página de categoria Tamanho dos avatares na coluna de avatar do autor nas listas de tópicos da página de categorias - small (pequeno), medium (médio) ou large (grande).
Raio da borda do avatar da página de categoria Arredondamento do avatar nas categorias: 0% = quadrado → 50% = círculo. tab_style = cantos esquerdos arredondados

:camera_flash: Capturas de Tela

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

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

Com configurações padrão:

Formato de avatar tab_style grande com gists de resumo expandidos:

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

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

Capturas de tela da Página de Categoria mostrando 2 tamanhos e formatos diferentes de avatares com autor ou último pôster.

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

Avatares grandes no formato tab_style e Show_author_on_categories_page desativado:

Captura de tela da visualização de tamanho móvel

Com avatares de autor no formato tab_style:


:backhand_index_pointing_right:t3: Observações

  • Insere o avatar do autor e altera a coluna de pôsteres onde esperado nas guias da página de perfil.
  • O comportamento móvel é o mesmo do 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 é muito compatível com o tema horizon. :slight_smile:

:bulb: Possíveis tarefas futuras

  • Adicionar alternância de desativação móvel?
  • Exceções de categoria e tag?
  • Suporte da esquerda para a direita?
  • Formatar avatares de pôster?

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

13 curtidas

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

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.

1 curtida

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

1 curtida

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.

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.

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.

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.

3 curtidas

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!

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

aqui está :slight_smile:

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


4 curtidas