search

Lemmmy / KanjiSchool

Alternative web client for WaniKani
https://kanji.school
GNU Affero General Public License v3.0
16 stars 2 forks source link

Add option to remove transitions during reviews #6

Closed slice closed 2 years ago

slice commented 2 years ago

This might be a bit of a niche feature, but I think an option to disable transitions during reviews would be useful. While it's not the end of the world, I do consider them to be a little distracting at times. After having used the WaniKani lightning mode userscript, I've found that I prefer to review subjects without that minuscule amount of motion, as it feels more comfortable for my brain. It's slightly less mental work to visually process the movement, as small as that may seem. I think that it also makes the overall session feel "faster", as progress from one card to the next is literally instant.

Hopefully this feature request doesn't sound too nitpicky, but I'd definitely benefit from this seeing as I sit down and use KanjiSchool for at least an hour every day.

This feature can also be automatically enabled by default if the user has reduced motion enabled, which is good for accessibility, although I haven't checked if KanjiSchool has any support for this already.

I might take a shot at implementing this eventually if I find the mental energy to do so. I think this block of code is responsible for the transition during reviews, but I haven't actually verified: https://github.com/Lemmmy/KanjiSchool/blob/c54a4e96108cebc241894bbc8fcacaf85ceb8c74/src/pages/session/SessionQuestionContents.tsx#L41

Lemmmy commented 2 years ago

Great suggestion, this would be a brilliant accessibility feature. Thanks for taking a look at the CSS properties and relevant code. Looks like it can also be queried from JavaScript too which would help with the CSSTransition components. I will try to implement this today!

Lemmmy commented 2 years ago

I've made an initial pass on this. Currently, it only affects the transitions during lessons and reviews, and the review progress bar animation.

It will automatically apply if your browser/system is set to prefer reduced motion, or it can be turned on manually with the setting Display settings -> Accessibility -> Prefer reduced motion: image

You may also find the "Shake the subject characters on an incorrect answer" setting helpful: image

There are still a few small hiccups to iron out, for example on some systems there is a one-frame flicker between questions, though that is partially due to the way fonts are loaded. Let me know what you think!

slice commented 2 years ago

Awesome, thank you so much! I appreciate the incredibly short turnaround for this feature request. 💕

I was actually in the middle of my morning reviews when you finished this up. I'm using it now and it's great.