honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs-infra): prevent search-bar from overlapping nav-items (#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
This commit is contained in:
George Kalpakas 2020-07-06 19:10:25 +03:00 committed by Alex Rickabaugh
parent fc7e77934f
commit 79850983e6
2 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/src/app/app.component.ts
View File

@ -14,7 +14,7 @@ import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
import { first, map } from 'rxjs/operators';
const sideNavView = 'SideNav';
export const showTopMenuWidth = 992;
export const showTopMenuWidth = 1048;
export const dockSideNavWidth = 992;
export const showFloatingTocWidth = 800;

2
aio/src/styles/1-layouts/_top-menu.scss
View File

@ -1,5 +1,5 @@
// VARIABLES
$showTopMenuWidth: 992px;
$showTopMenuWidth: 1048px;
$hideTopMenuWidth: $showTopMenuWidth - 1;
$hamburgerShownMargin: 0 8px 0 0;
$hamburgerHiddenMargin: 0 16px 0 -64px;