Skip to content

Commit 29879c0

Browse files
SplaktarSplaktar
authoredFeb 4, 2020
fix: numerous responsive issues on screens from 360px to 960px (#705)
Fixes #686 ,closes #687, fixes #550 - fix docs-api layouts to work down to 360px width - fixes Observers, Accessibility, Drag and Drop, Platform, and Overlay layouts - fix DeprecatedconnectedTo to Deprecated connectedTo display issue - update footer copyright - fix exception trying to unsubscribe to undefined routeParamSubscription - change how sidenav is closed on mobile after selecting a nav item
·
20.0.0-next.819.1.0-next.3
1 parent 70e82db commit 29879c0

File tree

12 files changed

+91
-30
lines changed

12 files changed

+91
-30
lines changed
 

‎material.angular.io/src/app/pages/component-category-list/component-category-list.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
3838
}
3939

4040
ngOnDestroy() {
41-
this.routeParamSubscription.unsubscribe();
41+
if (this.routeParamSubscription) {
42+
this.routeParamSubscription.unsubscribe();
43+
}
4244
}
4345
}
4446

‎material.angular.io/src/app/pages/component-page-header/component-page-header.scss

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ h1 {
2323
margin: 8px;
2424
min-width: 64px;
2525
display: none;
26+
2627
@media (max-width: $small-breakpoint-width) {
2728
display: flex;
2829
align-items: center;

‎material.angular.io/src/app/pages/component-sidenav/component-sidenav.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
[opened]="(isScreenSmall | async) === false"
66
[mode]="(isScreenSmall | async) ? 'over' : 'side'"
77
[fixedInViewport]="(isScreenSmall | async)"
8-
[fixedTopGap]="92">
8+
[fixedTopGap]="(isExtraScreenSmall | async) ? 92 : 56">
99
<app-component-nav [params]="params"></app-component-nav>
1010
</mat-sidenav>
1111
<div class="docs-component-sidenav-content">
12-
<component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
12+
<component-page-header (toggleSidenav)="toggleSidenav(sidenav)"></component-page-header>
1313
<div class="docs-component-sidenav-inner-content">
1414
<main class="docs-component-sidenav-body-content">
1515
<!-- If on large screen, menu resides to left of content -->

‎material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts

+36-9
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ import {
1111
import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
1212
import {MatIconModule} from '@angular/material/icon';
1313
import {MatSidenav, MatSidenavModule} from '@angular/material/sidenav';
14-
import {ActivatedRoute, Params, Router, RouterModule, Routes} from '@angular/router';
14+
import {ActivatedRoute, NavigationEnd, Params, Router, RouterModule, Routes} from '@angular/router';
1515
import {CommonModule} from '@angular/common';
1616
import {ComponentHeaderModule} from '../component-page-header/component-page-header';
1717
import {FooterModule} from '../../shared/footer/footer';
1818
import {combineLatest, Observable, Subject} from 'rxjs';
19-
import {map, startWith, switchMap, takeUntil} from 'rxjs/operators';
19+
import {filter, map, startWith, switchMap, takeUntil} from 'rxjs/operators';
2020
import {animate, state, style, transition, trigger} from '@angular/animations';
2121
import {CdkAccordionModule} from '@angular/cdk/accordion';
2222
import {BreakpointObserver} from '@angular/cdk/layout';
@@ -29,17 +29,27 @@ import {
2929
ComponentApi,
3030
ComponentExamples,
3131
ComponentOverview,
32-
ComponentViewer, ComponentViewerModule
32+
ComponentViewer,
33+
ComponentViewerModule
3334
} from '../component-viewer/component-viewer';
3435
import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
3536
import {FormsModule} from '@angular/forms';
3637
import {HttpClientModule} from '@angular/common/http';
3738
import {StackBlitzButtonModule} from '../../shared/stack-blitz';
3839
import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
3940
import {ExampleModule} from '@angular/components-examples';
41+
import {MatDrawerToggleResult} from '@angular/material/sidenav/drawer';
4042
import {MatListModule} from '@angular/material/list';
4143

42-
const SMALL_WIDTH_BREAKPOINT = 720;
44+
// These constants are used by the ComponentSidenav for orchestrating the MatSidenav in a responsive
45+
// way. This includes hiding the sidenav, defaulting it to open, changing the mode from over to
46+
// side, determining the size of the top gap, and whether the sidenav is fixed in the viewport.
47+
// The values were determined through the combination of Material Design breakpoints and careful
48+
// testing of the application across a range of common device widths (360px+).
49+
// These breakpoint values need to stay in sync with the related Sass variables in
50+
// src/styles/_constants.scss.
51+
const EXTRA_SMALL_WIDTH_BREAKPOINT = 720;
52+
const SMALL_WIDTH_BREAKPOINT = 959;
4353

4454
@Component({
4555
selector: 'app-component-sidenav',
@@ -50,21 +60,39 @@ const SMALL_WIDTH_BREAKPOINT = 720;
5060
export class ComponentSidenav implements OnInit {
5161
@ViewChild(MatSidenav) sidenav: MatSidenav;
5262
params: Observable<Params>;
63+
isExtraScreenSmall: Observable<boolean>;
5364
isScreenSmall: Observable<boolean>;
5465

5566
constructor(public docItems: DocumentationItems,
5667
private _route: ActivatedRoute,
68+
private _router: Router,
5769
zone: NgZone,
5870
breakpoints: BreakpointObserver) {
71+
this.isExtraScreenSmall =
72+
breakpoints.observe(`(max-width: ${EXTRA_SMALL_WIDTH_BREAKPOINT}px)`)
73+
.pipe(map(breakpoint => breakpoint.matches));
5974
this.isScreenSmall = breakpoints.observe(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`)
60-
.pipe(map(breakpoint => breakpoint.matches));
75+
.pipe(map(breakpoint => breakpoint.matches));
6176
}
6277

6378
ngOnInit() {
6479
// Combine params from all of the path into a single object.
6580
this.params = combineLatest(
66-
this._route.pathFromRoot.map(route => route.params),
67-
Object.assign);
81+
this._route.pathFromRoot.map(route => route.params), Object.assign);
82+
83+
this._router.events.pipe(
84+
filter((event) => event instanceof NavigationEnd),
85+
map((event) => this.isScreenSmall)
86+
).subscribe((shouldCloseSideNav) => {
87+
if (shouldCloseSideNav && this.sidenav) {
88+
this.sidenav.close();
89+
}
90+
}
91+
);
92+
}
93+
94+
toggleSidenav(sidenav: MatSidenav): Promise<MatDrawerToggleResult> {
95+
return sidenav.toggle();
6896
}
6997
}
7098

@@ -85,8 +113,7 @@ export class ComponentNav implements OnInit, OnDestroy {
85113
currentItemId: string;
86114
private _onDestroy = new Subject<void>();
87115

88-
constructor(public docItems: DocumentationItems,
89-
private _router: Router) { }
116+
constructor(public docItems: DocumentationItems, private _router: Router) {}
90117

91118
ngOnInit() {
92119
this._router.events.pipe(

‎material.angular.io/src/app/pages/component-viewer/component-api.html

+10-12
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,17 @@
33
API for {{docItem?.id}}
44
</span>
55

6-
<span>
7-
<doc-viewer
8-
documentUrl="/docs-content/api-docs/{{docItem?.packageName}}-{{docItem?.id}}.html"
9-
class="docs-component-view-text-content docs-component-api"
10-
(contentRendered)="updateTableOfContents(docItem!.name, $event)">
11-
</doc-viewer>
6+
<doc-viewer
7+
documentUrl="/docs-content/api-docs/{{docItem?.packageName}}-{{docItem?.id}}.html"
8+
class="docs-component-view-text-content docs-component-api"
9+
(contentRendered)="updateTableOfContents(docItem!.name, $event)">
10+
</doc-viewer>
1211

13-
<doc-viewer *ngFor="let additionalApiDoc of docItem!.additionalApiDocs"
14-
documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
15-
class="docs-component-view-text-content docs-component-api"
16-
(contentRendered)="updateTableOfContents(additionalApiDoc.name, $event)">
17-
</doc-viewer>
18-
</span>
12+
<doc-viewer *ngFor="let additionalApiDoc of docItem!.additionalApiDocs"
13+
documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
14+
class="docs-component-view-text-content docs-component-api"
15+
(contentRendered)="updateTableOfContents(additionalApiDoc.name, $event)">
16+
</doc-viewer>
1917

2018
<table-of-contents #toc
2119
*ngIf="showToc | async"

‎material.angular.io/src/app/pages/component-viewer/component-api.scss

+7
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,13 @@
1111
}
1212
}
1313

14+
.docs-api-type-alias-name,
15+
.docs-api-class-name {
16+
@media (max-width: 399px) {
17+
word-break: break-word;
18+
}
19+
}
20+
1421
.docs-api-h3 {
1522
font-weight: 300;
1623
font-size: 24px;

‎material.angular.io/src/app/pages/guide-list/guide-list.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
flex-grow: 1;
1111
margin: $content-padding-side;
1212

13-
@media (max-width: $small-breakpoint-width) {
13+
@media (max-width: $extra-small-breakpoint-width) {
1414
margin: 0;
1515
}
1616
}

‎material.angular.io/src/app/pages/guide-viewer/guide-viewer.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ $guide-content-margin-side-xs: 15px;
3030
max-width: 940px;
3131
margin: 0 auto;
3232

33-
@media (max-width: $small-breakpoint-width) {
33+
@media (max-width: $extra-small-breakpoint-width) {
3434
flex-direction: column;
3535
}
3636
}
@@ -39,7 +39,7 @@ $guide-content-margin-side-xs: 15px;
3939
flex-grow: 1;
4040
width: 80%;
4141

42-
@media (max-width: $small-breakpoint-width) {
42+
@media (max-width: $extra-small-breakpoint-width) {
4343
width: 100%;
4444
}
4545
}
@@ -50,7 +50,7 @@ table-of-contents {
5050

5151
// Reposition on top of content on small screens and remove
5252
// sticky positioning
53-
@media (max-width: $small-breakpoint-width) {
53+
@media (max-width: $extra-small-breakpoint-width) {
5454
order: -1;
5555
position: inherit;
5656
width: auto;

‎material.angular.io/src/app/shared/footer/footer.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
<div class="docs-footer-copyright">
2020
<div>
21-
<span>Powered by Google ©2010-2019.</span>
21+
<span>Powered by Google ©2010-2020.</span>
2222
<a href="https://github.com/angular/components/blob/master/LICENSE">Code licensed under an MIT-style License.</a>
2323
<span>Documentation licensed under CC BY 4.0.</span>
2424
</div>

‎material.angular.io/src/styles/_api.scss

+8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
// Styles for API docs generated via dgeni from material2 source JsDocs.
22

3+
.docs-api {
4+
max-width: 100%;
5+
}
6+
37
// Top header, e.g., "API documentation for dialog".
48
.docs-api-h2 {
59
font-size: 30px;
@@ -62,6 +66,10 @@
6266
font-size: 12px;
6367
}
6468

69+
.docs-api-deprecated-marker {
70+
margin-right: 8px;
71+
}
72+
6573
.docs-api-module-import,
6674
.docs-api-class-selector-name,
6775
.docs-api-class-export-name {

‎material.angular.io/src/styles/_constants.scss

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
@import '../../node_modules/@angular/material/theming';
22

3-
$small-breakpoint-width: 720px;
3+
// The values were determined through the combination of Material Design breakpoints and careful
4+
// testing of the application across a range of common device widths (360px+).
5+
// These breakpoint values need to stay in sync with the related constants in
6+
// src/app/pages/component-sidenav/component-sidenav.ts.
7+
// The extra small breakpoint is used for styling the guides and certain aspects of the tables.
8+
$extra-small-breakpoint-width: 720px;
9+
// The small breakpoint is used for the component category and component list pages, the component
10+
// pages, the component sidenav, and certain aspects of the tables.
11+
$small-breakpoint-width: 959px;
412

513
/* For desktop, the content should be aligned with the page title. */
614
$content-padding-side: 70px;

‎material.angular.io/src/styles/_tables.scss

+10
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@
2222
.docs-markdown-td {
2323
font-weight: 400;
2424
padding: 8px 16px;
25+
26+
@media (max-width: $extra-small-breakpoint-width) {
27+
&.docs-api-properties-name-cell,
28+
&.docs-api-method-parameter-cell,
29+
&.docs-api-method-returns-type-cell,
30+
&.docs-api-method-description-cell {
31+
min-width: 80px;
32+
word-break: break-word;
33+
}
34+
}
2535
}
2636

2737

0 commit comments

Comments
 (0)
Please sign in to comment.