New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better alignment for current selected menu item in readthedocs theme #888

Merged
merged 3 commits into from Aug 16, 2016

Conversation

Projects
None yet
4 participants
@styfle
Contributor

styfle commented Apr 8, 2016

It's hard to explain why the alignment looks bad so I will show you a before and after screenshots.

Nothing selected

This looks fine and will remain the same 馃憤

first

Select a menu item

This looks wrong because the sub-menu item moved to the left after being clicked 馃槷

second

My Fix

Here we can see that the menu item is properly aligned when it is selected 馃帀

third

styfle added some commits Apr 8, 2016

Better alignment for current selected menu item
It's hard to explain why the alignment looks bad so I will show you a before and after screenshots.
Only apply fix for subnav
This is only a bug for subnav (nav inside nav) so only apply fix to subnavs.
@d0ugal

This comment has been minimized.

Member

d0ugal commented Apr 24, 2016

This looks good, I'd like to see it have some further testing by more people and more browsers.

@d0ugal d0ugal added this to the 0.16 milestone Apr 24, 2016

@styfle

This comment has been minimized.

Contributor

styfle commented Apr 24, 2016

Ok thanks for the response. How can we get more people to test this?

@d0ugal

This comment has been minimized.

Member

d0ugal commented Apr 29, 2016

That is one of the eternal problems with open source software :) How do you get people to dedicate the time to trying things you want to add before you do a merge or release?

I'll try and get round to this over the next week. As such I have added it to the 0.16 release that I am working towards.

@robertmclaws

This comment has been minimized.

robertmclaws commented Jun 5, 2016

So, I just wanted to jump in with the fix I put in my stylesheets. I use category sections, and the alignment of the items would have been fine if I didn't use categories, but was not fine because I did. I don't think the styling for the TOC is granular enough to account for the additive padding. Meaning each UL in the TOC should have a padding-left value of 0.81em, instead of applying the padding on the LIs.

If you do that, each subsequently nested UL should have the right padding.

At any rate, I put this in my override CSS and it did the trick:

.wy-menu-vertical li.current > a {
    padding-left: 2.42em;
}
.wy-menu-vertical li.current > ul li a {
    padding-left: 3.23em;
}

You can see it in action at http://restier.readthedocs.io/en/latest/getting-started/.

HTH!

@styfle

This comment has been minimized.

Contributor

styfle commented Jun 6, 2016

@advancedrei That works great for subnavs but the top level is misaligned.
Try adding a two .md files in the root directory: index.md and websites.md.

It will look like this:

image

image

I think what you want is:

.wy-menu-vertical .subnav li.current > a {
    padding-left: 2.42em;
}
.wy-menu-vertical .subnav li.current > ul li a {
    padding-left: 3.23em;
}
@robertmclaws

This comment has been minimized.

robertmclaws commented Jun 6, 2016

Yep, that did the trick. I think that should be added to the stylesheet for the next release.

@styfle

This comment has been minimized.

Contributor

styfle commented Jun 6, 2016

@advancedrei I changed this pull request to use that snippet.

@waylan waylan merged commit 2c547a4 into mkdocs:master Aug 16, 2016

4 checks passed

codecov/patch 100% of diff hit (target 93.28%)
Details
codecov/project Absolute coverage decreased by -0.17% but relative coverage increased by +6.72% compared to be6f796
Details
continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@styfle

This comment has been minimized.

Contributor

styfle commented Aug 17, 2016

Thanks! 馃憤

@styfle styfle deleted the styfle:patch-1 branch Aug 17, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment