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

docs(docs-infra): fixating the position of the docs content whether TOC exists or not (#61256)

Browse Source 
PR Close #61256
This commit is contained in:
Hakeem
2025-05-13 04:42:54 -07:00
committed by Alex Rickabaugh
parent 4325243224
commit bf8d52b497
4 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.scss
+6 -8
View File
@@ -21,17 +21,15 @@
max-width: var(--page-width);
}
// check if TOC component present in the page and has more than one elenment
&.docs-with-TOC:has(docs-table-of-contents ul > li:nth-child(2)) {
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
// take the available space except a reserved area for TOC
margin-left: -16rem;
width: calc(100% - 16rem);
}
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
// take the available space except a reserved area for TOC
margin-left: -16rem;
width: calc(100% - 16rem);
}
pre {
margin-block: 0;
}
adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
+5 -8
View File
@@ -9,17 +9,14 @@
padding-top: var(--layout-padding);
padding-bottom: var(--layout-padding);
&:has(> docs-viewer.docs-with-TOC) {
&:has(docs-table-of-contents ul > li:nth-child(2)) {
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
// take the available space except a reserved area for TOC
width: calc(100% - 16rem);
}
}
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
// take the available space except a reserved area for TOC
width: calc(100% - 16rem);
}
docs-viewer {
display: block;
padding-inline: var(--layout-padding);
adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.scss
+5 -8
View File
@@ -10,17 +10,14 @@
padding-bottom: var(--layout-padding);
&:has(> docs-viewer.docs-with-TOC) {
&:has(docs-table-of-contents ul > li:nth-child(2)) {
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
// take the available space except a reserved area for TOC
width: calc(100% - 16rem);
}
}
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
// take the available space except a reserved area for TOC
width: calc(100% - 16rem);
}
docs-viewer {
display: block;
padding-inline: var(--layout-padding);
adev/src/app/features/tutorial/tutorial.component.scss
+13 -3
View File
@@ -18,7 +18,7 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
// Tablet / Mobile Tutorial Nav
@include mq.for-tablet-landscape-up {
> .adev-tutorial-nav-container {
>.adev-tutorial-nav-container {
display: none;
}
}
@@ -75,7 +75,7 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
// Desktop Tutorial Nav
@include mq.for-tablet-landscape-down {
> .adev-tutorial-nav-container {
>.adev-tutorial-nav-container {
display: none;
}
}
@@ -90,6 +90,16 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
backdrop-filter: blur(3px);
}
}
.docs-viewer {
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
// take the available space except a reserved area for TOC
margin-left: 0rem;
width: unset;
}
}
}
.docs-viewer {
@@ -146,4 +156,4 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
// override js applied width from split view resizer
width: 100% !important;
}
}
}