Category specific CSS not refreshing unless F5

[Fma965]

Hey guys,

I have this specific CSS

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

This works great for hiding loads of elements on a “documentation” category (yes i know a docs plugin exists, i find the native layout better though) my issue is when i click from say “Ford” to “Documentation” the CSS doesn’t refresh and therefore my stuff is not hidden unless i refresh the whole page with f5 / ctrl + R

Is there something i am missing to allow this to work?

The same applies the other way around also

You can visit any category on https://community.cyanlabs.net and then go to documentation and will see the hidden CSS elements still show.

[awesomerobot (Kris)]

It looks like you’re using the Air Theme, which includes the Discourse Loading Slider theme component.

If you disable that component from admin > customize > themes > components, and then try again… does that change anything? sometimes that component can cause an issue where classes linger between pages until you refresh.

[Fma965]

Thanks for your reply,

I just tested this and unfortunately that hasn’t made any difference in this instance.

If there isn’t something simple then i’m just going to check the body class in javascript using api.onPageChange(() but it does seem a bit odd

[awesomerobot (Kris)]

Ah ok… taking a closer look, it seems like there’s a dynamic class getting added by a theme to the body tag category-documentation-21 and category-ford-5 for example… on page transitions those classes don’t seem to be removed properly.

[Fma965]

EDIT, i see what you mean now, it’s keeping that class in the body element for somereason

EDIT2 : i made a copy of the theme with no components, same issue persists, so it must be in a plugin or core.

Jankiest solution award goes to me

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

But yeah if anyone knows what’s causing it please let me know

[awesomerobot (Kris)]

This appears to be a bug in core, so I’m re-categorizing it.

To repro:

1. Visit a category like Support - Discourse Meta
2. Refresh the page
3. Switch to another category
4. Take a look at the classes on the body tag, the previous category sticks around

Seems to be added server-side, I had an engineer help troubleshoot and more specifically it seems to come from:

app/helpers/application_helper.rb

[Fma965]

Thanks for the update, for now my janky javascript works around the issue, how can i track the status of this bug?

[awesomerobot (Kris)]

We’ll update this topic when it’s fixed (or something else related). If you change your tracking level to “watching” in the dropdown at the bottom of the topic, you’ll get notified of new posts.

[Fma965]

Ideal, didn’t know if there was a github issue or anything, already watching this topic so will stay updated.

Thanks again for your help.

[awesomerobot (Kris)]

This should be fixed in this commit, so the next time you update Discourse the category classes should be added/removed as expected.

https://github.com/discourse/discourse/commit/333c58dd05030cc413b5c3283f35d07b7ec3a67b

[Fma965]

Thanks, the classes are updated correctly now but the css is still not applied when switching between categories

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

Documentation

move around categories, it won’t work correctly.

[awesomerobot (Kris)]

oh hmm, that’s unexpected… is that CSS added with JS?

[Fma965]

Nope, just plan css in the common or desktop.css files, i tried both.

[awesomerobot (Kris)]

@Fma965

body[class^="category-documentation"]

Ah ok, this just dawned on me… class^= checks the beginning of the class, and the category isn’t always the first class in the list.

If you update to body[class*="category-documentation"] it should work, this checks for the class name wherever it appears in the list.

[Fma965]

This + the core fix seems to work. thanks