DEV Community

loading...

Changelog: Collapse Comments (via the `details` HTML tag)

ben profile image Ben Halpern ・1 min read

You can now collapse comments by clicking on the ▼ symbol that appears near comments.

It is not 100% rolled out, as we'll let some caches clear naturally to display the new functionality. We may also need to make some small adjustments to click area radius and the such.

This feature was built using the nifty <details> tag, so the mechanism is not triggered by JavaScript.

Thanks to @link2twenty for pitching this approach in this issue:

Feature: Collapse comments #173

Collapse comments

User Story

As a user I should be able to collapse comments.

Happy coding ❤️

Discussion (22)

Collapse
ben profile image
Collapse
ben profile image
Collapse
kayis profile image
K

Bigger plz.

Also, needs higher contrast.

Collapse
ben profile image
Ben Halpern Author

Thanks for the feedback K

Collapse
kayis profile image
K

Otherwise it's a great feature :)

Collapse
link2twenty profile image
Andrew Bone

Might need to be a little different for mobile

Collapse
4lch4 profile image
Devin W. Leaman

I agree. It seems really out of place on mobile, or at least on my device.

Collapse
ben profile image
Ben Halpern Author

Can you make an issue and/or PR describing this?

Collapse
link2twenty profile image
Andrew Bone

[UI] Collapsible comments on Mobile #1498

On mobile the collapsible comments arrow and summary are a little small.

Screenshot

Reddit, who also do collapsible comments, get around this by not having colapsible comments but rather only displaying base level comments with a button to reveal replies.

Reddit

Once replies are revealed they can not be hidden away again.

This issue serves as a place to discuss the UI for mobile and any changes that may need to be made.

Collapse
rhymes profile image
rhymes

Love this new feature!

Just a problem: I can't interact with the comment's text anymore. I can't select it, copy the text and so on.

All the links work fine, it's just the actual body.

Collapse
ben profile image
Ben Halpern Author

Oh, thanks for the catch.

Fixing that, and some of the other adjustments mentioned, here

The problem was that the surrounding div had user-select: none; applied to deal with not selecting all with rapid clicks of the toggle.

But it was applied in a cascading manner to the body by accident. Should be fixed shortly.

Collapse
link2twenty profile image
Andrew Bone

That was a quick catch and patch 😁

Collapse
rhymes profile image
rhymes • Edited

Thanks Ben!

It's working now :)

Collapse
darksmile92 profile image
Robin Kretzschmar

I really like how this is implemented! Name and number of replies while collapsed is just the right information needed, simplicity at it's best!
Loving it!

Collapse
computersmiths profile image
ComputerSmiths

I have a really hard time clicking on the tiny arrow on mobile Safari. But once I do the whole line is clickable, which is nice...

Collapse
computersmiths profile image
ComputerSmiths • Edited

Actually (hey, where did edit go?) first-level comments you can click on the entire line, but nested comments are harder to hit.

Collapse
computersmiths profile image
ComputerSmiths

Actually, it works OK in Mobile Safari, but not in the Echofon twitter client...

Collapse
jsn1nj4 profile image
Collapse
nektro profile image
Meghan (she/her)

🙏🙏🙏🙏

Collapse
equinusocio profile image
Mattia Astorino

Nice! You can do what you want with the details tag. If you need it here some example:

ne-details.stackblitz.io/

Collapse
defman profile image
Sergey Kislyakov 🇷🇺 🇺🇸

The arrow being above (not to the left) the first comment in a thread isn't a bug?

Collapse
jsn1nj4 profile image
JSn1nj4‍‍👨‍💻

I think this has to do with the first comment spanning the full width of the column. So the width of all of the comments would need to be reduced a bit.

Forem Open with the Forem app