[Userscript/Userstyle] WaniKani Level Vocabulary Grid

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.

Installation

You have two options. Either one works:

1. As a Userscript with Tampermonkey or Greasemonkey: https://greasyfork.org/en/scripts/21628-wanikani-level-vocabulary-grid 
2. As a Userstyle with Stylish: https://userstyles.org/styles/130500/wanikani-level-vocabulary-grid

Source

https://github.com/normful/wanikani-level-vocabulary-grid

Screenshots



Changelog


- 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

2 Likes

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:

ul.multi-character-grid li.character-item {width:25%; box-sizing:border-box;}
@media (max-width: 979px) and (min-width: 768px) {
    ul.multi-character-grid li.character-item {width:33.33%;}
}
@media (min-width: 1200px) {
    ul.multi-character-grid li.character-item {width:20%;}
}

(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.

Great userstyle!!  I love it.

Ah sweet! Looks much better.

I am assuming you will take on rfindley’s sizing advice, so I’ll wait for that.

@rfindley: You’re the best! :slight_smile:

I incorporated your feedback, refactored it with Stylus, updated it on Userstyles.org, and stuck it in a repo at https://github.com/normful/wanikani-level-vocabulary-grid in case you or anybody else wants to fork and improve it.

Cheers!

It would be nice if you also enabled it on vocab pages.

P.S. The new version works in Stylish but doesn’t as a standalone script in tampermonkey.

@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.

It doesn’t work on vocab pages under Stylish.

edit. Made it work by adding aditional "." to this line "^http(s?)://www.wanikani.com/(level.|vocabulary.)$".

Also, adding :
// @include     https://www.wanikani.com/level/

// @exclude     https://www.wanikani.com/level//
// @include     https://www.wanikani.com/vocabulary
// @exclude     https://www.wanikani.com/vocabulary/ 

to the script make it work under tampermonkey. :slight_smile:

Cheers!

^^^
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. :slight_smile: 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.

Aw, so it’s not standalone? I have to have Stylish?

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.

I also added a minimal JS version to https://greasyfork.org/en/scripts/21628-wanikani-level-vocabulary-grid that just loads the stylesheet for people who don’t like Stylish, and updated the first post to use include that installation method.

I’d love to instal this, but wouldn’t it mess with the spaced repetition?

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)

normful said... [...]
I also added a minimal JS version to https://greasyfork.org/en/scripts/21628-wanikani-level-vocabulary-grid that just loads the stylesheet for people who don't like Stylish, and updated the first post to use include that installation method.
 Cool!
I should probably try out Stylish sometime, since I'm now up to 3 userscripts that are css-only.
rfindley said...
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.)
 Yes please if allowed.

You can choose to install it as a userscript on the stylish page. No need to host it on greasemonkey.

Mempo said... You can choose to install it as a userscript on the stylish page. No need to host it on greasemonkey.
 How does that work?  I couldn't find anything, but maybe I'm not looking in the right place.

EskimoJo said...
 I've got a TamperMonkey/GreaseMonkey version that I can share if @normful has no objections. 
 Yes please if allowed.
 @normful now has a userscript link in the original post.
rfindley said...
Mempo said... You can choose to install it as a userscript on the stylish page. No need to host it on greasemonkey.
 How does that work?  I couldn't find anything, but maybe I'm not looking in the right place.

 If you don't have Stylish installed, you should be able to see this (instead of a green button with "install with Stylish"):



If you click that, it’ll automatically convert all the css into a script that applies the css to the page.

Mempo said... If you don't have Stylish installed, you should be able to see this (instead of a green button with "install with Stylish"):



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.

rfindley said...
Mempo said... If you don't have Stylish installed, you should be able to see this (instead of a green button with "install with Stylish"):



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.