[client] When scrolling to a linked comment, it should have some highlight

[BBaoVanC]

When using a link such as https://example.com/post-1/#isso-4 for example, the comment that is being linked to should flash a couple times to make it identifiable from other nearby comments.

[ix5]

That's a bit overkill imo. Putting a slight border around the comment which fades away after a few seconds sounds okay though. Happy to hear any other opinions and links to / images of concrete examples.

Might be implemented via css :focus selectors?

[BBaoVanC]

That's a bit overkill imo. Putting a slight border around the comment which fades away after a few seconds sounds okay though. Happy to hear any other opinions and links to / images of concrete examples.

Might be implemented via css :focus selectors?

It looks like this already mostly works using the CSS :target selector. Here's an example that mostly works with an unmodified Isso instance.

.isso-comment:target {
    animation: target-fade 5s 1;
}

@keyframes target-fade {
    0% { background-color: #eee; }
    100% { background-color: transparent; }
}

A couple problems currently but it should be easy to fix:

1. it doesn't show on the initial page load. It looks like it only shows if you click a comment to link to it when the comment section is already loaded. I'm not sure about how to fix this
2. needs a little padding and potentially maybe some rounded corners or something so it looks a bit better.

I'm not familiar with JS so I don't really know how to do this properly, especially the first issue I mentioned.

This is how it looks on my site with that CSS (only I modified the color a bit). It fades out after 5 seconds:

With my example, it fades out after 5 seconds. It looks like browser support is fine too, according to MDN.

[ix5]

Thank you @BBaoVanC for a great and detailed comment. This is what makes the lives of maintainers much easier!

The suggestion you posted looks pretty good already. Maybe you could open a Pull Request to allow others to weigh in on the implementation side? Might be a good idea to link to a live version, either on your website or via some service like jsfiddle.

[ix5]

Tracked in linked PR: #845