Skip to content
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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

doc: decouple sidebar scrolling #1274

Closed
wants to merge 5 commits into from

Conversation

silverwind
Copy link
Contributor

Small usability change for the doc website here.

This lets the navigation sidebar have its own scrollable area, so it always stays on screen, making it easier to navigate from section to section, especially when the page itself is scrolled off by many screens, which would otherwise require the user to scroll to the far top to navigate to another section.

Should work in IE7 and above (The limiting factor being position:fixed).

cc: @chrisdickinson

@silverwind silverwind added the doc Issues and PRs related to the documentations. label Mar 26, 2015
@brendanashworth
Copy link
Contributor

LGTM

@chrisdickinson
Copy link
Contributor

Hm, this obscures the items below the fold on the left hand sidebar, without giving any visual indication that the area is scrollable. If we add some kind of visual indicator of scroll-ability, I'd be a bit more amenable to this. That said, I'm curious: do folks find themselves switching between sections of the docs often? Is this a behavior we want to optimize for?

@brendanashworth
Copy link
Contributor

I've found myself wanting it more than a few times, as some doc pages like crypto are very long. I'd like it 👍

@silverwind
Copy link
Contributor Author

@chrisdickinson invisible inactive scrollbars is an OS X only issue, other platforms show them all the time, but some sort of indicator could be in order. How do you like something like this:

#column2.interior:after {
  content: '';
  position: fixed;
  bottom: 0;
  width: 234px;
  height: 5em;
  background: linear-gradient(rgba(242,245,240, 0), rgba(242,245,240, 1));
}
#column2 ul {
  padding-bottom: 5em;
}

screenshot_41

Gradient would bump us to IE10, but I think this counts as a graceful degradation case, as Windows has always visible scrollbars.

@chrisdickinson
Copy link
Contributor

Yep, that's perfect! LGTM with that addition.

@silverwind
Copy link
Contributor Author

@brendanashworth can i get your LGTM on the fade-out?

@@ -360,7 +372,7 @@ span.type {
margin-top: 1.25em;
background: #f2f5f0;
margin-bottom: 0;
padding-bottom: 2.5em;
padding-bottom: 5em;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a big fan of how large this padding is, could we do with something smaller, maybe 2em?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately it needs to be big now with the gradient, or else items would still be faded out when scrolled to the end. I think 4em is the lower limit, I'll experiment a bit.

@brendanashworth
Copy link
Contributor

Besides the padding nit, this LGTM

@silverwind
Copy link
Contributor Author

Went with 4em, with the gradient being 5em. The fading isn't really noticeable at the bottom this way.

silverwind added a commit that referenced this pull request Mar 28, 2015
This lets the doc sidebar have its own scrolling container, making the
page easier to navigate in cases where previously the menu was scrolled
far off.

PR-URL: #1274
Reviewed-by: Chris Dickinson <christopher.s.dickinson@gmail.com>
Reviewed-By: Brendan Ashworth <brendan.ashworth@me.com>
@silverwind
Copy link
Contributor Author

landed in 19641b1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
doc Issues and PRs related to the documentations.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants