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

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 abef774485
commit 395d3bc4cb
4 changed files with 29 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.scss
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;
}

13
adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
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);

13
adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.scss
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);

16
adev/src/app/features/tutorial/tutorial.component.scss
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;
}
}
}