Componente de Lista de Tópicos MD

Uma apresentação mais leve da lista de tópicos para seu fórum Discourse. A coluna de postadores foi removida, mas algumas informações foram adicionadas (nome e avatar do último postador) na coluna de atividade e abaixo do título do tópico (nome do criador do tópico e um pequeno emoji para as tags).


Compatibilidade

Este componente de tema é compatível com as funções de tags, links em destaque e qualquer função disponível na versão original da lista de tópicos. Qualquer estilo de apresentação de categoria (lista com marcadores, barra, caixa) deve funcionar com este componente.

O componente de tema foi testado em algumas paletas de cores e funcionará com temas claros, neutros ou escuros.

Infelizmente, o componente de tema pode não funcionar com plugins que já alteram a apresentação da lista de tópicos, como as Pré-visualizações da Lista de Tópicos.

Avise-me se tiver algum problema!

29 curtidas

Adoro este componente.
Existe alguma maneira fácil de fazer o div poster-info ficar exatamente como na captura de tela?
Acho que isso o torna mais legível

Nome do autor acima :arrow_up:
Data relativa abaixo :arrow_down:
image

2 curtidas

Na verdade, não é uma má ideia; posso acabar usando isso por padrão :thinking:

Mas, por enquanto, você pode editar o componente, na parte do cabeçalho, por volta das linhas 60 a 69.

Original

<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
<br />
<span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
</div>

O que você quer usar

<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
<br />
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
</div>

Você precisará editar isso após cada atualização, mas o componente não será alterado muito.

Você também pode fazer um fork do repositório, editar o arquivo e usar essa versão no seu fórum, se estiver familiarizado com o GitHub.

5 curtidas

Testei essa alteração no meu fórum e acho que é uma boa ideia. Fiz um upgrade.

Se preferir o que usávamos anteriormente, me avise. Posso criar uma versão alternativa.

6 curtidas

@Steven, parou de funcionar com a última atualização? Aqui está quebrado.

1 curtida

Eu ainda não notei, geralmente faço minhas atualizações no fim de semana. Vou verificar isso hoje à noite.

Atualizei um fórum e verifiquei os logs; não tive nenhum problema.

Você pode compartilhar uma captura de tela do problema no seu fórum? Se eu me lembro corretamente, você usa um tema muito personalizado; acho que pode ser por causa disso. Mas vou ver o que posso fazer.

3 curtidas

Eu não uso mais esse tema.

Testei no Material Design sem personalizações de CSS e não consegui fazê-lo funcionar em nenhum tema. Talvez seja um plugin?

Se você tiver pré-visualizações de tópicos do Discourse, por exemplo, o componente não funcionará, pois ele também altera o template topic-list-item.raw.

1 curtida

Você está certo sobre isso. Mas eu só o uso para News Plugin 📰, que requer a Prévia do Tópico.

Então tenho que escolher entre os dois. :sleepy:

Fica incrível no meu fórum e o pequeno emoji de tag é legal, haha, ótimo trabalho!

2 curtidas

Estou usando isso também na minha instância. Parece muito mais limpo. Nunca entendi o conceito dos 5 avatares, parece muito poluído.

1 curtida

Acabei de atualizar para a versão mais recente do Discourse (2.5.0.beta2) e parece que os avatares dos usuários nas postagens desapareceram.

Link do fórum: https://techscammersunited.com/

1 curtida

Vou verificar isso amanhã. Atualizei há alguns dias e estava tudo bem; talvez algo tenha mudado.

3 curtidas

Obrigado pelo relatório, o problema foi corrigido. Você pode atualizar o componente e reativá-lo.

3 curtidas

Ah, valeu pela correção rápida, cara! Está funcionando perfeitamente agora :slight_smile:

Atualizei para a versão mais recente e meus avatares desapareceram (2.4.1).
Fui obrigado a desativar este componente por enquanto.

Você também precisa atualizar o Discourse e isso será corrigido.

2 curtidas

Infelizmente para mim, isso significa muitas atualizações (18 plugins personalizados), então eu costumo atualizar a cada 3 ou 4 meses. Acho que não tenho sorte :smiley:

Há alguma forma de acessar a versão anterior?