diff --git a/package.json b/package.json index 358669fdba23..4c1781cbc407 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,6 @@ "angular-cli": {}, "scripts": { "start": "npm run build-themes && ng serve --aot --sourcemaps=false", - "start-jit": "npm run build-themes && ng serve --sourcemaps=false", "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update", diff --git a/src/app/pages/component-sidenav/_component-sidenav-theme.scss b/src/app/pages/component-sidenav/_component-sidenav-theme.scss index 8007d70a2337..fe4e01adba97 100644 --- a/src/app/pages/component-sidenav/_component-sidenav-theme.scss +++ b/src/app/pages/component-sidenav/_component-sidenav-theme.scss @@ -1,49 +1,36 @@ @import '../../../../node_modules/@angular/material/theming'; -@import '../../../styles/constants'; @mixin component-viewer-sidenav-theme($theme) { $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); $background: map-get($theme, background); $foreground: map-get($theme, foreground); - $is-dark-theme: map-get($theme, is-dark); - $nav-background-opacity: if($is-dark-theme, 0.2, 0.03); + $sidenav: '.docs-component-viewer-sidenav'; - .docs-component-viewer-nav-content { - background: rgba(0, 0, 0, $nav-background-opacity); - &::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, .26); - } - - button { - color: rgba(mat-color($foreground, text), .5); - } + .docs-component-viewer-sidenav { - hr { - border: none; - border-top: solid 1px rgba(mat-color($foreground, secondary-text), .1) + // Section divider + h3 { + background: rgba(mat-color($foreground, secondary-text), .32); + color: mat-color($primary, default-contrast); } - a { + // Sidenav navigation items + li { + border-color: rgba(mat-color($foreground, secondary-text), .06); color: mat-color($foreground, secondary-text); - &.docs-component-viewer-sidenav-item-selected, - &:hover { - color: mat-color($primary); - } - } - } - - @media (max-width: $small-breakpoint-width) { - .docs-component-viewer-sidenav { - .docs-component-viewer-nav-content { - background: none; - } - } + > a { + color: mat-color($foreground, secondary-text); - .mat-drawer { - &::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, .26); + &.is-selected, + &:hover, + &:focus { + background: mat-color($background, background); + color: mat-color($primary); + } } } } diff --git a/src/app/pages/component-sidenav/component-nav.html b/src/app/pages/component-sidenav/component-nav.html deleted file mode 100644 index 5db30f6bdc66..000000000000 --- a/src/app/pages/component-sidenav/component-nav.html +++ /dev/null @@ -1,23 +0,0 @@ -
-
- -
-
\ No newline at end of file diff --git a/src/app/pages/component-sidenav/component-sidenav.html b/src/app/pages/component-sidenav/component-sidenav.html index 630ad5592aac..5aacd122f275 100644 --- a/src/app/pages/component-sidenav/component-sidenav.html +++ b/src/app/pages/component-sidenav/component-sidenav.html @@ -1,23 +1,23 @@ - - + +
-
-
- - - - -
- -
+ +
- \ No newline at end of file + diff --git a/src/app/pages/component-sidenav/component-sidenav.scss b/src/app/pages/component-sidenav/component-sidenav.scss index 3e10381e294a..ee2e517cbcd5 100644 --- a/src/app/pages/component-sidenav/component-sidenav.scss +++ b/src/app/pages/component-sidenav/component-sidenav.scss @@ -1,149 +1,88 @@ -@import '../../../styles/constants'; - +$sidenav-spacing-unit: 8px; $sidenav-width: 240px; +app-component-sidenav { + display: flex; +} + .docs-component-viewer-sidenav-container { - box-sizing: border-box; + width: 100%; + + .mat-drawer-content { + position: absolute; + right: 0; + left: 0; + } } .docs-component-viewer-sidenav { + box-shadow: 3px 0 6px rgba(0, 0, 0, .24); + padding-bottom: 72px; + width: $sidenav-width; + bottom: 0; overflow: auto; -} + height: 100%; -.docs-component-sidenav-inner-content { - display: flex; - flex-direction: row; + &.mat-sidenav-opened { + box-shadow: 3px 0 6px rgba(0, 0, 0, .24); + } - // The rule will match the element following the router-outlet which will be the routed component. - router-outlet + * { - flex-grow: 1; + // Section divider + h3 { + border: none; + font-size: 10px; + letter-spacing: 1px; + line-height: $sidenav-spacing-unit * 3; + text-transform: uppercase; + font-weight: 400; + margin: 0; + padding: 0 ($sidenav-spacing-unit * 2); } -} -.mat-drawer { - &::-webkit-scrollbar { - height: 4px; - width: 4px; + ul { + list-style-type: none; + margin: 0; + padding: 0; } -} -.docs-component-viewer-nav { - position: sticky; - top: 25px; + // Sidenav navigation item + li { + border-bottom-width: 1px; + border-bottom-style: solid; + margin: 0; + padding: 0; - .docs-component-viewer-nav-content { - margin: 25px; - width: $sidenav-width; - max-height: 75vh; - overflow: auto; - &::-webkit-scrollbar { - height: 4px; - width: 4px; + // Hide the border on the last item + &:last-child { + border-color: transparent; } - button { - padding: 10px 15px; - font-weight: 700; - line-height: 16px; - margin: 0; - font-size: 13px; - cursor: pointer; - position: relative; + > a { + box-sizing: border-box; display: block; - width: 100%; - text-align: left; - background: none; - border: none; - - &:focus { - outline: none; - } + font-size: 14px; + font-weight: 400; + line-height: ($sidenav-spacing-unit * 6) - 1; + text-decoration: none; + transition: all .3s; + padding: 0 ($sidenav-spacing-unit * 2); + position: relative; - .mat-icon { - position: absolute; - right: 5px; - font-size: 18px; + &.docs-component-viewer-sidenav-item-selected { + font-weight: 600; } } - - hr { - padding: 0; - margin: 0; - } - - ul { - list-style-type: none; - margin: -5px 0 5px 0; - padding: 0; - overflow: hidden; - } - - li { - font-size: 13px; - line-height: 16px; - margin: 0; - padding: 5px 15px 5px 20px; - } - - a { - display: block; - text-decoration: none; - } } } .docs-component-sidenav-content { + min-height: 100%; display: flex; flex-direction: column; -} - -// Add specific rule to prevent default rule conflict -.docs-component-viewer-sidenav-container.mat-drawer-container{ - display: block; - overflow: hidden; - position: absolute; - // Offset the top by the toolbar height - top: 50px; - bottom: 0; - left: 0; - right: 0; -} - -.docs-component-sidenav-inner-content { - display: flex; - flex-direction: column; -} - -.docs-component-sidenav-body-content { - display: flex; - // footer should always reside at the bottom of the screen. - // if container not 100vh, push min height to that minus - // the offset of the top bar and the footer height - min-height: calc(100vh - 264px); -} - -@media (max-width: $small-breakpoint-width) { - // Add specific rule to prevent default rule conflict - .docs-component-viewer-sidenav-container .docs-component-viewer-sidenav { - // offset the top by the header + tabs on a small screen - top: 42px; - } - - .mat-sidenav-content { - // offset the top by the header + tabs on a small screen - margin-top: 42px; - } - - .docs-component-viewer-nav { - position: relative; - top: 0; - .docs-component-viewer-nav-content { - box-sizing: border-box; - margin: 0; - max-height: initial; - box-sizing: border-box; - } + // The rule will match the element following the router-outlet which will be the routed component. + router-outlet + * { + flex-grow: 1; } } diff --git a/src/app/pages/component-sidenav/component-sidenav.ts b/src/app/pages/component-sidenav/component-sidenav.ts index ff7ebb6183d5..a2fa5478f8bf 100644 --- a/src/app/pages/component-sidenav/component-sidenav.ts +++ b/src/app/pages/component-sidenav/component-sidenav.ts @@ -1,18 +1,12 @@ -import { - Component, Input, NgZone, ViewEncapsulation, ViewChild, OnInit, NgModule, trigger, state, - animate, transition, style, OnDestroy -} from '@angular/core'; +import {Component, NgZone, ViewEncapsulation, ViewChild, OnInit, NgModule} from '@angular/core'; import {DocumentationItems} from '../../shared/documentation-items/documentation-items'; -import {MatSidenav, MatSidenavModule, MatIconModule} from '@angular/material'; +import {MatSidenav, MatSidenavModule} from '@angular/material'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {ActivatedRoute, Params, Router, RouterModule} from '@angular/router'; import {CommonModule} from '@angular/common'; import {ComponentHeaderModule} from '../component-page-header/component-page-header'; import {FooterModule} from '../../shared/footer/footer'; import {Observable} from 'rxjs/Observable'; -import {Subject} from 'rxjs/Subject'; -import 'rxjs/add/operator/switchMap'; -import 'rxjs/add/operator/takeUntil'; const SMALL_WIDTH_BREAKPOINT = 840; @@ -43,11 +37,10 @@ export class ComponentSidenav implements OnInit { this.sidenav.close(); } }); - // Combine params from all of the path into a single object. this.params = Observable.combineLatest( - this._route.pathFromRoot.map(route => route.params), - Object.assign); + this._route.pathFromRoot.map(route => route.params), + Object.assign); } isScreenSmall(): boolean { @@ -55,75 +48,6 @@ export class ComponentSidenav implements OnInit { } } -@Component({ - selector: 'app-component-nav', - templateUrl: './component-nav.html', - animations: [ - trigger('bodyExpansion', [ - state('collapsed', style({height: '0px', visibility: 'hidden'})), - state('expanded', style({height: '*', visibility: 'visible'})), - transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')), - ]), - ], -}) -export class ComponentNav implements OnInit, OnDestroy { - - @Input() params: Observable; - expansions = {}; - private _onDestroy = new Subject(); - - constructor(public docItems: DocumentationItems, - private _router: Router) { } - - ngOnInit() { - this._router.events - .startWith(null) - .switchMap(() => this.params) - .takeUntil(this._onDestroy) - .subscribe(p => this.setExpansions(p)); - } - - ngOnDestroy() { - this._onDestroy.next(); - this._onDestroy.complete(); - } - - /** Set the expansions based on the route url */ - setExpansions(params: Params) { - const categories = this.docItems.getCategories(params.section); - for (const category of categories) { - if (this.expansions[category.id] === true) { - continue; - } - - let match = false; - for (const item of category.items) { - if (this._router.url.indexOf(item.id) > -1) { - match = true; - break; - } - } - this.expansions[category.id] = match; - } - } - - /** Gets the expanded state */ - _getExpandedState(category: string) { - return this.getExpanded(category) ? 'expanded' : 'collapsed'; - } - - /** Toggles the expanded state */ - toggleExpand(category: string) { - this.expansions[category] = !this.expansions[category]; - } - - /** Gets whether expanded or not */ - getExpanded(category: string): boolean { - return this.expansions[category]; - } - -} - @NgModule({ imports: [ @@ -132,11 +56,10 @@ export class ComponentNav implements OnInit, OnDestroy { CommonModule, ComponentHeaderModule, FooterModule, - BrowserAnimationsModule, - MatIconModule, + BrowserAnimationsModule ], exports: [ComponentSidenav], - declarations: [ComponentSidenav, ComponentNav], + declarations: [ComponentSidenav], providers: [DocumentationItems], }) export class ComponentSidenavModule {} diff --git a/src/app/pages/component-viewer/component-viewer.scss b/src/app/pages/component-viewer/component-viewer.scss index 301fa3289477..86897adc225b 100644 --- a/src/app/pages/component-viewer/component-viewer.scss +++ b/src/app/pages/component-viewer/component-viewer.scss @@ -2,9 +2,7 @@ app-component-viewer { font-weight: 400; - - // spacing for the component viewer - padding: 20px 50px 50px 20px; + padding: 20px $content-padding-side 50px; @media ($mat-xsmall) { padding-left: $content-padding-side-xs; @@ -12,12 +10,17 @@ app-component-viewer { } } +.docs-component-viewer { + margin: 0 auto; + max-width: 940px; +} + .docs-component-viewer-section-tab { text-transform: uppercase; } .docs-component-viewer-tabbed-content { - margin-bottom: 25px; + margin-bottom: 50px; } .docs-component-viewer-content { @@ -41,6 +44,7 @@ app-component-viewer { .docs-component-overview { width: 80%; + margin-right: 20px; @media (max-width: $small-breakpoint-width) { width: 100%; diff --git a/src/app/shared/table-of-contents/_table-of-contents-theme.scss b/src/app/shared/table-of-contents/_table-of-contents-theme.scss index efedf7f81b62..454c12ca7b7e 100644 --- a/src/app/shared/table-of-contents/_table-of-contents-theme.scss +++ b/src/app/shared/table-of-contents/_table-of-contents-theme.scss @@ -10,7 +10,6 @@ .docs-link { color: mat-color($foreground, secondary-text); - transition: color 100ms; &:hover, &.docs-active { diff --git a/src/app/shared/table-of-contents/table-of-contents.scss b/src/app/shared/table-of-contents/table-of-contents.scss index 03cd881e59bc..58c745b6be71 100644 --- a/src/app/shared/table-of-contents/table-of-contents.scss +++ b/src/app/shared/table-of-contents/table-of-contents.scss @@ -1,15 +1,12 @@ :host { font-size: 13px; - // Width is container width minus content width - width: 19%; + width: 15%; position: sticky; top: 0; - padding-left: 25px; - box-sizing: border-box; } .docs-toc-container { - padding: 5px 0 10px 10px; + padding: 5px 0 10px 12px; } .docs-toc-heading { diff --git a/src/index.html b/src/index.html index 082c4d2eee0e..906843f28c75 100644 --- a/src/index.html +++ b/src/index.html @@ -16,7 +16,7 @@ sizes="192x192"> - +