aclist / kbin-kes

Add-on manager and scripting framework for kbin
MIT License
24 stars 8 forks source link

[BUG] Collapsible comments needs different style rules on profile pages #280

Closed aclist closed 5 months ago

aclist commented 5 months ago

With Collapsible Comments turned on, it seems like the vote buttons are getting displaced for me on mbin. Might have to do with recent changes to the mod, or maybe mbin. I've seen the issue on kbin.run and fedia.io. They seem to be moved to the end of comment chains and way pushed to the right.

Thankfully, it looks like an easy fix. The mod CSS defines a grid template area and refers to the vote section by the classname vote, but it should be aside on mbin, and this fixes it instantly. I can't cross-check this on kbin.social at the moment, because it's down, but looks either the new CSS can be used for both, or we load alternate stylesheets depending on the instance type.

As for the OP label, seems mbin adds its own OP label, so this mod should be disabled on there.

So, I've noticed that on my own profile page, the issue still occurs on kbin with the latest version of the testing branch.

I've checked the code, and looks like kbin uses aside on my own page and vote on others.

Originally posted by @Pamasich in https://github.com/aclist/kbin-kes/issues/260#issuecomment-2054124410

aclist commented 5 months ago

@Pamasich I wasn't able to reproduce this on your profile page on kbin with the mod enabled. Looks like top threads have the vote buttons on the left, and replies therein are aligned to the right, as they should be.

Pamasich commented 5 months ago

@Pamasich I wasn't able to reproduce this on your profile page on kbin with the mod enabled. Looks like top threads have the vote buttons on the left, and replies therein are aligned to the right, as they should be.

Weird. I still have the issue, and commenting out the grid-area does fix it, but it seems to use vote now on my page? Why is it broken then, isn't that how it's supposed to be. I'll have to look more into this, will write again when I find out more.

For reference, this is what I see with all userstyles and userscripts other than KES disabled: image

I checked from kbin.earth and see the same issue there with my kbin.social user.

Pamasich commented 5 months ago

It does still happen with every mod except the collapsible comments one disabled too.

aclist commented 5 months ago

Still can't reproduce it when visiting https://kbin.social/u/Pamasich and disabling all but collapsible comments. Does it happen when logged out?

I noticed your vote icons are rounded, is this default behavior?

Pamasich commented 5 months ago

Does it happen when logged out?

It does.

I noticed your vote icons are rounded, is this default behavior?

Huh, apparently not. I was sure it's a kbin thing (since I thought I saw a commit or something about it being refactored out of the collapsible comments mod), but disabling KES turns them from circles to squares with rounded corners.


To be clear, since it caused some confusion for myself, I am using the actual latest KES from this repository, not the one from my repository with the latest changes from here merged into it.


Also here's my exported KES settings, though it doesn't seem like that's a good help in this case: ``` { "submission_label": { "prefix": "submitted by" }, "unsanitize-css": { "state": false }, "collapsibleComments": { "click": "On headers and bars only (requires reload)", "state": true }, "default-sort": { "defaultThreadSort": "hot", "defaultCommentSort": "hot", "defaultPostSort": "hot", "defaultProfileSort": "newest", "defaultMagazineSort": "hot" }, "codehighlights": { "style": "3024", "state": true }, "hover": { "color": "#bababa", "thickness": "2", "state": false }, "kes-settings": { "lastPage": 1, "lastTab": "General", "hideUpvotes": false, "hideDownvotes": false, "updateTime": false, "omniInit": false, "initMags": false, "toggleLogo": false, "clarifyRecipientInit": false, "dock": "up", "adjustSite": false, "threadDeltaInit": false, "notifications_panel": false, "mail": false, "label": false, "alt_all_content_access": false, "always_more": false, "thread_checkmarks": false, "improved_collapsible_comments": true, "kbin_federation_awareness": false, "hide_sidebar": false, "mag_instance_names": false, "move_federation_warning": false, "hide_posts": false, "rearrange": false, "fix_codeblocks": false, "report_bug": false, "unblur": false, "user_instance_names": false, "code_highlighting": false, "hover_indicator": false, "fix_pagination_arrows": false, "unsanitize_css": false }, "adjust": { "sepia": 0, "hueRotate": 0, "bright": 0, "saturate": 0, "contrast": 0, "upvote": "--kbin-upvoted-color", "downvote": "--kbin-downvoted-color", "boost": "--kbin-meta-link-color" }, "labelcolors": { "fgcolor": "#dc2f3f", "bgcolor": "#ffffff", "state": false }, "hide-sidebar": { "state": false, "instance": true, "threads": true }, "changelogo": { "logotype": "Kbin (no text)", "state": false }, "omni": { "meta": "Minus", "state": false }, "alt-all-content-access": { "hideAllContentButton": true, "state": false }, "thread-delta": { "bgcolor": "--kbin-alert-info-link-color", "fgcolor": "--kbin-text-color", "state": "on" }, "moveFederationWarning": { "action": "Hide completely", "state": false }, "mail": { "type": "Text", "text": "✉", "prefix": "submitted by", "state": false }, "resize": { "optionHeader": 14, "optionPosts": 14, "optionComments": 14, "optionActivity": 14, "optionNotifs": 14, "optionUserSettings": 14, "optionSortBy": 14, "optionMagSidebar": 14, "optionHomeSidebar": 13, "optionCreate": 14, "optionProfile": 14, "optionMessages": 14, "optionFooter": 14 }, "expand-posts": { "expand": "EXPAND", "collapse": "COLLAPSE", "loading": "LOADING" }, "checks": { "check-color": "--kbin-upvoted-color", "state": false }, "hidethumbs": {}, "kbinFedAware": { "kfaHomeColor": "#00FF64", "kfaFedColor": "#009BFF", "kfaModColor": "#FF0000", "kfaStyle": "bubble", "kfaBubbleScale": "4", "kfaPostSide": "both", "state": false }, "timestamp": { "offset": "UTC", "state": false }, "nav_icons": { "fontWeight": 5, "search": "Search", "post": "Post", "subs": "Subs" }, "mobilehide": { "filter": false, "view": false }, "rearrange": { "op": 1, "options": "3", "comments": "4", "post": "2", "activity": 5, "state": false } } ```
Pamasich commented 5 months ago

I don't know why you don't see it, but I've found the issue.

I have mentioned the mbin github repository in my comments. Since the code checks if any link on the site mentions mbinorg, it applies the mbin styling on my profile. I've confirmed this with the debugger, getInstanceType() returns mbin and then the buttons get moved.

aclist commented 5 months ago

That is my fault, I was going to post the KES version number in the prior comments, but I forgot. I was one version behind. getInstanceType() is too permissive.

aclist commented 5 months ago

It should be fixed now. I don't know what I was thinking with the original implementation, just querying every possible link.

aclist commented 5 months ago

since I thought I saw a commit or something about it being refactored out of the collapsible comments mod

The mod originally forced avatar profile pics to be rounded for no documented reason, so that was removed.

aclist commented 5 months ago

disabling KES turns them from circles to squares with rounded corners.

They should always be squares with rounded corners (unless on mbin, it does its own styling stuff) whether it is enabled or not.

Pamasich commented 5 months ago

disabling KES turns them from circles to squares with rounded corners.

They should always be squares with rounded corners (unless on mbin, it does its own styling stuff) whether it is enabled or not.

I mean, they are squares with rounded corners, yes. Just when so small it looks like a circle.

If I increase the size, they are still squares.

aclist commented 5 months ago

Resolved by 4cb73dd