Fma965
May 9, 2022, 8:17pm
1
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
Fma965
May 9, 2022, 8:43pm
3
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
Fma965
May 9, 2022, 8:55pm
5
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
1 Like
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
Seems to be added server-side, I had an engineer help troubleshoot and more specifically it seems to come from:
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
3 Likes
Fma965
May 10, 2022, 6:53pm
7
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.
Fma965
May 10, 2022, 6:57pm
9
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.
committed 05:18PM - 01 Jun 22 UTC
The server-side implementation had unintentionally changed to include `-{id}` at… the end of the body class name. This change meant that the JS client was unaware of the class, and didn't remove it when navigating away from the category page.
This commit fixes the server-side implementation to match the client
4 Likes
Fma965
June 2, 2022, 4:04pm
14
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?
Fma965
June 2, 2022, 4:28pm
16
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
Fma965
June 18, 2022, 4:51pm
20
This + the core fix seems to work. thanks
3 Likes
