Como mostrar o portão mais adiante na postagem?

Dev
1

Obrigado pelo ótimo componente! Seria possível mostrar o portão mais adiante no post? (Nossos tópicos começam todos com uma imagem e gostaríamos de mostrar uma boa parte do texto ou até mesmo definir um local no tópico onde o portão aparece.) Qualquer dica (por exemplo, hacks de CSS) é bem-vinda!

2 curtidas
2

Sim, eu estava pensando em algo semelhante - talvez uma configuração de porcentagem que pudesse ser alterada.

3

Atualmente, o conteúdo está oculto usando a seguinte técnica (entre outras):

  • A rolagem é desabilitada
  • A altura do conteúdo da página é definida como 100%

Você poderia ajustar essas coisas. Por exemplo:

body.topic-in-gated-category {
    height: 200%;
}

Isso permitirá mais rolagem:

Isso poderia ser mais bonito, talvez reduzindo a área azul para ser mais curta (¼ ou ⅓ da tela), encurtando o gradiente branco também…

Você também pode modificar isso:

.topic-in-gated-category .post-stream {
    max-height: 150vh;
    overflow: hidden;
}

Escolher quantos posts mostrar com CSS é complicado porque eles estão no mesmo nível de pequenas ações, lacunas de tempo e assim por diante.
Portanto, usar CSS como:

.post-stream > *:nth-child(n+6) {
    display: none;
}

Nem sempre mostrará o mesmo número de posts de um tópico para outro.

4 curtidas
4

Isso parece que será muito útil para o nosso fórum. Você pode me dizer onde este código personalizado deve ser adicionado, por exemplo, nas configurações do componente ou no CSS do tema?

Muito obrigado desde já.

5

Oi Jaime,

O CSS do seu tema ou um CSS de componente separado – ambas são escolhas aceitáveis. Usar um componente permite fácil anexação a múltiplos temas, essa seria a forma preferida.

1 curtida
6

Obrigado @Arkshine. E depois de investigar um pouco mais, acho que preciso clonar ou fazer um fork do repositório para este componente e, em seguida, fazer minhas edições diretamente no CSS comum antes de importar a versão editada de volta para o Discourse? Isso está correto?

1 curtida
7

Se você quiser alterar algum CSS, pode criar um novo componente facilmente através da interface do usuário.

  1. Vá em Admin → Personalizar
  2. Clique em Instalar
  3. Em seguida, escolha Criar Novo. O tipo deve ser Componente.
    image
    image519×357 5.62 KB

É isso! Anexe-o ao seu tema; então, você poderá Editar CSS/HTML.

Normalmente, você gostaria de fazer um fork se quisesse contribuir para o componente original no Github (criando um Pull Request) ou se quisesse criar sua própria versão. Se fizer isso, você não receberá nenhuma atualização do componente original; isso provavelmente não é o que você quer aqui!

1 curtida
8

Obrigado novamente. O problema, eu acho, é que a propriedade CSS no meu componente personalizado também estará no componente base do repositório no Github.

A menos que haja uma maneira de especificar que um componente deve substituir o outro, parece necessário apenas criar um clone do repositório e usar minha versão editada (que está funcionando agora, só não receberei atualizações, como você diz).

9

Se o seu CSS não sobrescrever o componente original, você pode adicionar !important a uma regra. Isso deve funcionar.

.topic-in-gated-category .post-stream {
    max-height: 150vh !important;
    overflow: hidden !important;
}
1 curtida
10

Isso funciona perfeitamente, obrigado novamente pela ajuda!

1 curtida
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.