CSS específico da categoria não atualiza a menos que F5

Bug
1

Olá pessoal,

Eu tenho este CSS específico

body[class^="category-documentation"] {
        .topic-list .topic-list-header .posts,
        .topic-list .topic-list-header .views,
        .topic-list .topic-list-body .posts,
        .topic-list .topic-list-body .views,
        .topic-list .topic-list-body .posters,
        .topic-list .topic-list-header .posters
        {
            display: none !important;
        }

        .topic-list .topic-list-body .main-link,
        .topic-list .topic-list-header .topic-list-data
        {
            width: 90% !important;
        }

        .topic-list .topic-list-header .activity, .full-width .contents .topic-list .topic-list-body .activity {
            width: 10% !important;
        }

        .topic-list .topic-excerpt {
            display: none !important;
        }
    }

Isso funciona muito bem para ocultar muitos elementos em uma categoria de “documentação” (sim, eu sei que existe um plugin de docs, mas acho o layout nativo melhor) meu problema é quando clico de, digamos, “Ford” para “Documentação”, o CSS não é atualizado e, portanto, minhas coisas não são ocultadas, a menos que eu atualize a página inteira com F5 / Ctrl + R.

Há algo que estou perdendo para permitir que isso funcione?
O mesmo se aplica ao contrário também.
Você pode visitar qualquer categoria em https://community.cyanlabs.net e depois ir para documentação e verá os elementos CSS ocultos ainda aparecendo.

1 curtida
2

Parece que você está usando o Tema Air, que inclui o componente de tema Discourse Loading Slider.

Se você desabilitar esse componente em admin > customize > themes > components e tentar novamente… isso muda alguma coisa? Às vezes, esse componente pode causar um problema onde as classes permanecem entre as páginas até que você atualize.

4 curtidas
3

Obrigado pela sua resposta,

Acabei de testar isso e, infelizmente, isso não fez nenhuma diferença neste caso.

Se não houver algo simples, vou apenas verificar a classe do corpo em javascript usando api.onPageChange(), mas parece um pouco estranho.

1 curtida
4

Ah, ok… Dando uma olhada mais de perto, parece que há uma classe dinâmica sendo adicionada pelo tema à tag body, como category-documentation-21 e category-ford-5… nas transições de página, essas classes não parecem ser removidas corretamente.

1 curtida
5

EDIT, agora entendi o que você quis dizer, por algum motivo ele está mantendo essa classe no elemento body :thinking:

EDIT2: fiz uma cópia do tema sem componentes, o mesmo problema persiste, então deve ser em um plugin ou no core.

image
image722×1191 108 KB

O prêmio de solução mais gambiarra vai para mim :smiley:

<script type="text/discourse-plugin" version="0.8.19">
  api.onPageChange((url) => {
        if (url.indexOf("/c/documentation/") >= 0) {
            $("<style id='documentationworkaround'>.topic-list .topic-list-body .posters,.topic-list .topic-list-body .posts,.topic-list .topic-list-body .views,.topic-list .topic-list-header .posters,.topic-list .topic-list-header .posts,.topic-list .topic-list-header .views{display:none!important}.topic-list .topic-list-body .main-link,.topic-list .topic-list-header .topic-list-data{width:90%!important}.full-width .contents .topic-list .topic-list-body .activity,.topic-list .topic-list-header .activity{width:10%!important}.topic-list .topic-excerpt{display:none!important}</style>").appendTo("head")
        } else {
            $("#documentationworkaround").remove();
        }

    });
</script>

Mas sim, se alguém souber o que está causando isso, por favor me avise :slight_smile:

1 curtida
6

Parece ser um bug no core, então estou reclassificando-o.

Para reproduzir:

  1. Visite uma categoria como Support - Discourse Meta
  2. Atualize a página
  3. Mude para outra categoria
  4. Dê uma olhada nas classes na tag do corpo, a categoria anterior permanece

Screen Shot 2022-05-10 at 2.31.33 PM

Parece ser adicionado do lado do servidor, tive um engenheiro ajudando a solucionar e, mais especificamente, parece vir de:

3 curtidas
7

Obrigado pela atualização, por enquanto meu javascript improvisado contorna o problema, como posso acompanhar o status deste bug?

8

Atualizaremos este tópico quando ele for corrigido (ou algo mais relacionado). Se você alterar seu nível de acompanhamento para “seguir” no menu suspenso na parte inferior do tópico, você será notificado sobre novas postagens.

Screen Shot 2022-05-10 at 2.53.53 PM
Screen Shot 2022-05-10 at 2.53.53 PM390×136 10.3 KB

9

Ótimo, não sabia se havia um problema no GitHub ou algo assim, já estou acompanhando este tópico, então me manterei atualizado.

Obrigado novamente pela sua ajuda.

13

Isso deve ser corrigido neste commit, então na próxima vez que você atualizar o Discourse, as classes de categoria deverão ser adicionadas/removidas conforme o esperado.

4 curtidas
14

Obrigado, as classes foram atualizadas corretamente agora, mas o CSS ainda não está sendo aplicado ao alternar entre as categorias

body[class^="category-documentation"] {
        .topic-list .topic-excerpt, .topic-list .topic-list-body .posts, .topic-list .topic-list-header .posts {
            display: none !important
        }
    }

navegue pelas categorias, não funcionará corretamente.

1 curtida
15

oh hmm, isso é inesperado… isso é CSS adicionado com JS?

16

Não, apenas CSS simples nos arquivos common.css ou desktop.css, tentei ambos.

19

Ah ok, isso acabou de me ocorrer… class^= verifica o início da classe, e a categoria nem sempre é a primeira classe na lista.

Se você atualizar para body[class*="category-documentation"] isso deve funcionar, isso verifica o nome da classe onde quer que ele apareça na lista.

5 curtidas
20

Isso + a correção principal parece funcionar. obrigado

3 curtidas