this post was submitted on 17 Jun 2023
39 points (100.0% liked)

/kbin meta

4 readers
1 users here now

Magazine dedicated to discussions about the kbin itself. Provide feedback, ask questions, suggest improvements, and engage in conversations related to the platform organization, policies, features, and community dynamics. ---- * Roadmap 2023 * m/kbinDevlog * m/kbinDesign

founded 1 year ago
 

Hello, this is a client-side theme focused on high readability and removing extraneous visual widgets and icons. It is based on the way I liked to read content on that "other site."

Image

For better or worse, the current kbin layout is very "mobile" in design and not the best for reading longform text on a desktop. This theme focuses on easing the layout and hopefully making threads look more forumlike.

It does take a "scorched earth" approach in removing stuff I don't like, but everything that starts disabled can be enabled again via the radio buttons provided, allowing you to toggle on/off various widgets on the fly.

This includes:

  • sidebar
  • footer
  • activity
  • thumbnails
  • previews
  • short description
  • avatars
  • upvotes, downvotes, or both
  • icons
  • elements of the text submission form
  • numerous other elements

In addition, you can change the base color scheme via the color picker in order to globally control things like:

  • body color
  • link colors
  • upvote/downvote colors
  • blockquotes, code blocks, input fields
  • hover/focus color
  • text color
  • etc.

Disclaimer: I have tested this at 1440P on a desktop environment at various scaling levels and dimensions and it seems to mostly be OK. I have not extensively checked for glitches on mobile aside from some rudimentary mocking. If you find something wrong, feel free to make a PR or inbox me.

Frontend is not my main focus area, so there may be some anti-patterns or things that are objectively stupid, particularly around the way I manipulated elements on the grid. Again, if something is being implemented wrongly here, please advise.

all 28 comments
sorted by: hot top controversial new old
[–] e-ratic@kbin.social 3 points 1 year ago

This is amazing, thank you!

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

I know it's already been posted there, but for more kbin customisations, have a look at the @kbinStyles magazine

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

Feels like we are due for making a megamod combining these fixes

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

Either that or submit a pull request to the Kbin project. Unlike Reddit, Kbin is open source.

https://codeberg.org/Kbin

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

My opinion on it is that adding non-critical frontend suggestions to a project already in its infancy creates needless noise for the developers working on structural/backend changes. Moreover, such suggestions may clash with the designers' own vision. Client-side changes are seamless in that they can be continuously modified in a non-invasive manner after the fact if the end-user does not like the designs being made upstream, which (quite likely) may be the case even after the project is stable. So there is good reason for them to coexist. Moreover, insofar as such changes are in JavaScript or CSS, they serve as a proof of concept that the upstream developers can deploy into their existing codebase if they later decide they like those third-party fixes.

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

This looks amazing, but I have no idea how to install it. Can you help?
In Github it says navigate to the script and follow the prompts, yet the link only opens a page with the script text, nothing happens. I'm using Brave by the way, is that the problem? Thank you for the amazing work you're doing.

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

Sorry if that was unclear. If you look at the dependencies at the top of the instructions, you need the Stylus extension. I believe it's only available in Firefox and Chrome. Once you have the extension installed, navigating to scripts like that one will bring up an install menu that lets you load the script and choose the parameters you want. It looks like this

I'll update the README tomorrow to make this clearer.

[–] nightauthor@kbin.social 2 points 1 year ago

Brave is chromium based, along with basically all other browsers that arent firefox or safari.

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

I've updated the help file with screenshots and a more step-by-step walkthrough of how to install, hope this helps.

[–] macallik@kbin.social 2 points 1 year ago

It looks very clean, thanks for sharing!

[–] polaroid@kbin.social 2 points 1 year ago

This is awesome

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

Fantastic work, thank you very much. I don't assume you're taking requests, but the only thing missing for me is if I could center the content, as right now it's all aligned to the left on my very large monitor and makes for awkward reading. I have no experience scripting but I'll look into trying to do this myself anyways. Again, thank you.

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

Sure, I could make it a toggle.

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

That would be ace. Also, this has improved my experience of kbin so much I would gladly contribute a few bucks to it. Maybe consider turning it into an extension or a more elaborate project as more people move here from Reddit. Thanks again.

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

Alright, I've updated it with a toggle and opened a ticket for it here. You can navigate to the install script again and it will prompt you to 'Update Style" on the left sidebar.

If this is satisfactory, I will close the ticket, otherwise let me know what resolution display you are working with and how much dead space we are talking about here. If you want to submit other issues, the best place to do so would be through there, although you must register an account to submit tickets. I am happy to fix any bugs or issues you find or entertain other ideas.

If you feel strongly about it, I've added a sponsor button to the top of the repository. I maintain a collection of open-source projects (chiefly QoL utilities for Linux) there, so if you throw a few bucks at one, you'd be contributing to the ongoing maintenance of all of them. Thanks.

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

Hotdamn you're fast! Amazing, this looks perfect, no need to be super precise about it, content is now centered and looks beautiful. You bet I'll donate a few bucks. Thank you.

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

Wow, this looks awesome, great job!

[–] Wiredfire@kayb.ee 1 points 1 year ago (1 children)

Conversely I found kbin much better to use on mobile and somewhat confusing on mobile 😅 Great to see work to help it be better to use in any case!

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

The mobile display is more compact and seems generally usable out of the box as a web app. On desktop it defaults to this mobile-style layout and it's not ideal.

[–] geekgrrl@infosec.exchange 1 points 1 year ago (1 children)
[–] shazbot@kbin.social 1 points 1 year ago
[–] j@janerationx.me 0 points 1 year ago (1 children)

@shazbot OMG, thank you! That is a huge improvement.

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

Thanks, will continue adding to it on a rolling basis and it should auto-update every 24 hours if enabled to do so in the settings. If you see anything that should be changed, let me know.

[–] liaizon@social.wake.st 0 points 1 year ago (1 children)

@shazbot installed, this is nice, thanks!

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

Thanks, will continue adding to it on a rolling basis and it should auto-update every 24 hours if enabled to do so in the settings. If you see anything that should be changed, let me know.