iframe-proxy

gkalpak · 2020-07-06T12:58:35Z

As part of angular.io's responsive layout, the menu shown in the top-bar is collapsed into the sidenav on narrow screens at the point where the search-bar (on the right side of the top-bar) would overlap with the menu's nav-items.

Previously, the value used as break-point would work on marketing pages, where the hamburger button is not shown on wide screens. However, on docs pages (where the hamburger button is always shown, pushing the menu further to the right), the search-bar would still overlap the menu nav-items on some resolutions.

This commit fixes it by raising the screen width threshold at a value that ensures there is no overlap even on pages where the hamburger button is visible alongside the top-bar menu.

Fixes #37667.

This PR also includes some refactorings in preparation of the fix. See individual commits for details.

mary-poppins · 2020-07-06T13:10:13Z

petebacondarwin

A few minor suggestions... I never liked that side-by-side thing so thanks for getting rid of that.

petebacondarwin · 2020-07-06T13:05:16Z

Suggested change

describe('when side-by-side (wide)', () => {

describe('when view is wide', () => {

there is probably an equivalent narrow describe block in this file too.

petebacondarwin · 2020-07-06T13:05:35Z

Suggested change

beforeEach(() => resizeTo(dockSideNavWidth + 1)); // side-by-side

beforeEach(() => resizeTo(dockSideNavWidth + 1)); // wide view

petebacondarwin · 2020-07-06T13:05:54Z

Suggested change

describe('when NOT side-by-side (narrow)', () => {

describe('when view is narrow', () => {

petebacondarwin · 2020-07-06T13:06:07Z

Suggested change

beforeEach(() => resizeTo(dockSideNavWidth - 1)); // NOT side-by-side

beforeEach(() => resizeTo(dockSideNavWidth - 1)); // narrow view

petebacondarwin · 2020-07-06T13:07:37Z

This describe block could be:

describe('when changing from narrow to wide view', () => {

petebacondarwin · 2020-07-06T13:11:58Z

Ideally this should have the same name (or as close as possible to the constant in app.component.ts (showTopMenuWidth) and I would argue that it would be better for the previous line to be computed from this line, rather than the other way around so that the same constant value (i.e. 1048) is used in both.

The reasoning is that there is no clear indication that these need to be kept in sync. One could imagine searching for the equivalent name or value and not finding anything.

Good point 👍

…show/hide threshold Use a Sass variable for the screen width break-point at which the top-bar hamburger button is hidden/shown. This allows more easily updating the break-point.

…howing the sidenav As part of angular.io's responsive layout, the following rules are applied: - On wide screens, a menu is shown in the top-bar and the sidenav is shown side-by-side with the docs content. - On narrow screens, the top-menu is moved from the top-bar to the sidenav and the sidenav is closed by default and floats over the content when manually opened. Previously, the break-points at which the top-menu was shown in the top-bar and the sidenav was shown side-by-side with the content were the same (using a single variable). This commit decouples the two break-points to make it possible to use different values in the future.

… from showing the sidenav

As part of angular.io's responsive layout, the menu shown in the top-bar is collapsed into the sidenav on narrow screens at the point where the search-bar (on the right side of the top-bar) would overlap with the menu's nav-items. Previously, the value used as break-point would work on marketing pages, where the hamburger button is not shown on wide screens. However, on docs pages (where the hamburger button is always shown, pushing the menu further to the right), the search-bar would still overlap the menu nav-items on some resolutions. This commit fixes it by raising the screen width threshold at a value that ensures there is no overlap even on pages where the hamburger button is visible alongside the top-bar menu. Fixes angular#37937

mary-poppins · 2020-07-06T16:59:46Z

You can preview 2112df4 at https://pr37938-2112df4.ngbuilds.io/.

…show/hide threshold (#37938) Use a Sass variable for the screen width break-point at which the top-bar hamburger button is hidden/shown. This allows more easily updating the break-point. PR Close #37938

…howing the sidenav (#37938) As part of angular.io's responsive layout, the following rules are applied: - On wide screens, a menu is shown in the top-bar and the sidenav is shown side-by-side with the docs content. - On narrow screens, the top-menu is moved from the top-bar to the sidenav and the sidenav is closed by default and floats over the content when manually opened. Previously, the break-points at which the top-menu was shown in the top-bar and the sidenav was shown side-by-side with the content were the same (using a single variable). This commit decouples the two break-points to make it possible to use different values in the future. PR Close #37938

As part of angular.io's responsive layout, the menu shown in the top-bar is collapsed into the sidenav on narrow screens at the point where the search-bar (on the right side of the top-bar) would overlap with the menu's nav-items. Previously, the value used as break-point would work on marketing pages, where the hamburger button is not shown on wide screens. However, on docs pages (where the hamburger button is always shown, pushing the menu further to the right), the search-bar would still overlap the menu nav-items on some resolutions. This commit fixes it by raising the screen width threshold at a value that ensures there is no overlap even on pages where the hamburger button is visible alongside the top-bar menu. Fixes #37937 PR Close #37938

…howing the sidenav (#37938) As part of angular.io's responsive layout, the following rules are applied: - On wide screens, a menu is shown in the top-bar and the sidenav is shown side-by-side with the docs content. - On narrow screens, the top-menu is moved from the top-bar to the sidenav and the sidenav is closed by default and floats over the content when manually opened. Previously, the break-points at which the top-menu was shown in the top-bar and the sidenav was shown side-by-side with the content were the same (using a single variable). This commit decouples the two break-points to make it possible to use different values in the future. PR Close #37938

As part of angular.io's responsive layout, the menu shown in the top-bar is collapsed into the sidenav on narrow screens at the point where the search-bar (on the right side of the top-bar) would overlap with the menu's nav-items. Previously, the value used as break-point would work on marketing pages, where the hamburger button is not shown on wide screens. However, on docs pages (where the hamburger button is always shown, pushing the menu further to the right), the search-bar would still overlap the menu nav-items on some resolutions. This commit fixes it by raising the screen width threshold at a value that ensures there is no overlap even on pages where the hamburger button is visible alongside the top-bar menu. Fixes #37937 PR Close #37938

angular-automatic-lock-bot · 2020-08-07T16:15:23Z

…show/hide threshold (angular#37938) Use a Sass variable for the screen width break-point at which the top-bar hamburger button is hidden/shown. This allows more easily updating the break-point. PR Close angular#37938

…howing the sidenav (angular#37938) As part of angular.io's responsive layout, the following rules are applied: - On wide screens, a menu is shown in the top-bar and the sidenav is shown side-by-side with the docs content. - On narrow screens, the top-menu is moved from the top-bar to the sidenav and the sidenav is closed by default and floats over the content when manually opened. Previously, the break-points at which the top-menu was shown in the top-bar and the sidenav was shown side-by-side with the content were the same (using a single variable). This commit decouples the two break-points to make it possible to use different values in the future. PR Close angular#37938

…ar#37938) As part of angular.io's responsive layout, the menu shown in the top-bar is collapsed into the sidenav on narrow screens at the point where the search-bar (on the right side of the top-bar) would overlap with the menu's nav-items. Previously, the value used as break-point would work on marketing pages, where the hamburger button is not shown on wide screens. However, on docs pages (where the hamburger button is always shown, pushing the menu further to the right), the search-bar would still overlap the menu nav-items on some resolutions. This commit fixes it by raising the screen width threshold at a value that ensures there is no overlap even on pages where the hamburger button is visible alongside the top-bar menu. Fixes angular#37937 PR Close angular#37938

googlebot added the cla: yes label Jul 6, 2020

gkalpak added comp: docs-infra action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release type: bug/fix labels Jul 6, 2020

ngbot Bot modified the milestone: needsTriage Jul 6, 2020

gkalpak modified the milestones: needsTriage, docs-infra-aio-app Jul 6, 2020

gkalpak requested a review from petebacondarwin July 6, 2020 13:04

petebacondarwin approved these changes Jul 6, 2020

View reviewed changes

gkalpak added 2 commits July 6, 2020 19:10

refactor(docs-infra): use Sass variable for top-bar hamburger button …

b804219

…show/hide threshold Use a Sass variable for the screen width break-point at which the top-bar hamburger button is hidden/shown. This allows more easily updating the break-point.

petebacondarwin added the action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews label Jul 6, 2020

gkalpak added 2 commits July 6, 2020 19:47

fixup! refactor(docs-infra): decouple showing the top-menu in top-bar…

94040af

… from showing the sidenav

gkalpak removed the action: merge The PR is ready for merge by the caretaker label Jul 6, 2020

gkalpak force-pushed the fix-aio-hidden-navitem branch from bfe4764 to 2112df4 Compare July 6, 2020 16:50

petebacondarwin approved these changes Jul 6, 2020

View reviewed changes

gkalpak added action: merge The PR is ready for merge by the caretaker and removed action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews labels Jul 6, 2020

alxhub closed this in 90b93da Jul 6, 2020

gkalpak deleted the fix-aio-hidden-navitem branch July 7, 2020 09:48

angular-automatic-lock-bot Bot locked and limited conversation to collaborators Aug 7, 2020

Sunbelt Computer Software

PL/B Language Development and Support

Navigation Menu

Repository navigation

fix(docs-infra): prevent search-bar from overlapping nav-items - #37938

fix(docs-infra): prevent search-bar from overlapping nav-items#37938
gkalpak wants to merge 4 commits into
angular:masterfrom
gkalpak:fix-aio-hidden-navitem

gkalpak commented Jul 6, 2020

Uh oh!

mary-poppins commented Jul 6, 2020

Uh oh!

petebacondarwin left a comment

Uh oh!

petebacondarwin Jul 6, 2020

Uh oh!

petebacondarwin Jul 6, 2020

Uh oh!

petebacondarwin Jul 6, 2020

Uh oh!

petebacondarwin Jul 6, 2020

Uh oh!

petebacondarwin Jul 6, 2020

Uh oh!

petebacondarwin Jul 6, 2020

Uh oh!

petebacondarwin Jul 6, 2020

Uh oh!

gkalpak Jul 6, 2020

Uh oh!

mary-poppins commented Jul 6, 2020

Uh oh!

angular-automatic-lock-bot Bot commented Aug 7, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	describe('when side-by-side (wide)', () => {
	describe('when view is wide', () => {

	beforeEach(() => resizeTo(dockSideNavWidth + 1)); // side-by-side
	beforeEach(() => resizeTo(dockSideNavWidth + 1)); // wide view

	describe('when NOT side-by-side (narrow)', () => {
	describe('when view is narrow', () => {

Sunbelt Computer Software

PL/B Language Development and Support

Conversation

gkalpak commented Jul 6, 2020

Uh oh!

mary-poppins commented Jul 6, 2020

Uh oh!

petebacondarwin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mary-poppins commented Jul 6, 2020

Uh oh!

angular-automatic-lock-bot Bot commented Aug 7, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants