Update version selector #1394
Update version selector #1394
Conversation
sfc-gh-dmatthews
requested review from
sfc-gh-kmcgrady and
sfc-gh-tteixeira
as code owners
|
It looks like I need to tweak the exclamation mark in the warning circle. The mobile view has the wrong color and it looks like it's a little off-center. (Done.) |
| /* Sticky positioning - stays in place as you scroll */ | ||
| position: sticky; | ||
| top: 0.5rem; | ||
| z-index: 50; /* Above header (z-30) */ |
There was a problem hiding this comment.
Do you have an inventory of Z-index in the website?
I think you should be careful with those numbers, and have a list of z-index in the app.
There was a problem hiding this comment.
I added this to the global CSS. Looking at this line, I should probably convert this to Tailwind style here. I think I can convert all of these...
| /* | ||
| * ========================================================================== | ||
| * Z-INDEX REFERENCE | ||
| * ========================================================================== | ||
| * Use this scale to maintain consistent stacking order across the site. | ||
| * When adding new z-index values, update this reference. | ||
| * | ||
| * z-50 - Version selector (sticky container & dropdown menu) | ||
| * - Theme toggle tooltip | ||
| * | ||
| * z-30 - Header navigation (header.module.css) | ||
| * - Image lightbox overlay (image.module.css) | ||
| * - Chat sticky button (chatSticky.module.css) | ||
| * | ||
| * z-20 - Sidebar navigation (sideBar.module.css) | ||
| * - Image lightbox close button (image.module.css) | ||
| * - RefCard containers (refCard.module.css) | ||
| * | ||
| * z-10 - Code block elements (code.module.css, autofunction.module.css) | ||
| * - Search modal & search box (search.module.css, searchModal.css) | ||
| * - Floating nav & gradients (floatingNav.module.css, sideBar.module.css) | ||
| * - Nav icons (navChild.module.css) | ||
| * - Component slider elements (componentSlider.module.css) | ||
| * | ||
| * z-0 - Line highlights in code blocks (base layer) | ||
| * ========================================================================== | ||
| */ | ||
|
|
There was a problem hiding this comment.
I think we can use this approach, for Z-index and for other variables.
take a look in the next PR, you can use it as an example
https://github.com/streamlit/docs/pull/1401/changes
📚 Context
Move the version selector to the top of the page and make it sticky to it's always visible (but only on versioned pages). The appearance is more consistently designed with other elements.
🧠 Description of Changes
After:
Before:
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.