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): fix docs pages overflow when specific example-viewer exists (#61384)

Browse Source 
enforce content to be fluid until a specific max width, and rollback breakpoints to be applied when 1430px is the current win size
as widths between 1430px and 1431px will be broken

PR Close #61384
This commit is contained in:
Hakeem
2025-05-15 15:05:32 -07:00
committed by Jessica Janiuk
parent 1007079aee
commit 308892eeeb
12 changed files with 64 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
adev/shared-docs/components/table-of-contents/table-of-contents.component.scss
+5 -3
View File
@@ -1,3 +1,5 @@
@use '../../styles/media-queries' as mq;
:host {
display: flex;
flex-direction: column;
@@ -20,7 +22,7 @@
display: none;
}
@media only screen and (max-width: 1430px) {
@include mq.for-large-desktop-down {
position: relative;
right: 0;
max-height: min-content;
@@ -91,7 +93,7 @@ button {
}
}
@media only screen and (max-width: 1430px) {
@include mq.for-large-desktop-down {
display: none;
}
}
}
adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.scss
+9 -3
View File
@@ -13,22 +13,28 @@
box-sizing: border-box;
padding-inline: var(--layout-padding);
@media only screen and (max-width: 1430px) {
@include mq.for-large-desktop-down {
container: docs-content / inline-size;
}
@include mq.for-big-desktop-up {
@include mq.for-extra-large-desktop-up {
max-width: var(--page-width);
}
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
@include mq.for-large-desktop-up {
// take the available space except a reserved area for TOC
margin-left: -16rem;
width: calc(100% - 16rem);
}
// restrict the content to be fluid until it reaches that width
// $screen-xl is the breakpoint where Main content stop being fluid and made fixed
>*:not(docs-table-of-contents) {
max-width: calc(mq.$screen-xxl - var(--secondary-nav-width) - var(--primary-nav-width) - var(--layout-padding)*2)
}
pre {
margin-block: 0;
adev/shared-docs/styles/_media-queries.scss
+17 -4
View File
@@ -2,7 +2,8 @@ $screen-xs: 700px;
$screen-sm: 775px;
$screen-md: 900px;
$screen-lg: 1200px;
$screen-xl: 1800px;
$screen-xl: 1430px;
$screen-xxl: 1800px;
@mixin for-phone-only {
@media (max-width: $screen-xs) {
@@ -40,8 +41,14 @@ $screen-xl: 1800px;
}
}
@mixin for-big-desktop-up {
@media (min-width: calc($screen-xl + 1px)) {
@mixin for-large-desktop-up {
@media (min-width: calc($screen-xl + .01px)) {
@content;
}
}
@mixin for-extra-large-desktop-up {
@media (min-width: calc($screen-xxl + 1px)) {
@content;
}
}
@@ -52,6 +59,12 @@ $screen-xl: 1800px;
}
}
@mixin for-large-desktop-down {
@media (max-width: calc($screen-xl )) {
@content;
}
}
@mixin for-tablet-landscape-down {
@media (max-width: $screen-md) {
@content;
@@ -62,4 +75,4 @@ $screen-xl: 1800px;
@media (max-width: $screen-sm) {
@content;
}
}
}
adev/shared-docs/styles/_resets.scss
+1 -1
View File
@@ -9,7 +9,7 @@
'Segoe UI Symbol', 'Noto Color Emoji';
--page-width: 80ch;
--layout-padding: 3.12rem; // a common padding value throughout the layout
--primary-nav-width: 110px;
--primary-nav-width: 6.875rem;
--secondary-nav-width: 16.25rem;
--fixed-content-height: calc(100vh - var(--layout-padding) * 2);
adev/shared-docs/styles/global-styles.scss
+9 -11
View File
@@ -45,21 +45,17 @@
@include mq.for-tablet-portrait-up();
@include mq.for-tablet-landscape-up();
@include mq.for-desktop-up();
@include mq.for-big-desktop-up();
@include mq.for-extra-large-desktop-up();
@include mq.for-tablet-landscape-down();
// temporary just to show different options of code component UI.
$primary: mat.m2-define-palette(mat.$m2-indigo-palette);
$accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
$theme: mat.m2-define-light-theme(
(
color: (
primary: $primary,
accent: $accent,
),
typography: mat.m2-define-typography-config(),
)
);
$theme: mat.m2-define-light-theme((color: (primary: $primary,
accent: $accent,
),
typography: mat.m2-define-typography-config(),
));
// Include material core styles.
@include cdk.a11y-visually-hidden();
@@ -85,6 +81,7 @@ $theme: mat.m2-define-light-theme(
// Disable view transitions when reduced motion is requested.
@media (prefers-reduced-motion) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
@@ -121,6 +118,7 @@ $theme: mat.m2-define-light-theme(
a {
color: inherit;
&:hover {
text-decoration: underline;
}
@@ -146,4 +144,4 @@ $theme: mat.m2-define-light-theme(
background-color: inherit;
}
}
}
}
adev/src/app/core/layout/footer/footer.component.scss
+4 -2
View File
@@ -1,3 +1,5 @@
@use '@angular/docs/styles/media-queries' as mq;
.adev-footer-columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
@@ -18,8 +20,8 @@
transition: background-color 0.3s ease;
// this accounts for absolutely positioned TOC on the right
@media only screen and (min-width: 1430px) {
width: calc(100% - 195px - var(--layout-padding) * 3);
@include mq.for-large-desktop-up{
width: calc(100% - 195px - var(--layout-padding) * 3);
}
h2 {
adev/src/app/features/docs/docs.component.scss
+3 -1
View File
@@ -1,3 +1,5 @@
@use '@angular/docs/styles/media-queries' as mq;
:host {
display: block;
padding-top: var(--layout-padding);
@@ -10,7 +12,7 @@
}
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
@include mq.for-large-desktop-up{
display: flex;
justify-content: center;
}
adev/src/app/features/home/components/home-animation/home-animation.component.scss
+7 -9
View File
@@ -198,7 +198,7 @@ $transition: 200ms linear;
}
}
@include mq.for-big-desktop-up {
@include mq.for-extra-large-desktop-up {
& {
transform: scale(0.5);
}
@@ -331,12 +331,10 @@ $transition: 200ms linear;
}
@mixin meteor-gradient($startColor, $endColor) {
background: linear-gradient(
calc(var(--math-pi) + var(--meteor-tilt-angle)),
$startColor 0,
$endColor 66%,
transparent 100%
);
background: linear-gradient(calc(var(--math-pi) + var(--meteor-tilt-angle)),
$startColor 0,
$endColor 66%,
transparent 100%);
}
&.type-1::after {
@@ -391,9 +389,9 @@ $transition: 200ms linear;
transform: scale(1);
}
.build-for-everyone-layer > .title {
.build-for-everyone-layer>.title {
background-position-x: 0;
}
}
}
}
}
adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
+3 -3
View File
@@ -11,7 +11,7 @@
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
@include mq.for-large-desktop-up {
// take the available space except a reserved area for TOC
width: calc(100% - 16rem);
}
@@ -23,7 +23,7 @@
width: 100%;
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
@include mq.for-large-desktop-up {
// take the available space except a reserved area for TOC
max-width: var(--page-width);
}
@@ -39,7 +39,7 @@
&>* {
padding-inline: 0px;
@include mq.for-big-desktop-up {
@include mq.for-extra-large-desktop-up {
width: var(--page-width);
}
}
adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.scss
+2 -2
View File
@@ -12,7 +12,7 @@
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
@include mq.for-large-desktop-up{
// take the available space except a reserved area for TOC
width: calc(100% - 16rem);
}
@@ -24,7 +24,7 @@
width: 100%;
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
@include mq.for-large-desktop-up{
// take the available space except a reserved area for TOC
max-width: var(--page-width);
}
adev/src/app/features/tutorial/tutorial.component.scss
+2 -2
View File
@@ -94,7 +94,7 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
.docs-viewer {
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
@include mq.for-large-desktop-up {
// take the available space except a reserved area for TOC
margin-left: 0rem;
width: unset;
@@ -148,7 +148,7 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
.adev-split-tutorial {
width: 50%;
@include mq.for-big-desktop-up {
@include mq.for-extra-large-desktop-up {
width: 100%;
}
adev/src/app/features/update/update.component.scss
+2 -2
View File
@@ -11,7 +11,7 @@
padding-inline: var(--layout-padding);
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
@include mq.for-large-desktop-up {
// take the available space except a reserved area for TOC
margin-left: -16rem;
width: calc(100% - 16rem);
@@ -28,7 +28,7 @@
max-width: var(--page-width);
&>* {
@include mq.for-big-desktop-up {
@include mq.for-extra-large-desktop-up {
padding-inline: 0px;
}
}