Wanikani Reorder Ultimate [old version, not working]


#315
rfindley said...
Frouzich said...
rfindley said...
Frouzich said...
rfindley said...
Mempo said...If anybody else might want this little customization, just change line 182 to
$('head').append('')">https://cdn.rawgit.com/MempoWK/32241b3891a27d457cdb98504b6c47e8/raw/1cb758c4ab25329c104accb43ab540c5...;
I love xMunch's script, but I don't use scripts that dynamically bring in outside html/css for security reasons.  If anyone's interested, I created a self-contained version that has the images, html, and css embedded directly in the script.  Maybe xMunch will see this post and want to do similar? :-)
Anyway, if anyone wants to use it as a reference, or as a starting point for something similar to what Mempo did above, I have it stored privately (unlisted) on Greasyfork:  https://greasyfork.org/scripts/19088-wanikani-reorder-ultimate-2
 Thanks!

Edit: It doesn't quite look like the screenshot, though. And the 1x1 button is gone...
 Really??  huh.  Maybe I messed something up in the upload earlier.  It works fine on mine.  I'll check it out on my WK test account.
 [...]
This is how it looks. I've only tried it in lesson mode though, have to wait for reviews to pop up.
 Ahh... yeah, that looks normal to me for Lesson mode.  1x1 doesn't make sense for Lessons, since they're already all-in-one.
As for Review mode, I updated my post above to show the snapshot of what I'm seeing.
 Okay, sorry for the confusion. Kinda odd, when I finally need for there to be a few reviews, there are none whatsoever. >_>

#316
Frouzich said... Okay, sorry for the confusion. Kinda odd, when I finally need for there to be a few reviews, there are none whatsoever. >_>
 Lol... that's why I have a free test account that just has reviews waiting :-)

#317

Mine looks like this.


Wish I knew how to code these side images with css so they could scale with different resolutions… especially becasue next week I’m getting QHD monitor so it may look too small.

#318
embe said... Mine looks like this.

Wish I knew how to code these side images with css so they could scale with different resolutions... especially becasue next week I'm getting QHD monitor so it may look too small.
 What are those pink circle things at the end of the line of buttons under the input?

#319
embe said... Mine looks like this.
Looks nice.  What's that find on the review item??

Wish I knew how to code these side images with css so they could scale with different resolutions... especially becasue next week I'm getting QHD monitor so it may look too small.
 You can make the image itself larger, and use a screen percentage to specify the width to scale to.  For example:

@media (max-width: 400px) { #my_img {width: 20px;} }
@media (max-width: 1920px) { #my_img {width: 100px;} }

Doing something like that also allows it to scale dynamically as you resize the window, all without any javascript.

#320
marionette said...
embe said... Mine looks like this.

Wish I knew how to code these side images with css so they could scale with different resolutions... especially becasue next week I'm getting QHD monitor so it may look too small.
 What are those pink circle things at the end of the line of buttons under the input?
 That's my SRS indicator script. Basically tells you what level each item is.

/t/Userscript-Wanikani-Review-SRSLevel-Indicator/11382/1


#321
Mempo said...
marionette said...
embe said... Mine looks like this.
[...]
Wish I knew how to code these side images with css so they could scale with different resolutions... especially becasue next week I'm getting QHD monitor so it may look too small.
 What are those pink circle things at the end of the line of buttons under the input?
 That's my SRS indicator script. Basically tells you what level each item is.
 Whoa, cool! :O

#322
rfindley said...
Mempo said...If anybody else might want this little customization, just change line 182 to
$('head').append('')">https://cdn.rawgit.com/MempoWK/32241b3891a27d457cdb98504b6c47e8/raw/1cb758c4ab25329c104accb43ab540c5...;
I love xMunch's script, but I don't use scripts that dynamically bring in outside html/css for security reasons.  If anyone's interested, I created a self-contained version that has the images, html, and css embedded directly in the script.  Maybe xMunch will see this post and want to do similar? :-)
Anyway, if anyone wants to use it as a reference, or as a starting point for something similar to what Mempo did above, I have it stored privately (unlisted) on Greasyfork:  https://greasyfork.org/scripts/19088-wanikani-reorder-ultimate-2
 Could you give an example what could go wrong?

I thought that was quite an interesting technique. And it doesn't seem to be doing anything bad because the first time around it simply didn't do anything because it didn't recognise my file as css. So I don't see how injected javascript would work (if that was what you were thinking about).

#323

What find? What do you mean? The strange font? It’s Jitai script with some random font I have downloaded.

Speaking of scaling your method would reduce the quality of the image wouldn’t? Pixelate or blurry it. I’d like to avoid that.


#324
marionette said...
embe said... Mine looks like this.

Wish I knew how to code these side images with css so they could scale with different resolutions... especially becasue next week I'm getting QHD monitor so it may look too small.
 What are those pink circle things at the end of the line of buttons under the input?
 1)
That looks really cool indeed! Could you share the css file?

That font on your reviews looks impossible though. As if reviews with ordinary fonts aren't hard enough :/

rfindley said...
embe said... Mine looks like this.
Looks nice.  What's that find on the review item??

Wish I knew how to code these side images with css so they could scale with different resolutions... especially becasue next week I'm getting QHD monitor so it may look too small.
 You can make the image itself larger, and use a screen percentage to specify the width to scale to.  For example:

@media (max-width: 400px) { #my_img {width: 20px;} }
@media (max-width: 1920px) { #my_img {width: 100px;} }

Doing something like that also allows it to scale dynamically as you resize the window, all without any javascript.
2)
 I was confused by your example. Thought you meant something like:
#my_img { width: 50% }
which will scale according to screen width (although I'm not sure if it's always screen width or just parent width, see documentation for more info ;p )

But your example works too of course. Although media queries are more work.

#325
Mempo said... That's my SRS indicator script. Basically tells you what level each item is.
/t/Userscript-Wanikani-Review-SRSLevel-Indicator/11382/1
 Oh... I forgot about this one!  Someone was asking a day or so ago about scripts for seeing what SRS level an item is on.  Had I remembered, I'd have pointed them to yours.  [now, where was that thread....?]

#326

Sure. 
https://cdn.rawgit.com/mjuzikfrik/2e6cd955a2804ab319b7/raw/1b985354edad9edeed4cbaf5527e9a2acdbe914b/style.min.css
https://gist.githubusercontent.com/mjuzikfrik/d42243ef321af6870da5/raw/24735d36bec0689bc6b200a5d693c77d1fbc595c/UI.HTML

I think I’m going to put them into my script like rfindley did so I have everything in one place.

edit. I’ve forgotten that I had to change a small portion of the code to make my images work. I’ll upload it in a bit or the whole code.


#327
Mempo said...
rfindley said...I love xMunch's script, but I don't use scripts that dynamically bring in outside html/css for security reasons.  If anyone's interested, I created a self-contained version that has the images, html, and css embedded directly in the script.  Maybe xMunch will see this post and want to do similar? :-)
Anyway, if anyone wants to use it as a reference, or as a starting point for something similar to what Mempo did above, I have it stored privately (unlisted) on Greasyfork:  https://greasyfork.org/scripts/19088-wanikani-reorder-ultimate-2
 Could you give an example what could go wrong?

I thought that was quite an interesting technique. And it doesn't seem to be doing anything bad because the first time around it simply didn't do anything because it didn't recognise my file as css. So I don't see how injected javascript would work (if that was what you were thinking about).
The original script loads HTML as well, which could contain a javascript section (not that xMunch would do that, but it's the principle).
And CSS can be hazardous in its own ways... like styling something to look like something it's not.  Granted, it's a lot harder to do something truly sinister with CSS, but nonetheless, there are creative people out there :-)

#328
Mempo said...2)
 I was confused by your example. Thought you meant something like:
#my_img { width: 50% }
which will scale according to screen width (although I'm not sure if it's always screen width or just parent width, see documentation for more info ;p )
But your example works too of course. Although media queries are more work.
 Ahh, sorry... my wife walked in for a conversation in the middle of typing that.  I started talking about percentages, but then switched to writing about media queries.  I thought the percentage might be messy, depending on what else is going on in the DOM.

#329

Here it is Mempo
https://gist.githubusercontent.com/mjuzikfrik/8bb0f1154d00eda7eff74e7ee6dbde65/raw/8215d35ebd0fb4f009fc0cdd1ca5cff5fee6fec1/gistfile1.txt


#330
embe said... Here it is Mempo
https://gist.githubusercontent.com/mjuzikfrik/8bb0f1154d00eda7eff74e7ee6dbde65/raw/8215d35ebd0fb4f009fc0cdd1ca5cff5fee6fec1/gistfile1.txt
 Thanks!

#331
Mempo said...
embe said... Here it is Mempo
https://gist.githubusercontent.com/mjuzikfrik/8bb0f1154d00eda7eff74e7ee6dbde65/raw/8215d35ebd0fb4f009fc0cdd1ca5cff5fee6fec1/gistfile1.txt
 Thanks!
 I didn't understand your question about images earlier, but now I do. Did you use images for the buttons because you don't know the css or...just because?

#332

I used the images because that how it was from the start and I really don’t know html or css. Just replaced images and copied one thing or two… a little bit of logic and came up with that. :slight_smile: I used to make skins for foobar so I know some things but not necessarily what’s here. If I knew css I’d probably made them this way in order not to host any files and have the opportunity to make them look good on any screen resolution.


#333
rfindley said...
Mempo said...
rfindley said...I love xMunch's script, but I don't use scripts that dynamically bring in outside html/css for security reasons.  If anyone's interested, I created a self-contained version that has the images, html, and css embedded directly in the script.  Maybe xMunch will see this post and want to do similar? :-)
Anyway, if anyone wants to use it as a reference, or as a starting point for something similar to what Mempo did above, I have it stored privately (unlisted) on Greasyfork:  https://greasyfork.org/scripts/19088-wanikani-reorder-ultimate-2
 Could you give an example what could go wrong?

I thought that was quite an interesting technique. And it doesn't seem to be doing anything bad because the first time around it simply didn't do anything because it didn't recognise my file as css. So I don't see how injected javascript would work (if that was what you were thinking about).
The original script loads HTML as well, which could contain a javascript section (not that xMunch would do that, but it's the principle).
And CSS can be hazardous in its own ways... like styling something to look like something it's not.  Granted, it's a lot harder to do something truly sinister with CSS, but nonetheless, there are creative people out there :-)
 I know it's not "net safe" to use these practices but it made things easier to manage.  It's a lot easier for me to manage 3 different files than 1 giant file using 3 different "languages".

#334
xMunch said... I know it's not "net safe" to use these practices but it made things easier to manage.  It's a lot easier for me to manage 3 different files than 1 giant file using 3 different "languages".
 Definitely understandable.  I'm not sure how this would work on github, but on Greasyfork you can reference a specific version of a file, and that version is permanent/non-modifiable.  That makes it more trustable, since only the greasyfork site operators could modify it.  Of course, there's still vulnerability to man-in-the-middle attacks if https isn't used.