Category specific CSS not refreshing unless F5

Fma965 · May 9, 2022, 8:17pm

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 · May 9, 2022, 8:36pm

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 · May 9, 2022, 8:43pm

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 · May 9, 2022, 8:52pm

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 · May 9, 2022, 8:55pm

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 · May 10, 2022, 6:38pm

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

To repro:

Visit a category like support - Discourse Meta
Refresh the page
Switch to another category
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:

github.com

discourse/discourse/blob/main/app/helpers/application_helper.rb#L184

      
        
              list << 'rtl' if rtl?
              list << text_size_class
              list << 'anon' unless current_user
              list.join(' ')
            end
            
            
def body_classes
              result = ApplicationHelper.extra_body_classes.to_a
            
            
  if @category && @category.url.present?
                result << "category-#{@category.url.sub(/^\/c\//, '').gsub(/\//, '-')}"
              end
            
            
  if current_user.present? &&
                  current_user.primary_group_id &&
                  primary_group_name = Group.where(id: current_user.primary_group_id).pluck_first(:name)
                result << "primary-group-#{primary_group_name.downcase}"
              end
            
            
  result.join(' ')
            end

Fma965 · May 10, 2022, 6:53pm

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

awesomerobot · May 10, 2022, 6:55pm

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

Fma965 · May 10, 2022, 6:57pm

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 · June 2, 2022, 3:35pm

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

Fma965 · June 2, 2022, 4:04pm

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.

awesomerobot · June 2, 2022, 4:22pm

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

Fma965 · June 2, 2022, 4:28pm

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

awesomerobot · June 14, 2022, 8:57pm

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 · June 18, 2022, 4:51pm

This + the core fix seems to work. thanks

sam · June 20, 2022, 2:09am