GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | |||||||||||||||||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | |||||||||||||||||
GeezerVison is showing github.com — Make sidebar scrollable and sticky (on modern browsers) by dlukes · Pull Request #91 · python/python-docs-theme Conversation
Contributor
Fixes #20.
Sorry, something went wrong. Uh oh!
There was an error while loading. Please reload this page. All reactionsJust make the sidebar stick to the top with CSS and show a scrollbar on overflow. There's no fallback for older browsers -- since up to now, this didn't work for anyone (because "intelligent" scrolling has been broken for years), I assume improving the UX at least for modern browsers is still a net improvement.
All reactions
Sorry, something went wrong. Uh oh!
There was an error while loading. Please reload this page.
Contributor
Author
All reactions
Sorry, something went wrong. Uh oh!
There was an error while loading. Please reload this page.
Member
All reactions
Sorry, something went wrong. Uh oh!
There was an error while loading. Please reload this page.
Member
All reactions
Sorry, something went wrong. Uh oh!
There was an error while loading. Please reload this page.
Contributor
Author
All reactions
Sorry, something went wrong. Uh oh!
There was an error while loading. Please reload this page.
|
There was an error while loading. Please reload this page.
|
OK, so right after I posted my previous reply, I accidentally stumbled upon a way to trigger the behavior you're experiencing... Sigh, typical. It's sort of weird though -- for some reason, the sidebar gets out of whack whenever a browser UI element pops up at the bottom (???), e.g. the search bar: Or the dev tools pane: I've no idea how or why this is happening but I'll investigate. (I'm guessing something funky is happening with the sidebar's JavaScript, which makes me want to get rid of the whole thing, but see above.) |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
Oh, and zooming in on the page also triggers the behavior you've described. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
I can reproduce as well on macOS Monterey with Firefox, Chrome and Safari. To repro I needed to reduce the height of the window: Or open a page with content longer than the window height: |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
Sorry for the long turnaround, it's a busy time of the year, my wife and I are expecting a second daughter in a month or so, etc. :) Please take a look at the fix I just pushed, when you get a chance, and let me know if it works for you, @JulienPalard and @hugovk. It should even fix an existing bug in the placement of the «, which is meant to stay put vertically centered in the viewport, but gets out of whack when you adjust the zoom level of the page. Other than that, should I worry about what happens when using a browser that doesn't support viewport units? Especially w.r.t. to the collapse button -- honestly, I'd rather not put too much work into making it behave nicely on older browsers if it's going to be axed at some point in the future anyway. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
(a build artefact is available for local tests in the "Checks" tab) |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
|
Thanks! I've noticed another issue though -- when the content is short, the sidebar still stretches to full viewport height. I mean, that's what the CSS says, so of course it does :) Here's what it looks like, my patch on the left, current version on the right: I assume we'd rather keep the current behavior? Adding so much empty space is not exactly broken, but it's definitely unnecessary. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
I've pushed a fix which relies on flexbox instead of floats for the sidebar layout. Let me know what you think. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
LGTM, tested on Firefox 95 (on Debian (desktop)) and on Firefox 91 (on Mobian (phone)). I'd appreciate if someone else could take a look at it before merging, I don't trust my skills at reviewing front-end. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
Thanks @dlukes for the PR ! |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
Thank you for the assistance! If you have a minute, I'm just curious -- when can I expect this to land on the live website? Very roughly speaking of course -- next patch release, next minor release? Later than that? |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
I released python-docs-theme v2022.1 with your commits, so it's just the time to wait for a new build on the backend, which is govenred by a daily cron, so 24h max. In fact the cron has already picked up some, like fr/3.9 so you can already see it online, 24h being the time for it to be fully deployed on all versions and all languages. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
Oh wow, great! |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
Successfully merging this pull request may close these issues.
make sidebar sticky
There was an error while loading. Please reload this page.