Minor Menu Updates

I can see it being better for the outline.

Using a button also gives you the keyboard listeners for free (just listen to a click).

<button onClick={() => console.log('hello')}>Button</button>

The onClick will fire when space or enter is pressed (while the button focused).

This also removed the need for the aira attributes as well. (Although keeping the role might be a good idea).

This update made me realize the power of search as it was a feature I didn’t really pay much attention to. Really helps you use the site as a dictionary to a limited extent. Overall, I am enjoying the continued addition of charm to the UI.

2 Likes

I’ll do the unthinkable (for me at least) and just say I’m happy with the changes. Not even going to criticize anything.

As an FYI, I use the Ghostery plugin which blocks Gravatar by default. So for me, my icon doesn’t show up at all if I don’t explicitly go in and whitelist the site. What that means is the dropdown menu is completely invisible for me.

I know you can say “well that’s your fault for using the plugin so it’s your responsibility to fix” but it is quite a popular one these days and I know I won’t be the first to encounter this issue. Would you consider putting a border or something around the icon so that there is something in that space when the icon doesn’t load?

3 Likes

We’ll look into making the default avatar, well, the default, perhaps as a background or something.

Another project we’re looking at is hosting the avatars ourselves and keeping them in sync with the forums. Gravatar isn’t rad, but that particular change was outside what we wanted to do this time around.

6 Likes

I’m asking out of genuine curiosity (I know nothing about Gravatar and am not debating the usefulness of this request): why would you use Gravatar for your icon but then block it?

I would just really like to bring the free portion up to level 5.

Fantastic to see you making these kind of changes!

A huge thing for me … and relatively simple to fix … is text sizes on mobile.
Many texts have their font size ‘fixed’ on mobile screens to force them to be small …

I can change my phone default text size … but these ‘fixed’ texts refuse to budge because the css has them stuck at a smaller size.
For accessibility they should not be fixed … and if anything texts (and buttons) should be made larger on smaller screens so they are easier to read and tap.

See attached screen shots showing a screen with default text size and then large text size - you can see the stuff that does not resize … especially the eeny teeny menu bar :smiley:

I work on web and mobile dev so happy to help out / test how ever I can.
Thanks for a great site!

Cheers,
Cathy

9 Likes

You already have the border effect on mouseover, so I was thinking just have that be up all the time, just to say “there’s supposed to be something here.” A default picture would be fine too, but that seems to me like it might be a more complicated change. I didn’t want to make it overly complicated, as long as there’s just something there. Otherwise you’ll likely see at least a few people showing up to ask “why is the menu broken/hidden?”

I’m not using Gravatar. Gravatar is an option on Discourse, but I’ve uploaded a picture directly. I’m still using the default picture on the WK website itself. Even so, I didn’t explicitly block Gravatar. The Ghostery plugin, which I use for privacy and security reasons, blocks the site by default. I don’t mind whitelisting it for WK, but it took me a couple seconds to figure out what was going on, because I didn’t know it was blocking Gravatar.

1 Like

Ah, I see. The situation is exactly identical for me. I was confused because I didn’t realise the default image would also be affected by Gravatar being blocked.

1 Like

Also, it seems my [Wanikani Forums Lesson/Review Status] script is now affecting the logo size and obscuring the thread title when scrolled to the top of the thread.

I’ll fix ASAP, but just wanted to note here in case people report issues that you’re not seeing on your side.

3 Likes

Thank you for this info. I was wondering why the default avatar (no Gravatar account) does not show up. I am not using the same plugin though.

Very nice changes, cool!

Well, I’ll admit when I said I expected other people to also encounter the same issue, I did expect it to be a bit longer than 2 minutes.

2 Likes

This x1000!! I also do the same type of work and it drives me nuts that at a minimum the copy and buttons don’t adjust size depending on the size of the viewport.

2 Likes

Whoaaa, this is awesome! Thank you for listening to my feedback. :two_hearts:

It would be perfect if Esc closed these dropdowns once they’re open :).

image

9 Likes

Wish List: Dark Mode

14 Likes

I don’t use Gravatar at all, and I didn’t see where the Account button was at first. Maybe just add a background color? An icon (or the letter A) when there’s no gravatar image associated to the account?

Well the styling does mess with my Levels Overview Plus Script a little bit, but it still works! I was afraid it would get completely broken.

1 Like

Isn’t inline onClick depricated?

Yes, but the wanikani team are using react. The code example provided is using JSX, and is not valid HTML.

2 Likes