DEV Community

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

Ben Halpern on January 08, 2019

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 na...
Collapse
 
ben profile image
Ben Halpern •

Collapse me!

Collapse
 
ben profile image
Ben Halpern •

And me!!

Collapse
 
kayis profile image
K •

Bigger plz.

Also, needs higher contrast.

Collapse
 
ben profile image
Ben Halpern •

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 •

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 •

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
 
jsn1nj4 profile image
Elliot Derhay •

This is awesome!

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
 
nektro profile image
Meghan (she/her) •

🙏🙏🙏🙏

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
Elliot Derhay •

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.

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/