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): integrate the new layout with the new changes (#61256)

Browse source 
fix new global layout issues, and make other pages adhere to the new centered layout like cli ref page, cli ref details, api ref details pages

PR Close #61256
This commit is contained in:
Hakeem 2025-05-09 20:14:40 -07:00 committed by Alex Rickabaugh
parent 9e5bcc04f7
commit abef774485
4 changed files with 92 additions and 41 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

@ -11,18 +11,21 @@
flex-direction: column;
padding: 0px;
box-sizing: border-box;
padding-inline: var(--layout-padding);
@media only screen and (max-width: 1430px) {
container: docs-content / inline-size;
}
@include mq.for-big-desktop-up{
@include mq.for-big-desktop-up {
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)) {
@media only screen and (min-width: 1430px) {
//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);
@ -83,6 +86,7 @@
}
a:not(.docs-github-links):not(.docs-card):not(.docs-pill):not(.docs-example-github-link) {
&[href^='http:'],
&[href^='https:'] {
@include links.external-link-with-icon();
@ -90,6 +94,7 @@
}
&-scroll-margin-large {
h2,
h3 {
scroll-margin: 5em;
@ -99,7 +104,8 @@
.docs-header {
margin-block-end: 1rem;
& > p:first-child {
&>p:first-child {
color: var(--quaternary-contrast);
font-weight: 500;
margin: 0;
@ -130,4 +136,4 @@
}
}
}
}
}

12
adev/src/app/features/docs/docs.component.scss
View file

@ -1,12 +1,16 @@
:host {
display: block;
padding-top: var(--layout-padding);
padding-bottom: var(--layout-padding);
.docs-viewer {
&.docs-animate-content {
animation: fade-in 500ms;
}
}
padding: var(--layout-padding);
@media only screen and (min-width: 1430px) {
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
display: flex;
justify-content: center;
}
@ -20,4 +24,4 @@
to {
opacity: 1;
}
}
}

50
adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
View file

@ -2,15 +2,35 @@
@use '@angular/docs/styles/reference' as ref;
:host {
display: block;
display: flex;
justify-content: center;
width: 100%;
max-width: var(--page-width);
padding: var(--layout-padding) 0 1rem var(--layout-padding);
box-sizing: border-box;
@include mq.for-desktop-down {
padding: var(--layout-padding);
max-width: none;
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);
}
}
}
docs-viewer {
display: block;
padding-inline: var(--layout-padding);
width: 100%;
//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
max-width: var(--page-width);
}
}
&::-webkit-scrollbar-thumb {
@ -19,34 +39,42 @@
transition: background-color 0.3s ease;
}
& > *{
&>* {
padding-inline: 0px;
@include mq.for-big-desktop-up{
@include mq.for-big-desktop-up {
width: var(--page-width);
}
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1rem;
}
h4 {
font-size: 0.95rem;
}
h5 {
font-size: 0.875rem;
}
h6 {
font-size: 0.6rem;
}
}
::ng-deep {
@include ref.reference-common();
@include ref.api-reference();
}
}

57
adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.scss
View file

@ -2,15 +2,44 @@
@use '@angular/docs/styles/reference' as ref;
:host {
display: block;
display: flex;
justify-content: center;
width: 100%;
max-width: var(--page-width);
padding: var(--layout-padding) 0 1rem var(--layout-padding);
box-sizing: border-box;
padding-top: var(--layout-padding);
padding-bottom: var(--layout-padding);
@include mq.for-desktop-down {
padding: var(--layout-padding);
max-width: none;
&: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);
}
}
}
docs-viewer {
display: block;
padding-inline: var(--layout-padding);
width: 100%;
//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
max-width: var(--page-width);
}
}
&>* {
width: 100%;
@include mq.for-desktop-up {
padding-inline: 0px;
width: var(--page-width);
}
}
}
@ -18,20 +47,4 @@
::ng-deep {
@include ref.reference-common();
@include ref.cli-reference();
}
:host{
display: flex;
flex-flow: row wrap;
justify-content: center;
padding: var(--layout-padding);
& > *{
width: 100%;
@include mq.for-desktop-up{
padding-inline: 0px;
width: var(--page-width);
}
}
}