-
-
Notifications
You must be signed in to change notification settings - Fork 58
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
Fix the appearance of version/language selects #74
Conversation
The appearance:none needs a -webkit prefix to work in Safari and Chrome on Android. Adding padding to the select's outer div fixes arrow overlapping with the select's value. Adding outline offset for focus-visible makes the outline go around the border instead of within it (just around the inner select itself).
On some mobile screens, the top search form was overflowing. I fixed it by adding max-width to the navbar. This happens on pages with long method names in the body that are inside paragraphs and cannot be split, which makes the window wider than 100%. The default paddings and margins for lists and blockquotes look good on desktop, but make the readable part of the screen too narrow on mobile, I made them narrower. |
I deployed this fix on https://docs.python.org/3.11/ (english only, but other languages will automatically follow in the next 24 hours) so it can easily be reviewed. |
Thank you! I will need to fix that gray background on the switchers. It isn't there when I test in devtools q |
Some problems in Safari mobile browser were fixed: right margin on the search box (between the button and the border), color of the button; Language and version switchers in both Chrome for Android and Safari had gray background.
@JulienPalard, could you deploy the latest version? I would like to see if the background color on the selects is fixed. |
For the record (also using the PR comment as an extension of my own memory), here's what it take to rebuild in production:
@obulat rebuild done for 3.10 only, english only. |
Thank you, @JulienPalard ! I fixed a silly button border error, and now the gray switchers background on Chrome on Android is fixed. I don't have an iphone to test the site in Safari, though. |
I'm building it again on docs.python.org/3.10/ [building ...] build complete. |
On docs.python.org/3.10 on my phone I'm getting a css issue: I do not have the issue on my desktop though, which is properly sending validation requests like:
|
Thanks \o/ |
This PR fixes several issues in the appearance of version and language selects in Safari and Android Chrome.
On narrow screens, the theme overrides the native appearance of selects to make them look the same in all browsers. However, the non-prefixed
appearance: none
doesn't work in Safari and Chrome for Android, so I added the-webkit
prefix.I also added right padding to the version switcher to fix the overlapping of the arrow and the version number when the version number is long.
When clicking the select or focusing on it using tab, user can see an outline. Currently, it goes around the select itself, not the outer div, and looks like it's inside the box. I added the outline-offset to fix this.