this post was submitted on 27 Jun 2023
36 points (100.0% liked)

Kbin Userstyles and Userscripts

4 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
36
Kbin Usability Pack 0.2.1 - Now with settings! (greasyfork.org)
submitted 1 year ago* (last edited 1 year ago) by Perry@kbin.social to c/kbinStyles@kbin.social
26 comments fedilink hide all child comments
 

What is this?

So after tinkering for a while with my Subscriptions Panel (please feel free to try that one out too, btw!), I thought I'd take a go at cleaning up some of my other experiments that I have been playing around with and share them with the world.

That's how the Kbin Usability Pack was born, which is a growing very opinionated collection of enhancements and tweaks that I'm using myself.

Features

  • Inline preview of Kbin articles.
  • Improved media preview.
  • Drag to resize media preview (only images, currently).
  • Larger preview buttons
  • Keyboard shortcuts for upvoting, downvoting, boosting, opening article and previews.
  • Fixed mobile menu to respect default homepage instead of just always linking to "/".
  • Changed logo behaviour on mobile to navigate to home instead of opening mobile menu. Hamburger menu still opens menu.
  • Moved thumbnails to the left.
  • Slight tweaking to general CSS, especially on mobile.
  • Infinitely scrolling comments.
  • Subheader on articles showing the full link URL (also opens link in new tab when clicked)
  • Overhauled settings panel with new components and asynchronous changes.

Keyboard shortcuts

Feed

A: Upvote.

Z: Downvote.

B: Boost.

O: Open article.

Enter: Enter article selection.

Enter, when article is selected: Toggle previews (press once to open article preview, twice to open media preview and three times to close previews).

Up/down arrow: Move between selected articles.

Escape: Exit article selection.

A selected article is indicated by a dotted border.

Article page

A: Upvote article.

Z: Downvote article.

B: Boost article.

O: Open link in new tab.

Enter: Toggle media preview.

Todo

This project is still absolutely in its infancy so do expect some bugs and occasional weirdness.

The following things are currently in the immediate pipeline:

  • Further media preview enhancements.
  • Handle more built-in settings like auto media preview.

Screenshots

Inline preview of an article (0.0.1)

New media preview and article preview (0.0.1)

Some fancy preview in a preview (0.0.1)

Link subheader (0.1.0)

New settings panel (0.2.0)

Updates

0.1.0

  • Added keybind ("O") to open article.
  • Added kebindings to article page (toggle preview, open link in new tab, vote, boost).
  • Improved article preview styling.
  • Changed comment link in feed to link to article instead of the comment section.
  • Added enhanced media preview to article page.
  • Added subheader to article page to show full link URL (also opens link in new tab if clicked).
  • Added infinite scroll to article comments.
  • Added logo, because why not?

0.1.1

  • Fixed article previews in compact mode
  • Fixed some layout quirkiness.
  • Fixed missing get parameters in URL subheader.

0.1.2

  • Fixed thumbnails missing rounded corners.

0.2.0

Added settings enhancements

  • New components for toggles and enums.

  • Settings save in the background without reload (reload is still required for some settings to apply, though).

  • Compatible with existing settings and any third party settings, like for Kbin Enhancement Script.

  • Fallback for custom settings types.

  • Collapsable sections (hold shift to toggle all)

  • Support for live changes that apply immediately without reload (currently only KUP settings).

  • Support for settings descriptions (currently only KUP settings)

Enhancements that can be toggled in settings

  • URL subheader

  • Article preview button

  • Remove anchor from comment links.

0.2.1

  • Fixed issue with handling third party settings
top 18 comments
sorted by: hot top controversial new old
[–] clb92@kbin.social 2 points 1 year ago (1 children)

In compact mode, some inline expanded articles and images seem to be pushed very far to the right.

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

Now that really opened some can of worms. I ended up cleaning up a lot of the CSS in the process, but I think everything should work now if you update to version 0.1.1.

Edit: Of course I managed to break something. I pushed a new update 0.1.2 that should fix the missing rounded corners on the thumbnails that I think disappeared in the last update.

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

Amazing work, thank you so much!

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

clickdragging to resize images is what i missed most from RES

bless community-driven platforms and userscripts, keep the Ws coming!

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

this looks amazing!! i just started using it and having a look around. i really love the nice ease when you open the post preview button. the drag to resize is phenomenal.

i know it's really early on still, but one thing i'm noticing right away is that links are not distinguishable in the preview, so you cant tell what is a link with the preview (not an issue when you click into a post). i have imagus which allows me to hover over image links and displays them so in this video I show where the links are, which is the only way i could tell. see here

but anyway, thanks for putting this together! i am having fun experimenting with it and am excited to see where it goes from here ❤︎

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

That should now be fixed in the latest release. The article preview is still a bit wonky sometimes when there's a lot of rich content, which I'm still trying to work out.

I could probably solve it by just wrapping in an iFrame, but that would be the coward's way out and I can't have that.

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

just updated it, it looks great, links are perfectly distinguishable. thanks for the fix! also, i love the new icon for KUP ♡

kudos to you for opting for a more elegant solution, good luck in discovering it :D

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

This is great, thanks for releasing it.

For anyone wondering if this plays nice with the enhancement script I can say I haven't noticed any issues.

I'm struggling to understand the usefulness of this one tho;

Subheader on articles showing the full link URL (also opens link in new tab when clicked)

It just seems to waste a bit of space by adding another link that's the same as the header?
You can just hover/hold on the header to see the full url.

I can see it being useful in the feed where you don't actually have a direct link to the content currently but it's not displayed there.

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

Thanks! I really appreciate the feedback. Everything is very experimental by nature, so it’s great to hear what works and and doesn’t.

I will of course add some settings soon so that most of these changes can be toggled off, but here’s the reasoning for this one:

  1. I felt that I wanted more clearly distinguish between articles with links and without. By default, links to articles, websites, cross posts on Kbin and even articles without links are visually very similar. Even more so, links can include both an article and an attached image, making it very confusing what one is clicking on.

By adding the sub header, I hoped to make it more clear what you are clicking on before you do it.

  1. The information is of course already available when hovering over the link, but at least I felt that was unnecessarily cumbersome to do every time and that also doesn’t work well on tablets and mobiles.

  2. I definitely want to add it to the feed too, but sadly I don’t have access to that data there without fetching it separately (which is infeasible to do for every entry in the feed).

Technically, I already populate the article object when generate the preview, so maybe I can figure out something smart.

  1. I tried to keep the sub header as slim as possible, so it should hopefully have a minimal impact on the total vertical height of the header.

I hope that makes sense. I’m not claiming I’m necessarily right, but that’s my reasoning at least. :)

Edit: Also I definitely recommend the enhancement script too. I’m using it myself and I’ve deliberately opted to not include features already present there, even when I had my own solution. Maybe I’ll rethink that later, but that is not my focus right now.

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

Ah I can see your reasoning now, that does make sense so you can see if there even is a link attached at all.

Also, I am currently running my own script which does fetch the content link for every post and replaces the header link in the feed with the content link, it's not ideal for sure but I'm not a fan of having to click so much to get to the content.

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

I've now released an update so that you can turn off the subheader if you prefer. :)

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

Great work :)

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

Does anyone know a way to install userscripts on mobile firefox?

[–] sirmoosh@kbin.social 3 points 1 year ago

You can use tamper monkey as an add on. Depending on the format the script is provided in, you can drop it in there or may need to add a few lines for css for instance

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

Please give me a shout if/when you find any bugs.

I'm primarily targeting Chrome and mobile Safari since that's what I'm using myself, but I'll try to keep compatibility with as many major configurations as possible.

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

For some reason the magazine a post is made to is no longer displayed with the userscript installed. It normally says <username>, 1 hour ago to <magazine> but now the to <magazine> part doesn't appear.

The rest works amazing, thanks for putting it together!

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

Hm, are you sure it's this userscript that is causing it? I've tried to reproduce it, but to me it looks fine.

Don't forget that if you're browsing a specific magazine, that element isn't displayed in Kbin (only in the main feed or /sub, e.t.c). So if you're e.g. browsing /m/kbinStyles, the magazine doesn't display. Do the magazines display if you turn off the script?

Can you otherwise perhaps post a screenshot of how it looks like in your browser so that I can look into it?

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

-It's happening on my homepage (all), I'll get some screenshots together tonight showing it :)-

Edit: Scratch that, I must've clicked through into a magazine as it's showing now. Sorry for the confusion, that's my bad.

load more comments
view more: next ›