Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(docs-infra): fix the main content layout (#44282)

Browse source 
Fix the layout of the main docs content on both small and large screens.
On small screens, content could overlap with the floating ToC, while on
large screens the content was not centered correctly (see screenshots
below).

(For reference, this was accidentally broken in #44236.)

**Before:**
- ![content on small screen before](https://user-images.githubusercontent.com/8604205/143491577-97255ee7-f79d-4c95-9287-ff2afeb5b29d.png)
- ![content on large screen before](https://user-images.githubusercontent.com/8604205/143491582-2c19f7a2-d5ad-475a-a58b-e449efc492a9.png)

**After:**
- ![content on small screen after](https://user-images.githubusercontent.com/8604205/143491580-a405f650-cd4a-4804-8e65-422fc91f4c6e.png)
- ![content on large screen after](https://user-images.githubusercontent.com/8604205/143491585-d0d2e914-a1a2-45ba-8e6b-b9546aa80354.png)

PR Close #44282
This commit is contained in:
George Kalpakas 2021-11-25 21:18:58 +02:00 committed by Dylan Hunn
parent 8077695167
commit ef140a76d9
2 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
aio/src/app/app.component.html
View file

@ -56,17 +56,21 @@
</div>
</mat-sidenav>
<main class="sidenav-content" [id]="pageId" role="main">
<div id="main-content" tabindex="-1"></div>
<aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
<aio-doc-viewer [class.no-animations]="disableAnimations" [doc]="currentDocument" (docReady)="onDocReady()" (docRemoved)="onDocRemoved()" (docInserted)="onDocInserted()" (docRendered)="onDocRendered()">
</aio-doc-viewer>
<aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>
</main>
<section class="sidenav-content-container">
<div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (wheel)="restrainScrolling($event)">
<aio-lazy-ce selector="aio-toc"></aio-lazy-ce>
</div>
<main class="sidenav-content" [id]="pageId" role="main">
<div id="main-content" tabindex="-1"></div>
<aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
<aio-doc-viewer [class.no-animations]="disableAnimations" [doc]="currentDocument" (docReady)="onDocReady()" (docRemoved)="onDocRemoved()" (docInserted)="onDocInserted()" (docRendered)="onDocRendered()">
</aio-doc-viewer>
<aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>
</main>
<div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (wheel)="restrainScrolling($event)">
<aio-lazy-ce selector="aio-toc"></aio-lazy-ce>
</div>
</section>
<footer class="no-print">
<aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo"></aio-footer>

10
aio/src/styles/1-layouts/sidenav/_sidenav.scss
View file

@ -13,13 +13,17 @@ mat-sidenav-container.sidenav-container {
transform: none;
&.has-floating-toc {
.sidenav-content {
margin-right: 18vw;
.sidenav-content-container {
padding-right: 18vw;
}
}
.sidenav-content {
.sidenav-content-container {
height: auto;
.sidenav-content {
overflow-x: auto;
}
}
mat-sidenav.sidenav {