I started using @absalon's awesome Hide Answers script from /t/UserScript-Hide-answers-not-learned-items-and-shuffle-cards/8373/1 and thought it would be much easier on the eyes if the Vocabulary section were also laid out in a grid, so I whipped up this little stylesheet to make it so.
- v0.1.0 First Draft - v0.2.0 Refactor with Stylus and incorporate feedback from @rfindley - v0.2.1 Also apply styles to the full Vocabulary list - v0.3.1 UserScript for people who don’t like Stylish, apply styles to kanji pages, more specific CSS for flexbox container - v0.3.2 Add vertical grid lines
Nice! It looks really good, and would definitely help with the Hide Answers script.
A few notes:
* The current vocab font size (50px) can fit up to 4 characters before wrapping. There are 64 vocab on WK that are 5 or more characters, but only 10 vocab that are 6 or more characters. (I have a database, so it’s easy to find such info ^^ ). Anyway, on my PC, I reduced the vocab font size from 50px to 40px, so only those 10 vocab (6+ characters) will wrap. (The longest vocab is 9 characters, so it’s definitely not worth shrinking even further ^^ ).<br> * On the normal Radical and Kanji boxes, if the user’s window gets narrower, it reduces the number of boxes per line. E.g. from 10 down to 8, then down to 6, before finally dropping down to single-line items like the vocab. Since you use a fixed width of 20%, you’ll always have 5 boxes per line, even if the user’s window is narrow. You can use a media query in CSS to make it auto-adjust like the Radicals and Kanji do:
(Note: the rule order is important) If the screen width is: width >= 1200: 20%, i.e. 5 boxes per line 980 <= width <= 1199: 25%, i.e. 4 boxes per line 768 <= width <= 979: 33.33%. i.e. 3 boxes per line ^^^ These are the same window widths at which WK adjusts the Radical and Kanji boxes, so it matches the default site behavior well.
I also added “box-sizing:border-box” above to include the border of the boxes in the width calculations for compatibility with my Golden Burn script, which adds a 1px border to the boxes to keep them from blending together too much. Without that line, the right-most box no longer fits, and it wraps funny. Also, adding the line doesn’t affect anyone not using Golden Burn.
@embe: Great idea! (Not sure why I didn’t think of that before, duh!) An updated version has been posted that works with the https://www.wanikani.com/vocabulary page.
Sorry, but I’m already happy using it with Stylish and I don’t plan on turning it into a JS script for use with Tampermonkey, as it only contains stylistic tweaks.
^^^ I also added https://www.wanikani.com/kanji/* in my local copy, which adds support on the kanji item pages, i.e. the vocab that the kanji is used in. I haven’t tried to do a pull request on github yet, since I want to wait a bit to group any other changes over the next few days.
One of the css rule selectors is just “section > ul”. I’m not sure of the reason, but it seems a little generic, and might catch some unintended elements as support is added for additional urls. On my copy, I’m testing changing it to “ul.multi-character-grid” like the other selectors, and haven’t noticed any adverse effects so far. But I would be interested to hear from Norman if there’s some reason that I haven’t spotted yet.
@embe, So TamperMonkey accepts raw css (as long as it has the //@include in the header)? I didn’t realize that. I figured it had to be Javascript.
^^^ I have no idea as I’m no programmer and just fiddled around with the script. It seems that if the target is not provided this way, it won’t work. In this case, at least.
Oh, actually that’s great idea. I forgot that vocab is listed there too.
EskimoJo said...
Aw, so it's not standalone? I have to have Stylish?
I've got a TamperMonkey/GreaseMonkey version that I can share if @normful has no objections. (It still has full credits to him in the header, and a link to the github repository. I'm only hosting it, but haven't shared the link yet.)
@rfindley: Thanks for pointing out that overly-general rule within section > ul. I’ve fixed it by moving it into ul.multi-character-grid also. And I also forgot there was a vocab list in the kanji pages, so I fixed that too.
ekalz said...I'd love to instal this, but wouldn't it mess with the spaced repetition?
lol
(I'm assuming this is humor. But just so no one misunderstands, this style/script is only for visual style, and doesn't include anything from the Hide Answers script)
EskimoJo said...
Aw, so it's not standalone? I have to have Stylish?
I've got a TamperMonkey/GreaseMonkey version that I can share if @normful has no objections. (It still has full credits to him in the header, and a link to the github repository. I'm only hosting it, but haven't shared the link yet.)
If you click that, it’ll automatically convert all the css into a script that applies the css to the page.
I can see that now on my tablet, but I could swear there was no such button when I was on my PC. :-/ Oh well… I probably looked right at it and didn’t see it.
If you click that, it’ll automatically convert all the css into a script that applies the css to the page.
I can see that now on my tablet, but I could swear there was no such button when I was on my PC. :-/ Oh well… I probably looked right at it and didn’t see it.
The weird thing is it instantly changes from that blue box to the green one if they (somehow) sense you have Stylish installed. I had to remove it in order for this to reappear.