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

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

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';
const sideNavView = 'SideNav';
export const showTopMenuWidth = 1048;
export const showTopMenuWidth = 1150;
export const dockSideNavWidth = 992;
export const showFloatingTocWidth = 800;

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

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

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

@ -5,7 +5,9 @@ describe('site App', () => {
let page: SitePage;
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();
});