iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(docs-infra): slightly improve top-menu responsiveness (#42753)

Browse Source 
make sure that the top-menu links don't get overlapped by
the search input, regardless on the browser's font-size and
the window's width

make also sure that the header's logo does not overlap the search
input on narrow windows, again regardless on the browser's font-size

PR Close #42753
This commit is contained in:
dario-piotrowicz 2021-07-02 21:57:21 +01:00 committed by Andrew Scott
parent e064f177a7
commit 24ac37891c
3 changed files with 9 additions and 4 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'; import { first, map } from 'rxjs/operators';
const sideNavView = 'SideNav'; const sideNavView = 'SideNav';
export const showTopMenuWidth = 1048; export const showTopMenuWidth = 1150;
export const dockSideNavWidth = 992; export const dockSideNavWidth = 992;
export const showFloatingTocWidth = 800; export const showFloatingTocWidth = 800;

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

@ -1,7 +1,7 @@
@use '../../mixins'; @use '../../mixins';
// VARIABLES // VARIABLES
$showTopMenuWidth: 1048px; $showTopMenuWidth: 1150px;
$hideTopMenuWidth: $showTopMenuWidth - 1; $hideTopMenuWidth: $showTopMenuWidth - 1;
$hamburgerShownMargin: 0 8px 0 0; $hamburgerShownMargin: 0 8px 0 0;
$hamburgerHiddenMargin: 0 16px 0 -64px; $hamburgerHiddenMargin: 0 16px 0 -64px;
@ -132,7 +132,10 @@ mat-toolbar.app-toolbar {
.nav-link-inner { .nav-link-inner {
border-radius: 4px; border-radius: 4px;
font-size: 1.3rem;
font-size: clamp(10px, 1.6rem, 20px);
padding: 8px 16px; padding: 8px 16px;
padding: 8px clamp(5px, 0.7vw, 16px);
} }
&:focus { &:focus {
@ -183,7 +186,7 @@ mat-toolbar.app-toolbar {
} }
} }
@media (max-width: 480px) { @media (max-width: 515px) {
width: 150px; width: 150px;
} }
} }

4
aio/tests/e2e/src/app.e2e-spec.ts
View File

@ -5,7 +5,9 @@ describe('site App', () => {
let page: SitePage; let page: SitePage;
beforeEach(async () => { beforeEach(async () => {
await SitePage.setWindowWidth(1050); // Make the window wide enough to show the SideNav side-by-side. // Make the window wide enough to show the SideNav side-by-side
// (bigger than the app component's showTopMenuWidth).
await SitePage.setWindowWidth(1200);
page = new SitePage(); page = new SitePage();
}); });