Como conseguir um layout lado a lado para postagens de tópicos como este?

[lilstranded (LiLStranded-Here)]

Eu adoraria conseguir um layout lado a lado para a minha instância do Discourse (veja a imagem em anexo). Alguém poderia me guiar sobre como fazer isso? Agradeço qualquer ajuda que puderem me dar!

[NateDhaliwal]

Flexbox CSS, talvez? Só de cabeça mesmo. Depois talvez usando a API/requests para buscar outros dados, como a contagem de posts.

[Canapin (Coin-coin le Canapin)]

O que você quer é basicamente substituir barras horizontais por barras verticais?
Elas poderiam ser feitas com um componente de tema, e não podem ser feitas apenas com CSS.
Requererá cuidado para não quebrar nada, e pode não ser trivial de fazer :pensativo:

[lilstranded (LiLStranded-Here)]

Eu tentei algumas experiências básicas com flex box, mas só quebrou o layout.

[lilstranded (LiLStranded-Here)]

Olá @Canapin! Basicamente, quero os detalhes do autor da postagem à esquerda e o conteúdo da postagem à direita, em vez de ficarem um sobre o outro, como no layout padrão do discourse.
Seria útil se houver mods para isso.

[manuel (Manuel Kostka)]

@Canapin

não pode ser feito apenas com css.

Concordo, você não pode reposicionar esses itens de forma limpa com CSS. O avatar e os metadados padrão são organizados separadamente no template:

Eu me pergunto como isso é realmente feito nos fóruns da Epic. Isso é um override de template? Eu não vejo nenhuma saída de plugin neste local:

[Arkshine]

Pelo que vejo, eles re-adicionaram os dados (nome de usuário, etc.) após o conteúdo do widget post-avatar, adicionaram alguma largura ao .topic-avatar e escondem todo o resto com CSS, exceto a data. Deixe-me ver se consigo reproduzi-lo.

[Arkshine]

Você pode experimentar este componente de tema básico: GitHub - Arkshine/discourse-topic-avatar-vertical-layout.

• Apenas visualização para desktop
• É compatível com outras modificações ^[1]
• A contagem de posts não está incluída. Você precisa de um plugin, como este: GitHub - Arkshine/discourse-user-post-count.

Me avise se encontrar problemas.

---

1. Ele move o widget poster-name para baixo do widget post-avatar. Nenhuma outra alteração além de ajustes de CSS. ↩︎

[lilstranded (LiLStranded-Here)]

Funcionou perfeitamente! Muito obrigado, amigo.