this post was submitted on 21 Jun 2023
56 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
 

I saw right when I was going to post this that someone else had already posted something similar, but I thought I'll go ahead and post it anyway as an alternative.

I threw together a simple side panel last night that lists all magazine subscriptions sorted alphabetically. I've also added a simple search box to quickly filter the list.

Edit: Listening to the feedback, I've added some (hopefully) improvements:

Version 0.6

  • Improved panel resizing such that the main content column is prioritised.
  • Added a settings modal where you can choose to increase the width of the page to fit the panel better.

Version 0.7

  • Fixed misaligned panel when sidebar was set to left position.

Version 0.8

  • Added toggle to collapse the panel.
  • Added option to hide the magazines when panel is collapsed.

Version 0.9

  • Fixed collapsing panel when sidebar is on the left side

Version 1.0

First major release!

  • Added onboarding step.
  • Added optional cache of subscriptions to make the panel load quicker.
  • Added basic support for mobile devices.
  • Added accessibility labels to buttons.
  • Removed Tampermonkey specific functions to (hopefully) increase compatibility.

Version 1.1

  • Added option to always show mobile menu for those who prefers a modal instead of a side panel
  • Fixed not handling rounded edges setting.

Version 1.2

  • Fixed layout issue when sticky navigation was off

Version 1.3

  • Fixed only loading the first 48 subscriptions.
  • Changed cache settings to use cache by default.

Version 1.4

  • Fixed slight flickering when loading with cache enabled.

Version 1.5

  • Added magazine grouping. Magazines that share the same name are grouped together. Can be disabled in settings.
  • Improved search UX.

Version 1.6

  • Fixed page scrolling to top when opening the mobile modal.

Version 2.0

The project had grown much larger than I had initially anticipated, to the point that it had started to become very difficult to maintain.

This release features a completely overhauled codebase, making it significantly easier to develop. It has also enabled me to move away from relying purely on DOM manipulation and instead move towards a more object oriented approach where each magazine handles its own state and presentation.

There is still a lot of cleanup left to do, but with this restructure, it enabled me to introduce a few hopefully interesting new features:

  • Added a Recently Viewed section that lists the last 5 visited magazines. Can be disabled in settings.
  • Added staring where one can select magazines to be sorted at the top of the list.
  • Added ignore option, where one can choose to hide individual magazines from the panel.
  • Improved mobile UX. The main menu and the subscriptions panel will now respect each other's states, meaning if one opens the other one will close.

A few words about the recently viewed sections. If this is enabled, any time one navigates to a certain magazine (in any way), a time stamp is stored in local storage of when the magazine was last visited. While the data is of course only stored on the local device, some people might still not want to record such data at all for privacy reasons.

If the recently viewed section is disabled in settings, this data is not recorded and any existing data is removed. I've also added a reset button in settings, which removes all settings, cache and magazine data from the device.

Version 2.1

  • Added sticky panel option in settings to make the panel stick to the top and scroll independently.

Version 2.2

  • Improved sticky panel UX.

Version 2.3

  • Improved sorting
  • Improved mobile menu when viewport resizes between desktop and mobile sizes (e.g. typically when rotating a tablet)

Version 2.4

  • Fixed panel displaying while closed in force mobile mode.

Version 2.5

  • Fixed compatibility with future Kbin release
  • Added integration with KUP settings panel.

Version 2.6

  • Fixed issue with Firefox

Version 2.7

  • Fixed layouting issue with Kbin.
  • Added compatibility with KUP bookmarks modal.

Version 2.8

  • Added alternative mobile menu placement (behind the hamburger menu) to increase compatibility with other scripts.

Version 2.9

  • Fixed placement of alternative mobile menu.

Note that if "always mobile menu" is turned on, both the alternative menu and the original menu will be visible. May require reload to fully apply.

you are viewing a single comment's thread
view the rest of the comments
[โ€“] marcf@kbin.social 2 points 1 year ago (1 children)

Looks good! But seems to break when the kbin sidebar is positioned left. Subscriptions get pushed below the content.

[โ€“] Perry@kbin.social 2 points 1 year ago* (last edited 1 year ago)

Ah, I'll look into it.

There are of course probably numerous ways to break this. It's not exactly enterprise grade software I'm writing here :)

Edit: It should be fixed now.