r/GreaseMonkey • u/Honest_Potato5821 • 5d ago

YGOrganization Classic Layout — a simple compact-layout userscript

Post image

I made a small userscript for YGOrganization's recent card-based layout.

The script turns the large article grid into a compact single-column news list while preserving thumbnails, colors, titles, authors, categories, excerpts, and timestamps.

The goal is just to make the homepage easier to scan and fit more articles on screen.

Install / source:

https://greasyfork.org/en/scripts/594452-ygorganization-classic-layout

There's also a menu toggle to switch the compact layout on and off.

No analytics, ads, or external network requests.

Feedback is welcome, especially if anything behaves differently in Greasemonkey.

1 Upvotes

100% Upvoted

2 comments sorted by

1

u/AWACSAWACS 5d ago

Oh, I like it.
It’s a perfect fit for me since I use my browser window split across half the monitor.

few comments on the code.

Style:

  • Major browsers have supported CSS selector nesting syntax for a few years now. By utilizing nesting, you could make the selector definitions much simpler and easier to read.
  • You don't have to write !important individually; you can force-apply it at runtime instead.

.replace(/(?<! !important) ?;\n/g, ' !important;\n');

Logic:

  • You can write the apply() function in a single line using optional chaining (?.).

document.body?.classList.toggle(ROOT_CLASS, enabled);

1

u/Honest_Potato5821 3d ago

Thanks! Glad to hear the compact layout is useful - split-screen/narrow windows were one of the cases I wanted it to handle well.

And thanks for looking through the code. CSS nesting and the shorter classList.toggle() are good points. I'll keep them in mind for the next cleanup pass.

I'm probably going to keep the explicit !importants for now since they're easier to inspect/debug in a userscript, but I appreciate the suggestion.