fix(aio): fix search box overlap for small devices#17075
Conversation
sjtrimble
added
comp: aio
action: review
|
The angular.io preview for 42db1da5b4bb251e3f36e38137d6b2cf13a40719 is available here. |
There was a problem hiding this comment.
I don't see how this changes anything 😕
There was a problem hiding this comment.
It just handles smaller screens better so that the Angular icon/log is not sitting directly next to the search bar. It really only applies to iPhone 5 and smaller.
There was a problem hiding this comment.
I don't see how it affects anything. You have explicit width for smaller screens (180px), so setting min-width to 100px won't have any effect, right?
There was a problem hiding this comment.
I think that the mixin below switches width to 50% when the big breakpoint is triggered?
There was a problem hiding this comment.
The big breakpoint is min-width: 1000px. The width is still 150px (which is larger than 100px, so min-width: 100px should have no effect) and on focus the width becomes 1000px * 50% = 500px (which again is larger than 100px) 😕
sjtrimble
force-pushed
the
search-box-overlap
branch
2 times, most recently
from
6dac8b4 to
fa3d1ee
Compare
|
@gkalpak take a look and see if this makes more sense :) |
There was a problem hiding this comment.
What is the purpose of max-width here, since you already specified width?
There was a problem hiding this comment.
So the animation doesn't pop out of it's 'box'.
There was a problem hiding this comment.
I see. You can remove the max-width: 240px from the @include bp(big) section below.
There was a problem hiding this comment.
Because the sidenav content drops below the non-transparent toolbar on all other pages.
There was a problem hiding this comment.
This has nothing to do with the overlap (and the styles below will not "fix" it). The actual issue on the home page is that the top bar is transparent.
sjtrimble
force-pushed
the
search-box-overlap
branch
from
fa3d1ee to
c54ed35
Compare
|
The angular.io preview for c54ed35422aca6681b7d39d61f9e444ee428489f is available here. |
sjtrimble
force-pushed
the
search-box-overlap
branch
from
c54ed35 to
6e0d17b
Compare
- Adjust search box height - Adjust search box standard width and width for smaller devices - Fix search jump outside of specified max width
|
My coments have either been addressed or overwritten by subsequent PRs, so this LGTM 😁 |
Restore the changes introduced in angular#17075, which wre accidentally overwritten while rebasing angular#17155. Also, simplify the topbar positioning rules.
- Adjust search box height - Adjust search box standard width and width for smaller devices - Fix search jump outside of specified max width
Restore the changes introduced in angular#17075, which wre accidentally overwritten while rebasing angular#17155. Also, simplify the topbar positioning rules.
- Adjust search box height - Adjust search box standard width and width for smaller devices - Fix search jump outside of specified max width
Restore the changes introduced in angular#17075, which wre accidentally overwritten while rebasing angular#17155. Also, simplify the topbar positioning rules.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
6 participants
Closes #17054
Closes #17007
Please check if the PR fulfills these requirements
What kind of change does this PR introduce? (check one with "x")
What is the current behavior? (You can also link to an open issue here)
What is the new behavior?
Does this PR introduce a breaking change? (check one with "x")
If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...
Other information: