fix(aio): fix search box overlap for small devices #17075

sjtrimble · 2017-05-28T23:54:08Z

Please check if the PR fulfills these requirements

The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x")

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Other... Please describe:

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")

[ ] Yes
[x] No

If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

Other information:

mary-poppins · 2017-05-29T00:02:10Z

The angular.io preview for 42db1da is available here.

gkalpak · 2017-05-29T14:32:37Z

aio/src/styles/1-layouts/_top-menu.scss

@@ -109,6 +109,7 @@ aio-search-box input {
  padding: 5px 16px;
  margin-left: 8px;
  width: 150px;
+  min-width: 100px;


I don't see how this changes anything 😕

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.

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?

I think that the mixin below switches width to 50% when the big breakpoint is triggered?

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) 😕

Fair enough. Back to you @sjtrimble

sjtrimble · 2017-05-31T16:13:40Z

@gkalpak take a look and see if this makes more sense :)

gkalpak · 2017-05-31T16:39:43Z

aio/src/styles/1-layouts/_top-menu.scss

-  width: 150px;
-  height: 40%;
+  width: 180px;
+  max-width: 240px;


What is the purpose of max-width here, since you already specified width?

So the animation doesn't pop out of it's 'box'.

I see. You can remove the max-width: 240px from the @include bp(big) section below.

gkalpak · 2017-05-31T17:23:04Z

aio/src/styles/1-layouts/_top-menu.scss

@@ -86,7 +86,7 @@ md-toolbar.mat-toolbar {
  }
 }

-aio-shell.sidenav-open {
+aio-shell.page-home.sidenav-open {


Why only on home page?

Because the sidenav content drops below the non-transparent toolbar on all other pages.

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.

mary-poppins · 2017-06-01T05:05:01Z

The angular.io preview for c54ed35 is available here.

- Adjust search box height - Adjust search box standard width and width for smaller devices - Fix search jump outside of specified max width

mary-poppins · 2017-06-05T15:24:24Z

The angular.io preview for 6e0d17b is available here.

IgorMinar

This looks behaves right on the preview server. I'll let @gkalpak take one more look before we merge this in, since his first comment hasn't been addressed yet.

Restore the changes introduced in angular#17075, which wre accidentally overwritten while rebasing angular#17155. Also, simplify the topbar positioning rules.

gkalpak · 2017-06-06T15:56:55Z

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.

Restore the changes introduced in #17075, which wre accidentally overwritten while rebasing #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.

angular-automatic-lock-bot · 2019-09-11T18:21:26Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

sjtrimble added comp: aio action: review The PR is still awaiting reviews from at least one requested reviewer labels May 28, 2017

googlebot added the cla: yes label May 28, 2017

gkalpak added this to REVIEW in docs-infra May 29, 2017

gkalpak reviewed May 29, 2017

View reviewed changes

sjtrimble force-pushed the search-box-overlap branch 2 times, most recently from 6dac8b4 to fa3d1ee Compare May 31, 2017 16:03

gkalpak reviewed May 31, 2017

View reviewed changes

sjtrimble force-pushed the search-box-overlap branch from fa3d1ee to c54ed35 Compare June 1, 2017 04:49

sjtrimble force-pushed the search-box-overlap branch from c54ed35 to 6e0d17b Compare June 5, 2017 15:14

fix(aio): fix search box overlap for small devices

6e0d17b

- Adjust search box height - Adjust search box standard width and width for smaller devices - Fix search jump outside of specified max width

IgorMinar self-requested a review June 5, 2017 19:01

IgorMinar reviewed Jun 5, 2017

View reviewed changes

IgorMinar assigned gkalpak Jun 5, 2017

IgorMinar merged commit 76b4b80 into angular:master Jun 6, 2017

petebacondarwin removed this from REVIEW in docs-infra Jun 6, 2017

gkalpak mentioned this pull request Jun 6, 2017

fix(aio): fix and clean up topbar styling #17243

Merged

alxhub pushed a commit that referenced this pull request Jun 6, 2017

fix(aio): fix and clean up topbar styling

b8979c8

Restore the changes introduced in #17075, which wre accidentally overwritten while rebasing #17155. Also, simplify the topbar positioning rules.

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 11, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(aio): fix search box overlap for small devices #17075

fix(aio): fix search box overlap for small devices #17075

sjtrimble commented May 28, 2017 •

edited

mary-poppins commented May 29, 2017

gkalpak May 29, 2017

sjtrimble May 30, 2017

gkalpak May 30, 2017

petebacondarwin May 30, 2017

gkalpak May 30, 2017 •

edited

petebacondarwin May 31, 2017

sjtrimble commented May 31, 2017

gkalpak May 31, 2017

sjtrimble May 31, 2017

gkalpak May 31, 2017

gkalpak May 31, 2017

sjtrimble Jun 1, 2017

gkalpak Jun 1, 2017

mary-poppins commented Jun 1, 2017

mary-poppins commented Jun 5, 2017

IgorMinar left a comment

gkalpak commented Jun 6, 2017

angular-automatic-lock-bot bot commented Sep 11, 2019

fix(aio): fix search box overlap for small devices #17075

fix(aio): fix search box overlap for small devices #17075

Conversation

sjtrimble commented May 28, 2017 • edited

mary-poppins commented May 29, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gkalpak May 30, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sjtrimble commented May 31, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mary-poppins commented Jun 1, 2017

mary-poppins commented Jun 5, 2017

IgorMinar left a comment

Choose a reason for hiding this comment

gkalpak commented Jun 6, 2017

angular-automatic-lock-bot bot commented Sep 11, 2019

sjtrimble commented May 28, 2017 •

edited

gkalpak May 30, 2017 •

edited