Cartões de Tópicos

[Discourse]

	Resumo	Topic Cards reestiliza a lista de tópicos para exibi-la como cartões com uma miniatura
	Pré-visualização	Pré-visualização no Discourse Theme Creator
	Repositório	https://github.com/discourse/discourse-topic-cards
	Novo nos Temas do Discourse?	Guia para iniciantes sobre como usar Temas do Discourse

Instale este componente de tema

Como este é um componente de tema official mantido pela equipe do Discourse, Support, Contribute > Bug, Contribute > UX e Contribute > Feature podem ser solicitados nas categorias respectivas aqui no Meta, e marcados com a tag apropriada do componente de tema. Clique em um dos links abaixo para começar.

 Suporte  Bug  UX  Recurso

Este componente de tema pode causar conflitos com outras personalizações da lista de tópicos

Recursos

Este componente se inspira no Topic Thumbnails, simplifica o uso, adiciona trechos e cliques em todo o cartão, e adiciona um pouco de mágica extra de CSS.

• Tornar o cartão inteiro clicável (exceto a foto de perfil do autor original)
• Exibir o trecho
• Exibir uma miniatura do tópico, se disponível
• Exibir a data de publicação
• Remover alguns metadados e tornar os curtidas mais proeminentes

Desktop

Mobile

Configurações

Tradução	Padrão
published	Publicado

Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

[Moin]

A linha azul vertical cobre partes do texto

(Parece não depender do navegador/dispositivo, tentei Edge/Windows, Chrome/Android e Firefox/Android)

[frold]

funcionou de primeira no Chrome no Windows e no Chrome no iPhone 8

[chapoi]

@Moin

A linha azul vertical cobre partes do texto

Certo, esqueci disso. Vou corrigir – obrigado

[jayme]

como me livrar das abas “respostas” e “atividade” sob o botão “+Novo Tópico”?
isso está deixando meu tópico muito curto e fica feio haha

[Lilly (Lillian)]

Olá @jayme, parece que essas abas não fazem parte deste componente e provavelmente foram adicionadas por outro componente ou plugin de tema. Quando carrego um fórum de teste com este componente, essas abas não existem, nem aparecem nas capturas de tela na postagem original. Talvez você precise desativar outros componentes para descobrir qual é, e então, se não houver configuração para essas abas, talvez precise desativá-lo.

[chapoi]

Borda/box-shadow não funciona bem com cards, então tive que improvisar um pouco para obter uma indicação de substituição

UX: replace border with text colour on select with keyboard

[Moin]

@chapoi

então tive que improvisar um pouco para obter uma indicação de substituição

De alguma forma não vejo nenhum indicador agora

[chapoi]

Você está usando os comandos j/k para navegar?

[Moin]

Não, eu apenas usei Tab. Na verdade, usei meu tablet. Depois de usar o botão voltar, a postagem geralmente fica destacada. Isso não aconteceu aqui. Eu só tentei isso no computador para a gravação.

[derak (Cristian Deraco)]

componente de tema incrível!

[Gonerdot]

Tentei instalar este componente em muitos temas, mas ele parece um pouco torto em todos eles. O que estou fazendo de errado?

[chapoi]

Hmmm… difícil dizer. Parece que, de alguma forma, a altura dos cartões está restrita e o conteúdo é maior do que o usual.

Você pode primeiro verificar se não é devido a um conflito com outros componentes ou tema? Vejo que você também tem a barra lateral direita habilitada e isso pode afetar alguns cálculos de tamanho, talvez.

Então, por favor, verifique isso e me diga?

[Gonerdot]

Desativei todos os outros componentes, mas o problema não foi resolvido.

[chapoi]

Estranho! Posso dar uma olhada no fórum em que você o instalou?

[Gonerdot]

bearblog.ru

Mas você precisa alterar o tema para dracula nas configurações do seu perfil.

[chapoi]

Obrigado, darei uma olhada!

[Gonerdot]

Parece-me que o problema pode ser resolvido limitando o número de caracteres na pré-visualização, mas não sei como fazer isso.

[chapoi]

Ok, então os topic-cards precisam de uma altura máxima, caso contrário, você terá problemas como:

Não consigo dizer por que o seu não está se encaixando bem, porque no exemplo no criador de temas eu também posso usar títulos de várias linhas e ainda assim se encaixa:

Pode ter algo a ver com o tamanho da fonte, a família da fonte ou a altura da linha. Infelizmente, isso exigirá alguns ajustes individuais, e não algo para o qual eu possa aplicar uma solução única.

Uma solução possível é, como você disse, limitar o título a apenas 1 linha, o que você poderia fazer adicionando este CSS:

.topic-card {
  .link-top-line {
      max-width: 100%;
      overflow: hidden;

     .title {
        display: block;
        white-space: no-wrap;
      }
   }
}