skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

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 1d0b54a66d
commit efd329f063
2 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aio/src/app/app.component.html
+14 -10
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>
aio/src/styles/1-layouts/sidenav/_sidenav.scss
+7 -3
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 {