Ah, I didn’t realize that would happen. I just didn’t want it to be centered between the two.
1 Like
Thanks for the report. I may not bother fixing it this time, especially with WK’s change in philosophy to no longer display the full lesson number (and just display the daily number). I’ll think about it.
3 Likes
Yeah, I think your suggestion plus fixing the styling, which has to happen for the dashboard too anyways, is ideal so it stays centered under the lessons.
FWIW I still need it because I won’t be using the Start button, only the lesson picker (and maybe still Omega for lessons but idk, have to think about that one). But even if you decide to let this one go (understandable) I think I can keep it going for myself for the time being (aside from that previous bug report about it no longer working on the item pages because I think WK removed their JQuery from those pages). Thank you for providing it so far!
2 Likes
Yeah, it’s really WK removing styling and jQuery from pages that make me not enjoy maintaining scripts like this. Like, on the surface it’s easy to fix, but keeping it working across all pages and with decent styling can be a pain.
1 Like
You will have to edit the style, lines 48-55. If you insert for every ‘0’ a ‘3px’ it already looks quiet decent. At least for me.
Of course you can choose the amount of pixels you want.
const style = `<style>
.popover { width: auto; }
.lhd-table { display: table; margin: 3px; padding: 3px; }
.lhd-row { display: table-row; margin: 3px; padding: 3px; }
.lhd-cell { display: table-cell; margin: 3px; font-size: 0.875rem; }
.lhd-cell-title { font-weight: bold; padding: 3px 5px 3px 3px; text-align: right; }
.lhd-cell-value { padding: 3px 3px 3px 5px; text-align: left; }
</style>`;
2 Likes
I actually just fixed this for myself a couple days ago too. My approach is based off of investigating why the styling was getting messed up in the first place. It’s because Wanikani is using selectors with * and padding: 0; line-height: 1; font-size: 16px; (among other properties) are being applied to every child element that doesn’t override them with a more specific selector.
So my fix is to add an id to the popover div, change the css selectors to include this id, and do a little reset of those 3 properties to what they’re supposed to be inheriting. But yours is probably the easier route to go.
Edit: I also just realized that there is no longer any need for the lessonMenuItemSelector variable, because the html for the dashboard top nav and other pages’ top nav has been unified.
Selector variables changed to:
const lessonMenuDashboardItemSelector = '.navigation .navigation-shortcuts .lesson-and-review-count__item[href^="/subject-lessons"]';
const lessonMenuItemSelector = '.navigation .navigation-shortcut a[href$="start"]';
const lessonDashboardItemSelector = 'div.todays-lessons__buttons';
Line 51 changed to: const popoverTemplate = '<div id="lhd-popover" class="popover ...
Style changed to:
const style = `<style id="lhd-css">
#lhd-popover * { padding: 1px; font-size: inherit; line-height: 20px; }
#lhd-popover.popover { width: auto; padding: 5px 10px; }
#lhd-popover .lhd-table { display: table; margin: 0; padding: 0; }
#lhd-popover .lhd-row { display: table-row; margin: 0 0 8px 0; padding: 0; }
#lhd-popover .lhd-cell { display: table-cell; margin: 0; font-size: 0.875rem; }
#lhd-popover .lhd-cell-title { font-weight: bold; padding: 0 5px 0 0; text-align: right; }
#lhd-popover .lhd-cell-value { padding: 0 0 0 5px; text-align: left; }
</style>`;
2 Likes
That’s because I can merely read code, I’m simply brave enough to give it a try.
There is still a bug, though just a flaw. It also pops up if you hover over the reviews button in the header menu.
Yeah if you change the selector variables to what I have then that will be fixed.
It works, after I have adjusted line 111. Additionally to your mentioned changes.
function setupMenuPopover(lessonCounts) {
let lessonMenuItem = $(lessonMenuDashboardItemSelector);
if (lessonMenuItem.length === 0) {
return;
}
And as you said, the lessonMenuItemSelector becomes obsolete.
Just in case someone else wants to do these changes too.
1 Like
This selector won’t work when there are zero lessons because there is no link to select on for the href in that case. I’d suggest using the first-of-type pseudo-class instead. e.g.:
const lessonMenuDashboardItemSelector = '.navigation .navigation-shortcuts .lesson-and-review-count__item:first-of-type';
1 Like
Thanks, I hadn’t considered that since I’m not going to be at 0 for a while.
1 Like
Also that reminds me I have a note in my script that shows the total count that I need to make it work on this nav item too. Now I think I’ll also make it so at 0 “today’s lessons” the nav item remains active but with a link to the picker instead.
1 Like