Category color bar bleeding on mobile

Contribute UX

AI-generated summary

A user, john-lynch, reported an issue with the category color bar on mobile, where it takes on the color of the category below it, unlike the neutral gray color on desktop. codinghorror tagged awesomerobot to investigate and it was revealed that the change was intentional to make category divisions clearer on mobile. awesomerobot provided a CSS override solution for users who prefer the old style. john-lynch thanked the team and may consider using the override.

1

I just upgraded my Discourse install today, and I’m now noticing that the bars separating categories on the category view on mobile have taken on the color of the category below them:

color%20bar
color%20bar510×144 14.5 KB

Note that in a desktop browser, they still adopt the neutral gray color:

color%20bar%202

I’m assuming this is a bug, given the difference between platforms. I certainly prefer the neutral gray bar over the colored bar.

My mobile platform is Chrome 67.0.3396.87 on Android 8.1.0 (moto x4). My desktop platform is Chrome 67.0.3396.99 on Windows 10.

This is possibly related to this topic: https://meta.discourse.org/t/misleading-category-spacers-on-mobile/84070?u=john-lynch. Was this done intentionally to try to differentiate between categories easier? If so, is there any way to get the old style back?

2 Likes
2

I believe this change was intentional, but I’m unsure. @awesomerobot can you have a look? Let’s go what whatever you recommend. I think either way is fine personally.

1 Like
3

Yes, this was intentional — the division between categories wasn’t very clear on mobile (as mentioned Misleading Category spacers on mobile), and it felt like a good opportunity to use color to reinforce it.

If you’d like to override it, you can add some CSS:

.mobile-view .category-list-item.category {
    border-top-color: #4d4d4d !important;
}
4 Likes
4

Thanks, guys. I admit, it was mostly just jarring when I looked at it at first. I may give it some time to see if it grows on me. Thanks for the “fix.”