this post was submitted on 18 Jun 2023

25 points (100.0% liked)

/kbin meta

4 readers

1 users here now

Magazine dedicated to discussions about the kbin itself. Provide feedback, ask questions, suggest improvements, and engage in conversations related to the platform organization, policies, features, and community dynamics. ---- * Roadmap 2023 * m/kbinDevlog * m/kbinDesign

founded 1 year ago

Improved Collapsible Comments - Script that lets you collapse replies by clicking a line to the side of each comment (media.kbin.social)

submitted 1 year ago* (last edited 1 year ago) by artillect@kbin.social to c/kbinMeta@kbin.social

36 comments fedilink hide all child comments

Download it from greasyfork

This userscript for kbin enhances the comment section adjusting the layout and adding a line to the left of each comment and its replies that lets you collapse them. The design is inspired by some custom subreddit stylesheets, and new reddit surprisingly enough (you know what they say about broken clocks).

Personally, I think this is the best way to handle collapsing comments here's a screenshot.

A video of it in action

If you don't have a userscript manager extension installed, you can install Tampermonkey, and then open the greasyfork link above.

top 23 comments

sorted by: hot top controversial new old

[–] McBinary@kbin.social 4 points 1 year ago (1 children)

This is SO much better than the default thread view, I love it. Thank you!

One tiny nitpick though, is there any way I can add back in the small padding between user comments to keep each comment chain separate? Right now it looks like one big comment chain.

[–] artillect@kbin.social 3 points 1 year ago (1 children)

Thanks, I'm glad to hear you like it!

Good call about the padding, I'll add that back in the next update. For now, you can edit the script, and add this to line 150, after styles.innerHTML =

.comments div {
    border-left: none !important;
}
.entry-comment .children {
    gap: 8px;
}
.comment-level--1 {
    margin-bottom: 8px;
}

[–] McBinary@kbin.social 1 points 1 year ago (1 children)

@artillect Perfect, thank you so much!

[–] artillect@kbin.social 2 points 1 year ago

I just released an update that adds the padding back and has a few other improvements

[–] Grimlo9ic@kbin.social 2 points 1 year ago* (last edited 1 year ago) (2 children)

Love this, it works great and adds clarity to the comments! I'm using it in conjuction with @SirPsychoMantis's user script, and the two are happily coexisting together. There's some visual bugs due to the two having the same function but appending additional characters in different places, but it's working fine.

EDIT: So on mobile, it kinda breaks. See here.

[–] artillect@kbin.social 2 points 1 year ago

Looks like I need to scale things down a bit for mobile, I'll fix that ASAP

[–] artillect@kbin.social 1 points 1 year ago (2 children)

I just released an update with a bunch of improvements for mobile, now you can collapse comments by tapping anywhere on them! (It shouldn't interfere with any of the buttons aside from the language dropdown, but let me know if it does)

[–] Saltcracker@kbin.social 1 points 1 year ago (1 children)

Hey I just got your script and the above mentioned user script, and I noticed you put your settings into the drop down menu, when you could just do it like the other script and put it where the cogwheel is for theme. I think you should maybe change it to there, since I had to go through your code to see if you even had settings.

[–] artillect@kbin.social 1 points 1 year ago* (last edited 1 year ago)

Great idea, but the main issue with that is that it isn't compatible with mobile Safari. I'll figure out some way to make it clearer

Edit: I misunderstood what you said, I could put it there, but I plan on releasing the config page I'm working on as a library that anyone can use in their scripts to easily add a config

[–] Grimlo9ic@kbin.social 1 points 1 year ago* (last edited 1 year ago) (1 children)

Currently using on mobile, the larger touch area for collapsing/uncollapsing works great in practice. I also see the modified scaling, and for the most part it's well done!

Although I can still force it to cut off some text if I find a discussion that goes deep enough. Not a huge issue though.

https://i.imgur.com/cvLr6fI.jpg

EDIT: I noticed that as a consequence of making the collapse activate on one click, highlighting portions of the comment (for example if you want to quote it) is now difficult. On desktop, you have to hold the mouse click then press Ctrl + C, otherwise if you let go of the click and collapse the comment, nothing is captured to the clipboard.

On Android though, since a tap and hold action on a word makes the context menu pop up, this doesn't happen, you can select the phrase you want to copy without the comment collapsing.

I'll probably keep using this on mobile, and use the other script for desktop.

[–] artillect@kbin.social 2 points 1 year ago (1 children)

I just released another update, you should be able to highlight text without the comment collapsing for now. I've also added an option to toggle collapsing comments by clicking anywhere on them, you can access it by clicking your username in the top right, then go to "Userscript Settings" and the option should be there

[–] Grimlo9ic@kbin.social 1 points 1 year ago (1 children)

I appreciate the work you're putting in! The latest version no longer gets text cut off on the right side. However now the longer comments no longer get that expand option.

https://i.imgur.com/fWLVAt9.jpg

[–] artillect@kbin.social 1 points 1 year ago

Try updating to 1.3.5, it should be back!

[–] exscape@kbin.social 2 points 1 year ago (2 children)

You have the URL components backwards! Text in [ ] first, followed by link in ( ).

Trying this out now!

[–] exscape@kbin.social 2 points 1 year ago (1 children)

Hmm, instant chaos in Firefox 115.0b6 unfortunately! I disabled all other kbin userscripts, same issue.

Screenshot here

[–] artillect@kbin.social 3 points 1 year ago (1 children)

Try updating it, I think I fixed the issue! Turns out Firefox doesn't support the :has() selector by default

[–] exscape@kbin.social 2 points 1 year ago* (last edited 1 year ago) (2 children)

Yep, that solved it! And I agree this method is better :-)

But... sorry to be the bearer of bad news (I know the feeling of getting bug reports just as you thought something worked fine), but it bugs out when you write new comments.

After writing a comment
After reloading the page

Edit: Slightly different look when I wrote this comment, since the previous was a sibling to the comment above whereas this is a child.

[–] artillect@kbin.social 1 points 1 year ago

Thanks for the bug reports, I'll try to fix those as soon as I can figure out how. There's also some issues with the toggle disappearing when you edit a comment, and hopefully I can fix all of that in one fell swoop

[–] artillect@kbin.social 1 points 1 year ago (1 children)

I've fixed the issue with replies not getting nested properly, try updating!

[–] exscape@kbin.social 1 points 1 year ago* (last edited 1 year ago)

Testing testing :-)

It indeed works! Nicely done!

[–] artillect@kbin.social 1 points 1 year ago

Thanks for pointing that out! I fixed it in my post about it on /m/kbinStyles but forgot to fix that before posting it here lol

[–] thesoloist@kbin.social 2 points 1 year ago* (last edited 1 year ago) (1 children)

@artillect well done. works perfect on my end. hopefully this is implemented into the offical kbin site

[–] artillect@kbin.social 3 points 1 year ago* (last edited 1 year ago)

Thank you! I've made a comment about it on the codeberg repository, I hope @ernest likes it

load more comments