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

Make sidebar width more flexible #218

Merged
merged 4 commits into from
Feb 4, 2025
Merged

Conversation

tomasr8
Copy link
Member

@tomasr8 tomasr8 commented Feb 2, 2025

Related issue: #209

This is a less disruptive version of #214
This simply increases the width of the sidebar to 260px (not set in stone, happy to discuss the appropriate value)

Two more things I considered that we could discuss but didn't include in the PR

  • Adding another breakpoint beyond 1024px which would further increase the sidebar width (not sure if static breakpoints are the way to go though)
  • Making the sidebar more flexible by only defining min/max-width and letting the contents determine the exact value. This would require a larger change to the CSS as the sidebar is currently static (it relies on a fixed margin on .bodywrapper). Though we could convert it to flexbox as well.

Feedback welcome!


📚 Documentation preview 📚: https://python-docs-theme-previews--218.org.readthedocs.build/

@AA-Turner
Copy link
Member

Could we do a percentage width of say 25% (so 256px at the lower bound before the sidebar disappears)?

@tomasr8
Copy link
Member Author

tomasr8 commented Feb 2, 2025

Just to clarify, you mean to have a fixed sidebar width of 256px or some kind of dynamic sizing? The latter would require additional style changes

@AA-Turner
Copy link
Member

A width defined in % or vw units, yes.

@tomasr8
Copy link
Member Author

tomasr8 commented Feb 2, 2025

We might need some more breakpoints for that - 25vw might be too much on very wide screens

@hugovk
Copy link
Member

hugovk commented Feb 2, 2025

And maybe an upper bound where it's a fixed width, compare:

https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/index.html


As it stands, this is PR good for mobile, the sidebar is always shown:

Screenshot

python-docs-theme-previews--218 org readthedocs build_en_218_(iPhone SE)

@tomasr8 tomasr8 changed the title Bump sidebar width to 260px Make sidebar width more flexible Feb 3, 2025
@tomasr8
Copy link
Member Author

tomasr8 commented Feb 3, 2025

I made the sidebar more like the pydata theme Hugo shared. The width is now calculated as min(25vw, 350px) so it is at maximum 350px and at minimum 256px (just before it gets hidden).

As it stands, this is PR good for mobile, the sidebar is always shown:

Fixed, some of the selectors I was using were too specific.

@@ -140,6 +140,8 @@ span.pre {
}

div.sphinxsidebar {
display: flex;
Copy link
Member

Choose a reason for hiding this comment

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

Is flexbox required here?

Copy link
Member Author

Choose a reason for hiding this comment

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

This allows me to remove the hardcoded width: 217px; from div.sphinxsidebarwrapper

@hugovk
Copy link
Member

hugovk commented Feb 3, 2025

(There's a conflict after merging #219.)

@tomasr8
Copy link
Member Author

tomasr8 commented Feb 3, 2025

(There's a conflict after merging #219.)

Will fix it in a bit

@hugovk hugovk merged commit b6a1724 into python:main Feb 4, 2025
14 checks passed
@hugovk
Copy link
Member

hugovk commented Feb 4, 2025

Thanks!

@tomasr8 tomasr8 deleted the sidebar-width branch February 4, 2025 13:33
@tomasr8
Copy link
Member Author

tomasr8 commented Feb 4, 2025

Thanks for the reviews/comments!

@AA-Turner AA-Turner mentioned this pull request Feb 4, 2025
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