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

ui: improve menu folding #989

Merged
merged 5 commits into from
Mar 6, 2020
Merged

Conversation

WofWca
Copy link
Contributor

@WofWca WofWca commented Jul 23, 2019

Fold/unfold the menu bar just by the amount of scroll, not by its full width and remove animation.

Demo: https://wofwca.github.io/mdBook/format/config.html

Details

Before

This is noticeable on touchscreen devices. Suppose you scroll the page so that the line you're reading is the first line on the screen. Now, if you decide to scroll just one line up the menu bar unfolds and covers the part you were reading.

bad

After

good

Existing functionality checklist/TODO

  • Unfolds on hover
  • Fold-unfold transitions (on hover, on sidebar show)
  • Folds-unfolds on scroll
  • Unfolded when the sidebar is visible
  • Always visible in case if JS is disabled

❓ Not sure what to do with animation. E.g. what do we do if an animation is playing and the user decides to scroll?

Fold/unfold the menu bar just by the amount of scroll, not by its
full width
@weihanglo
Copy link
Member

weihanglo commented Jul 27, 2019

Wow. I love this improvement.
Just one concern: To what extent should we care about cross-platform compatibility? Though position: sticky is widely adopted about 90% of global usage, but only 71% use the unprefixed version.

@WofWca
Copy link
Contributor Author

WofWca commented Jul 27, 2019

but only 71% use the unprefixed version

Here we manipulate the presence of the class named sticky that contains both prefixed and unprefixed versions.

Rewrite it to use `position:` `sticky` and `relative` instead
of continuous programmatic position changes

On-hover folding-unfolding transition removal is a side-effect
@WofWca WofWca marked this pull request as ready for review July 28, 2019 10:15
@weihanglo
Copy link
Member

Looks good to me. Just a weird out-of-scope bug.

On any mobile supports auto-bouncing effect when scrolling area exceeded. And then we may face "false positive" when doing a scroll-to-up action. This may be separated to another issue.

Still thanks for this improvement.

@WofWca
Copy link
Contributor Author

WofWca commented Sep 21, 2019

Ah, you must be talking about this, right?

Appetize.io

My mobile devices don't have this, I didn't know it was a thing.

@Dylan-DPC-zz
Copy link

@WofWca hey! if you can rebase this, i'm ready to review and merge it :) thanks

@WofWca
Copy link
Contributor Author

WofWca commented Feb 28, 2020

Will do within the next couple of days.

@WofWca
Copy link
Contributor Author

WofWca commented Feb 29, 2020

@Dylan-DPC Done.
Also, the overscroll problem (#989 (comment)) is gone, thanks to #1070

@Dylan-DPC-zz Dylan-DPC-zz merged commit fd56a53 into rust-lang:master Mar 6, 2020
bors added a commit to rust-lang/cargo that referenced this pull request Apr 7, 2020
Upgrade to mdBook v0.3.7

This bumps the requirement from Rust v1.34.0 to v1.35.0 for building docs. AFAICT CI is using nightlies so that should be fine, but I thought I'd mention it in case someone thinks this impacts contributors in any way.

Other than that, there are a few changes that might impact some users in a visible way, like automatic dark theme support for those who picked that perference in their browser, possible color changes to the scrollbar and to the font size, change in the spacing in the sidebar entries, and many more changes and fixes that won't be too immediately impactful but very good all around.

I checked changes from transitive dependency bumps as well, AFAICT there is nothing that *should* impact the final rendering.

**tl;dr:** Nothing will explode. Probably.

For completeness, my raw notes of outtakes as I was reviewing the change logs:

```
[cosmetic]
v0.3.2 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-032
Added automatic dark-theme detection based on the CSS prefers-color-scheme feature. This may be enabled by setting output.html.preferred-dark-theme to your preferred dark theme. #1037
rust-lang/mdBook#1037

v0.3.3 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-033
Improvements to the automatic dark theme selection. #1069
rust-lang/mdBook#1069

v0.3.7 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-037
Fixed theme selector focus. #1170
rust-lang/mdBook#1170

* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
* users who picked the dark color scheme in their browser will see the cargo doc in dark.

[cosmetic]
v0.3.2 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-032
Use standard scrollbar-color CSS along with webkit extension #816
rust-lang/mdBook#816

* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
* scroll bar color might change i guess.

[helpful]
v0.3.2 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-032
Updated highlight.js for syntax highlighting updates (primarily to add async/await to Rust highlighting). #1041
rust-lang/mdBook#1041

* not sure cargo doc has many code examples with async/await, but there we go.

[warning]
v0.3.2 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-032
Raised minimum supported rust version to 1.35. #1003
rust-lang/mdBook#1003

* from 1.34.0.

[cosmetic]
v0.3.4 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-034
Switch to relative rem font sizes from px. #894
rust-lang/mdBook#894

* will impact some displays, but px is already an abstract thing so maybe not that big of an impact.

[warning]
v0.3.5 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-035
Updated pulldown-cmark to 0.6.1, fixing several issues. #1021
rust-lang/mdBook#1021

* from 0.5, breaking changes.
* parsing only -- the team had to do multiple changes but nothing seems like it would impact final rendering

[cosmetic]
v0.3.6 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-036
Adjusted spacing of sidebar entries. #1137
rust-lang/mdBook#1137

[warning]
v0.3.6 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-036
Handlebars updated to 3.0. #1130
rust-lang/mdBook#1130

* from 2.0
* https://github.com/sunng87/handlebars-rust/blob/master/CHANGELOG.md
* strictly maintenance and perf AFAICS, no changes to final rendering.

[cosmetic]
v0.3.6 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-036
Adjusted the menu bar animation to not immediately obscure the top content. #989
rust-lang/mdBook#989

* personal fave.

[cosmetic]
v0.3.7 https://github.com/rust-lang/mdBook/blob/master/CHANGELOG.md#mdbook-037
Code spans in headers are no longer highlighted as code. #1162

* users will see some headers change, probably.

[fixes]
+ ~13 fixes impacting rendering in less immediately visible ways.
rest should have no impact on end-user experience.
```
Ruin0x11 pushed a commit to Ruin0x11/mdBook that referenced this pull request Aug 30, 2020
* ui: improve menu folding

Fold/unfold the menu bar just by the amount of scroll, not by its
full width

* refactor: use a variable for the menu bar height

* Fix menu scroll jittering, remove hover folding smoothness

Rewrite it to use `position:` `sticky` and `relative` instead
of continuous programmatic position changes

On-hover folding-unfolding transition removal is a side-effect
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants