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
 

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
you are viewing a single comment's thread
view the rest of the comments
[–] 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