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

This is awesome!

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
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.