CSS spécifique à la catégorie ne se rafraîchit pas sauf F5

Bug
1

Salut tout le monde,

J’ai ce CSS spécifique

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;
        }
    }

Cela fonctionne très bien pour masquer de nombreux éléments dans une catégorie « documentation » (oui, je sais qu’un plugin de documentation existe, je trouve la mise en page native meilleure, cependant). Mon problème est que lorsque je clique par exemple de « Ford » à « Documentation », le CSS ne se rafraîchit pas et donc mes éléments ne sont pas masqués, sauf si je rafraîchis toute la page avec F5 / Ctrl + R.

Y a-t-il quelque chose que j’ai manqué pour que cela fonctionne ?
La même chose s’applique dans l’autre sens également.
Vous pouvez visiter n’importe quelle catégorie sur https://community.cyanlabs.net, puis aller à la documentation et vous verrez les éléments CSS masqués s’afficher toujours.

1 « J'aime »
2

Il semble que vous utilisiez le thème Air, qui inclut le composant de thème Discourse Loading Slider.

Si vous désactivez ce composant depuis admin > customize > themes > components, puis réessayez… cela change-t-il quelque chose ? Parfois, ce composant peut causer un problème où les classes persistent entre les pages jusqu’à ce que vous actualisiez.

4 « J'aime »
3

Merci pour votre réponse,

Je viens de tester ceci et malheureusement, cela n’a fait aucune différence dans ce cas.

S’il n’y a rien de simple, je vais simplement vérifier la classe du corps en javascript en utilisant api.onPageChange() mais cela semble un peu étrange.

1 « J'aime »
4

Ah ok… en y regardant de plus près, il semble qu’une classe dynamique soit ajoutée par un thème à la balise body, par exemple category-documentation-21 et category-ford-5… lors des transitions de page, ces classes ne semblent pas être supprimées correctement.

1 « J'aime »
5

EDIT, je vois ce que tu veux dire maintenant, il garde cette classe dans l’élément body pour une raison :thinking:

EDIT2 : j’ai fait une copie du thème sans aucun composant, le même problème persiste, donc ça doit venir d’un plugin ou du cœur.

image
image722×1191 108 KB

Le prix de la solution la plus bancale va à moi :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>

Mais oui, si quelqu’un sait ce qui cause ça, faites-le moi savoir :slight_smile:

1 « J'aime »
6

Cela semble être un bug dans le noyau, je le re-catégorise donc.

Pour reproduire :

  1. Visitez une catégorie comme Support - Discourse meta
  2. Rafraîchissez la page
  3. Basculez vers une autre catégorie
  4. Regardez les classes sur la balise body, la catégorie précédente reste

Screen Shot 2022-05-10 at 2.31.33 PM

Cela semble être ajouté côté serveur, j’ai eu l’aide d’un ingénieur pour le dépannage et plus précisément, cela semble provenir de :

3 « J'aime »
7

Merci pour la mise à jour, pour l’instant mon javascript bancal contourne le problème, comment puis-je suivre l’état de ce bug ?

8

Nous mettrons à jour ce sujet lorsqu’il sera résolu (ou quelque chose d’autre s’y rapportant). Si vous changez votre niveau de suivi sur « Suivre » dans le menu déroulant en bas du sujet, vous serez informé des nouveaux messages.

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

Idéal, j’ignorais s’il y avait un problème sur GitHub ou autre, je suis déjà ce sujet donc je resterai informé.

Merci encore pour votre aide.

13

Cela devrait être corrigé dans ce commit, donc la prochaine fois que vous mettrez à jour Discourse, les classes de catégorie devraient être ajoutées/supprimées comme prévu.

4 « J'aime »
14

Merci, les classes sont correctement mises à jour maintenant mais le CSS ne s’applique toujours pas lors du passage d’une catégorie à l’autre

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

naviguez entre les catégories, cela ne fonctionnera pas correctement.

1 « J'aime »
15

oh hmm, c’est inattendu… est-ce que ce CSS est ajouté avec du JS ?

16

Non, juste du CSS simple dans les fichiers common.css ou desktop.css, j’ai essayé les deux.

19

Ah ok, je viens de comprendre… class^= vérifie le début de la classe, et la catégorie n’est pas toujours la première classe dans la liste.

Si vous mettez à jour avec body[class*="category-documentation"], cela devrait fonctionner, car cela vérifie le nom de la classe où qu’il apparaisse dans la liste.

5 « J'aime »
20

Ceci + la correction principale semble fonctionner. Merci.

3 « J'aime »