[openstreetmap/openstreetmap-website] highlight comment from URL hash (PR #3869)

[Andy Allan]

Thanks @k-yle for your suggestion - I think it's reasonable to highlight the comment, but I think we would need a different approach to the implementation.

We try to avoid writing our own custom CSS, and to use [Bootstrap components and utilities](https://getbootstrap.com/docs/5.1/getting-started/introduction/) instead. In particular this helps with future refactoring, where we can change variables (like colours, border radius, etc) in one place and for that to be applied automatically and consistently throughout the site. This means that we don't want to copy+paste values (like colour values), and we don't want to create more custom CSS to maintain.

Also, you can see there is a problem with padding within the border here - the C of Comment is touching the border, and for all other bootstrap components that have borders (e.g. [alerts](https://getbootstrap.com/docs/5.1/components/alerts/) ) there is a gap between the border and the content. To be clear, I'm not asking you to add a `padding` property to your custom CSS, rather that if you want to use a border to highlight the content, then you need to pick a bootstrap component (or utility) that has a border and use that. The component will then come with appropriate padding, border radius, etc, automatically. You'll also need to use the same component, with the border turned off, for other comments so that they don't look different when highlighted (e.g. the highlighted comment is narrower due to additional padding).

Finally, there might be alternatives to having borders (and therefore additional padding), like changing the background colour or something else. I encourage you to have a think about and research what other options might fit the task of highlighting the comment that fit naturally with Bootstrap.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/3869#issuecomment-1370758173
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/3869/c1370758173 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20230104/85e7ea44/attachment.htm>