Fix positioning for detail toggles on mobile. #84602
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The rule that was supposed to put these in the right place on mobile had an extra class (item-list) in its selector, but that class isn't actually part of the DOM for everything we care about. After removing that extra class, I found the rule wasn't firing. That's because @media doesn't increase specificity (https://css-tricks.com/how-much-specificity-do-rules-have-like-keyframes-and-media/), and the rule was being overridden by the later rule with the exact same selector. I moved all the details-related rules above the @media queries because in general I think we expect rules inside @media to override others. However, I didn't move the rules that I haven't touched, since I don't know all the places to check that they are working as expected.
Contributor
|
Some changes occurred in HTML/CSS/JS. |
rust-highfive
added
the
S-waiting-on-review
| /* The hideme class is used on summary tags that contain a span with | ||
| placeholder text shown only when the toggle is closed. For instance, | ||
| "Expand description" or "Show methods". */ | ||
| details.rustdoc-toggle > summary.hideme { |
Member
There was a problem hiding this comment.
Instead of "hideme", what do you think about "hide-me"? Easier to read.
| cursor: pointer; | ||
| } | ||
|
|
||
| details.rustdoc-toggle > summary::-webkit-details-marker { |
Member
There was a problem hiding this comment.
Is there an equivalent on firefox?
Collaborator
|
☔ The latest upstream changes (presumably #84754) made this pull request unmergeable. Please resolve the merge conflicts. |
Contributor
Author
|
Closing in favor of #85289. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The rule that was supposed to put these in the right place on mobile had
an extra class (item-list) in its selector, but that class isn't
actually part of the DOM for everything we care about.
After removing that extra class, I found the rule wasn't firing. That's
because @media doesn't increase specificity
(https://css-tricks.com/how-much-specificity-do-rules-have-like-keyframes-and-media/),
and the rule was being overridden by the later rule with the exact same
selector.
I moved all the details-related rules above the @media queries because
in general I think we expect rules inside @media to override others.
However, I didn't move the rules that I haven't touched, since I don't
know all the places to check that they are working as expected.
Demo at https://hoffman-andrews.com/rust/reorder-details-css/std/string/struct.String.html#trait-implementations
r? @GuillaumeGomez