[UserScript] SRS Grid Details

Nah, that’s all of them. Only got one other script that I may migrate, but its not broken and don’t see adding anything to it, so may not get to it for a while.

This script is no longer compatible with SRS Level Progress.
The other script runs just fine, but you override its data when you add yours in these lines.

$('.srs-progress #apprentice').html("<span>Apprentice</span>").append(makeTable(data.apprentice));
$('.srs-progress #guru').html("<span>Guru</span>").append(makeTable(data.guru));
$('.srs-progress #master').html("<span>Master</span>").append(makeTable(data.master));
$('.srs-progress #enlightened').html("<span>Enlightened</span>").append(makeTable(data.enlighten));
$('.srs-progress #burned').html("<span>Burned</span>").append(makeTable(data.burned));

I already patched it on my end, so it’s up to you whether it’s something you want to see to.

Never really expected anyone to run both together. I’ll look into it when I get a second.

Side note: I’ve toyed with the idea of adding the further breakdowns myself, similar to what the other script does. As if this scripts code isn’t messy enough already. Also been toying around with using Vue.js, but that’s proving to be a challenge when I only have access to js.

1 Like

The breakdown is what I’m really after, I don’t care for the leech count, so that would be great

Coming soon:
image

Need to come up with some styling… :thinking:

1 Like

Change is live. New setting.
Minimal testing done, so let me know if it misbehaves.

1 Like

Looks great!

image

What is this style you are using, please? (with the smaller font for details)

The details being small is something I added myself.

If you want the same you’ll have to edit the code. Around line 123 I changed these four lines

"<tr><td class='progressDetailTableTDFirst'>Radicals</td><td class='progressDetailTableTDSecond'>" + level.radicals() + (level.sub == undefined ? "" : breakdown(level.sub.radicals)) + "</td></tr>" +
"<tr><td class='progressDetailTableTDFirst'>Kanji</td><td class='progressDetailTableTDSecond'>" + level.kanji() + (level.sub == undefined ? "" : breakdown(level.sub.kanji)) + "</td></tr>" +
"<tr><td class='progressDetailTableTDFirst'>Vocabulary</td><td class='progressDetailTableTDSecond'>" + level.vocabulary() + (level.sub == undefined ? "" : breakdown(level.sub.vocabulary)) + "</td></tr>" +
"<tr><td class='progressDetailTableTDFirst'>Total</td><td class='progressDetailTableTDSecond'>" + level.total() + (level.sub == undefined ? "" : breakdown(level.sub.total)) + "</td></tr>" +

to this

"<tr><td class='progressDetailTableTDFirst'>Radicals</td><td class='progressDetailTableTDSecond'>" + level.radicals() + (level.sub == undefined ? "" : "<span class='SRSGBsmall'> "+breakdown(level.sub.radicals)) + "</span></td></tr>" +
"<tr><td class='progressDetailTableTDFirst'>Kanji</td><td class='progressDetailTableTDSecond'>" + level.kanji() + (level.sub == undefined ? "" : "<span class='SRSGBsmall'> "+breakdown(level.sub.kanji)) + "</span></td></tr>" +
"<tr><td class='progressDetailTableTDFirst'>Vocabulary</td><td class='progressDetailTableTDSecond'>" + level.vocabulary() + (level.sub == undefined ? "" : "<span class='SRSGBsmall'> "+breakdown(level.sub.vocabulary)) + "</span></td></tr>" +
"<tr><td class='progressDetailTableTDFirst'>Total</td><td class='progressDetailTableTDSecond'>" + level.total() + (level.sub == undefined ? "" : "<span class='SRSGBsmall'> "+breakdown(level.sub.total)) + "</span></td></tr>" +

and then I added this CSS to a personal style of dashboard edits

.SRSGBsmall {
    display: inline !important;
    font-size: 10px !important;
}
1 Like

@Kumirei’s smaller font mod is something I’ve been meaning to rip off, just haven’t had time. But it’ll be an option eventually.

3 Likes

I tried this without the CSS part and then the font is really huge. I have not figured out where to add the CSS part, it seems to give a parsing error, so i assume there is a specific part where i have to add this :thinking:

I have a separate extension for userstyles, called Stylish, so that’s where I put it. If you want it in the code itself you can just add this somewhere

$('head').append('<style id="SRSGBsmallStyle">'+
                     '.SRSGBsmall {'+
                         'display: inline !important;'+
                         'font-size: 10px !important;'+
                     '}'+
                 '</style>');

Oh i have stylus (basically stylish without spyware), but i wouldnt know how to add that to it :thinking:

I will add this to the script itself, thanks a lot <3

A spyware a day keeps the apple at bay

2 Likes

Hm i added it but it looks misaligned or something. Might be to do with resolution? idk.
I will just use the default for now

Are you using the left/right setting in SRS Grid?

Oh, it actually looks fine with center/center and left/right for about 1 second, until the “SRS Level Progress” script starts running… and then it looks like this:
image

Its bizar that without the edit to the srs grid script, it doesnt show up, and i need to have it enabled if i want to keep using the progress chart script

so pretty
meh.

EDIT: I played around with loading srs grid before the other, but that didnt help either

I see. You could try moving the SRS Grid script to a lower priority, so it loads after SRS Level Progress. I think the latter just appends on the existing SRS distribution, while SRS Grid replaces it.

That didnt work either, but its not a problem. im grateful for your patience and willingness to help out, but i guess i will just use the default