this post was submitted on 01 Jul 2023
124 points (100.0% liked)

Kbin Userstyles and Userscripts

15 readers
1 users here now

Custom CSS and JS to help improve your Kbin experience! ### Userscripts Greasy Fork ### Stylesheets UserStyles.world ### Userscript managers

founded 1 year ago
 

I have now released a significant new update for KUP that introduces a new experimental mobile UI and adds support for the coming release of the Kbin platform.

What is this?

This is a collection of hacks, fixes, enhancements and experiments that I have been tinkering with since I've joined Kbin, neatly packaged into one behemoth of a userscript.

Updates

0.3.0

Support for next version of Kbin.

The next version of Kbin is upon us and is bringing a lot of new improvements. This release of KUP makes sure that everything will still be working smoothly when the next version launches.

Note that there are some additional improvements and bug fixes related to the general layout included in this release, but will not be visible until the next version of Kbin launches.

Experimental Mobile UI

Screenshot (new Kbin)

I have been working hard experimenting with a new mobile UI. Since this relies heavily on functionality in KUB, I've decided to include it into this release. It is disabled by default, but can be activated in the settings panel by toggling "Experimental Mobile UI".

As the name suggests, this is heavily experimental, even more so than the rest, so be prepared for strange edge cases and weirdness, especially if you're using multiple scripts.

The new UI includes a number of changes:

  • Replaced many of the small text elements with larger, more touch friendly icons.

  • Moved media preview to the top of the article and auto expands it.

  • Moved vote arrows to the right for easier reach.

  • Moved meta information and footer above the body of the article for easier access on long articles (touch the comment icon to jump directly to the comments)

Other changes

  • I've fixed a few bugs related to iOS and Safari.

0.3.1

  • Alt. UI Fixed layout issues related to compact mode.

  • Alt. UI Fixed layout issues related to future Kbin version.

  • Alt. UI Fixed layout issue when creating or editing article

  • Preview Fixed not respecting auto preview setting (only media).

  • Preview Added setting to enable auto article preview.

0.3.2

  • Alt. UI Fixed boost icon missing active highlight.

  • Added fallback for compatibility issues with other scripts.

  • Improved notifications for common actions.

  • Added reset button to settings.

  • Preparation for potential future KUP API endpoints.

0.3.3

  • Fixed repeated script initiation when using Greasemonkey.

Please try it out and see if there's anything you like! I really appreciate any and all feedback.

If any of these experiments turn out to be majorly liked, I might try to port it over and make a pull request to the main Kbin project later.

0.3.4

  • Fixed broken hamburger menu in latest release of Kbin. (Enhancement is no longer needed)

0.3.5

  • Alt UI Fixed thumbnail styling in compact mode

0.3.6

  • Added fix for horizontal scroll issue on Mobile Safari.
  • Added option to toggle this off when the issue is eventually fixed in Kbin.

Other projects

If you haven't, feel free to also try out my other project, Kbin Subscriptions Panel.

top 50 comments
sorted by: hot top controversial new old
[–] [email protected] 26 points 1 year ago (1 children)
[–] [email protected] 5 points 1 year ago

With the work you and everyone else is doing I'm cautiously hopefull about the future of the verse. Not to mention the supportive vibes.

[–] [email protected] 6 points 1 year ago (3 children)

This looks amazing! Can this be installed with Tampermonkey on mobile Firefox?

[–] [email protected] 5 points 1 year ago

Yurp, I grabbed Fennec enabled tampermonkey and got the script.

[–] [email protected] 2 points 1 year ago

Yes exactly

[–] [email protected] 1 points 1 year ago (1 children)

How do you install Tampermonkey for Android FF? Every time I tried it just told me it wasn't compatible.

[–] [email protected] 2 points 1 year ago (1 children)

Try going into the addons manager and searching for it from there. For me, it was one of the recommended addons, but I've got FF Nightly so I don't know if it's available on regular FF.

[–] [email protected] 2 points 1 year ago

Well, there you go. It was there. Guess I was just trying to do it the hard way. Thanks!!

[–] [email protected] 5 points 1 year ago (1 children)

Okay, can anyone explain how to install this on iOS with Safari? I tried installing Hyperweb then clicked install the script and it just launched a page full of code.

I feel like it should have opened a prompt in Hyperweb and been clear sailing from there.

[–] [email protected] 3 points 1 year ago* (last edited 1 year ago) (1 children)

There are a few alternatives, but I'm personally using an extension called Userscripts.

Essentially, you install it from the app store, launch it, and then choose a folder in the Files app where you will store the scripts. Any folder will do, but I think a good idea is to choose a folder in e.g. iCloud so that it's easier to manage from a computer if needed.

After that is set up, you need to go to the Greasy fork link and click install. You will probably just be presented a bunch of code now. After carefully reading through the ~1600 lines of code (kidding, somewhat) you can tap on the extension settings on the left in the toolbar (the puzzle piece icon) and tap on "Userscripts". Sometimes, the toolbar button defaults to opening the reader for some benign reason, whereas you need to tap it again to get to the menu.

You might be prompted to give access to reading the website, and after all that is done there should be a button saying something like "Userscript detected, tap to install". Tap it, follow the on-screen instructions and you should be good to go.

In the future, the script should update automatically by tapping on the puzzle icon again -> Userscripts -> tap on the cloud with a downwards arrow. You might need to be on kbin.socal to do that; I'm not entirely sure, to be honest.

[–] [email protected] 1 points 1 year ago

That seems to have done it, thank you so much! I got sorta close, but never would have figured it out from there.

[–] [email protected] 4 points 1 year ago

Wow that looks good. will start using PWA again. been checking kbin on desktop lately cause of other stuff but yea that looks really good!

[–] [email protected] 4 points 1 year ago

Oh, wow. The new mobile interface is a complete game changer.
It has improved my PWA experience tenfold.

Thank you!!

[–] [email protected] 4 points 1 year ago (5 children)

Is there a walkthrough somewhere to install this on android firefox? Having trouble adding the add on

[–] [email protected] 3 points 1 year ago

This one is for installing an other script "Kbin Improved Collapsible Comments" (recommended!) on Firefox for Android:
YouTube Short - "Firefox for Android: user scripts"

It works the same for the Kbin Usability Pack.

load more comments (4 replies)
[–] [email protected] 3 points 1 year ago (1 children)

Amazing improvements. Grabbed Fennec, enabled tampermonkey and installed the script. Loving the experimental mobile UI, would you be willing to explore having thread thumbnails show in a square to the left of the thread title instead of above the thread title in a rectangle. Especially for compact mode, that'd be amazing.

[–] [email protected] 2 points 1 year ago

Yeah, I will definitely look into making something for compact mode later. It will most likely be after the new Kbin version has been released since at the moment I'm essentially managing two different stylesheets in order to be backward compatible with the current version.

[–] [email protected] 3 points 1 year ago

Thank you so much, it looks awesome

[–] [email protected] 2 points 1 year ago* (last edited 1 year ago) (8 children)

@perry amazing work. thanks a lot!

one thing: at least for me it seems that "Auto Media Preview" doesn't work? i always have to push the little "Picture" button to have the picture visible. i don't mean "Show Thumbnail" that works. Do I miss anything? 🙈

load more comments (8 replies)
[–] [email protected] 2 points 1 year ago (2 children)

Updated to 0.3.3 on Fennec for Android, and now it seems I can't tap on the hamburger menu icon. Disabled all other extensions and userscripts, leaving only KUP, and can confirm that this seems to be an issue with this script.

[–] [email protected] 3 points 1 year ago (1 children)

Same issue on Firefox for Android with Tampermonkey. Can't use the hamburger menu, it does nothing with this script installed.

[–] [email protected] 2 points 1 year ago (1 children)

I've deployed an update that should fix this issue.

[–] [email protected] 1 points 1 year ago

Excellent, thank you! Working for me 🥂

[–] [email protected] 1 points 1 year ago* (last edited 1 year ago) (1 children)

Yeah I noticed. I didn’t get a time to deploy a fix yesterday, but I’ll have one out in a moment. Sorry!

Edit: This should be fixed in 0.3.4

[–] [email protected] 1 points 1 year ago

That was quick. Can confirm that the fix works.

Also, unrelated to KUP, but for some reason, I can't seem to upvote/favorite your comments in this thread. Only yours, too, since it seems to work fine for others. Weird.

[–] [email protected] 2 points 1 year ago

this is looking amazing, nice work! currently very much enjoying KUP and its features

[–] [email protected] 2 points 1 year ago (1 children)

I'm using brave for Android, can I install this? I didn't see any option.

[–] [email protected] 2 points 1 year ago

Userscripts chrome extension?

[–] [email protected] 2 points 1 year ago (1 children)

I'm enjoying KUP on mobile but I'm not using the experimental mobile UI for a couple of reasons. The thumbnail previews automatically render as portrait even if the image itself is not, leading to a lot of wasted space. In fact I'd love an ultra compact option for KUP to further condense things, as there's a lot of whitespace. The images/icons for going to the comment section and boosting are very nice, but they do take up more space than just the text. I used RiF for reddit partly because of how condensed and clean it looked even with thumbnails.

Also it would be lovely if you could add a quick reply button under the article text when you click on an article, as right now I need to scroll down through all the comments to get to the Add Comment box, and of course having infinite comment scroll on can make that a bit of a chore. I'd argue that's perhaps something to be addressed on the site overall, but since @ernest is working pretty hard on the back end, sometimes you need things like KUP to help out on the front end for accessibility and minor QOL issues.

Fwiw I am using Firefox with tampermonkey on a Galaxy S22 Ultra.

[–] [email protected] 2 points 1 year ago* (last edited 1 year ago)

Thanks for the feedback! I actually released an update 0.3.6 earlier today that addressed some issues with compact mode and the alternative mobile UI. Especially the thumbnails should look a lot better now.

Regarding the thumbnails, they didn't actually use more vertical space than in the standard UI as they merely used all the available vertical space. The issue was that since the whole element is larger because of the thicker footer, the background got stretched out to fill out the additional space, resulting in the portrait format you are talking about. That should however be fixed now, but if you prefer the smaller standard UI, that sadly won't help you in this case. I guess that's what makes it an experimental UI :P

Regarding the comment box, I agree completely and before I repacked my scripts into the KUP bundle I did actually have a fix for that. I never included it in KUP though since that feature is already included in the excellent Kbin Enhancement Script plus a number of other improvements. KUP is fully compatible with KES so I felt I should rather focus on bringing new improvements than reimplementing things that others have already solved.

If I get some time over, I might add that however, in order to make KUP more of a complete single package.

[–] [email protected] 1 points 1 year ago

@Perry This is really nice, thanks. I'd like to make the user/magazine icons a little smaller. What line do I need to adjust for that please?

[–] [email protected] 1 points 1 year ago

Installed thank you

[–] [email protected] 1 points 1 year ago

This is the best userscript I've seen for this website. Good shit!

[–] [email protected] 1 points 1 year ago

This is great - thanks!

[–] [email protected] 1 points 1 year ago (1 children)

@Perry Thank you!

have been working hard experimenting with a new mobile UI. Since this relies heavily on functionality in KUB, I've decided to include it into this release. It is disabled by default, but can be activated in the settings panel by toggling "Experimental Mobile UI".

I'm fairly new to Tampermonkey. Where do I need to toggle this setting? Can't see it. Or do I need to make changes in the code?

[–] [email protected] 4 points 1 year ago* (last edited 1 year ago)

It's not in Tampermokey nor do you need to fiddle with the code. It adds a section to the settings page for the script's various toggles. If you're on mobile, click on the menu icon, then the settings (gear) icon, then scroll down to see the script settings. You may need to toggle open the settings panel.

https://i.imgur.com/wzhRJgK.png

[–] [email protected] 1 points 1 year ago* (last edited 1 year ago)

My biggest usability issue currently is picture preview. We either get the tiny thumbnail picture in the post, or the giant one in the auto media preview. I wish there was something like how modern reddit diplayed pictures inside a post preview. The thumbnail is fine for link previews, but useless for picture preview while the auto media preview makes everything gigantic and then you gonna have both anyways.

[–] [email protected] 1 points 1 year ago (1 children)

This mobile UI is really nice!

The upper corners of the images in the card doesn't have rounded corners for me on Fennec

[–] [email protected] 2 points 1 year ago

Yeah, it seems to be a bug that slipped through when I was porting it to the current Kbin version. While most fixes will probably be done for the next Kbin version, I'm currently doing some refactoring work anyway, so I'll see if I can get a patch out later.

[–] [email protected] 1 points 1 year ago

I installed it and enabled the experimental mobile UI. Great work!

load more comments
view more: next ›