Inconsistency in code for watching first post

After submitting this PR I discovered an inconsistency with watching first post that I am not sure how to resolve.


Watching first post exists in two primary locations: the notification level dropdown on category pages, and the user preferences page.

The User Preferences page appears to be a handlebars template which uses the watching-first-post for the class, following what appears to be the Discourse convention of using hyphens for CSS classes.

The notification level dropdown appears to come from JavaScript which uses watching_first_post for the class, following what appears to be the Discourse convention of using underscores for translation files.


Which is correct? At the moment, to target the watching first post icon in all locations, two selectors are needed, which seems less than ideal. Can this be resolved so the icons share the same CSS class, without breaking CSS or translation conventions?

Perhaps @eviltrout can comment, this was his feature as I recall?

1 Like

Hyphens are definitely the way to go for CSS classes. Are you comfortable making a PR for this? If not I can fix it.

1 Like

I looked into making a PR but that’s when I ran into the inconsistency…

If I change line 12 in the JavaScript so that the key uses hyphens not underscores under - that will change the CSS class but also break translations. Are you OK with me changing the client-en.yml file so it also uses hyphens not underscores?

If yes, I can absolutely submit a PR. If not, then I don’t know how to submit the PR without modifying the translation keys.

No, I definitely would not want to rename our translation keys for this. I’m okay with dashes everywhere in our codebase for this feature except for the CSS. I’ve changed it here:

https://github.com/discourse/discourse/commit/f42b6054e6588a37a91b48087d91075351ed2b77

The class name should use dashes now instead of underscores.

5 Likes

Thanks Robin - I wouldn’t have had a clue where to start to fix this one. Have a :gift_heart:!

3 Likes