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

・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

rishipuri avatar
rishipuri commented on Mar 06, 2018

Collapse comments

User Story

As a user I should be able to collapse comments.

Happy coding ❀️

DISCUSS (22)
 
 
 

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.

 

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.

 
 
 

Might need to be a little different for mobile

 

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

 

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

 

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

 

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

 

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

 

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

 

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!

 
 

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

ne-details.stackblitz.io/

 

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

 

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.

 
Classic DEV Post from Jan 20

What do you do to practice new programming languages and/or frameworks?

What to do to practice and learn new technologies when you don't have any creativity for projects?

A Canadian software developer who thinks he’s funny.

Sore eyes?

dev.to now has dark mode (in public beta).

Go to the "misc" section of your settings and select night theme ❀️