Category specific CSS not refreshing unless F5

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.

1 Like

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.

4 Likes

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

1 Like

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.

1 Like

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

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

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

1 Like

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

Screen Shot 2022-05-10 at 2.31.33 PM

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

3 Likes

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

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.

Screen Shot 2022-05-10 at 2.53.53 PM

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.

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

4 Likes

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

move around categories, it won’t work correctly.

1 Like

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

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

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.

5 Likes

This + the core fix seems to work. thanks

3 Likes