From 0e0685ab07138799893ca7e769314ac772af450d Mon Sep 17 00:00:00 2001 From: Joey Perrott Date: Tue, 12 Sep 2017 14:56:28 -0700 Subject: [PATCH] - Give elevation to navbar on all pages - Make navbar "sticky" on all pages - Show table of contents (non-sticky) at the top of pages on mobile - Shrink landing page spacing on mobile to increase density - Move navbar to a two row version on mobile - Use md-icon for angular and github icons in navbar - Enforce word breaks for p tags in docs, preventing x axis overflows - Decrease height of Guides subheader to match other pages - Shrink docs-api table spacing on mobile to increase density --- src/app/material-docs-app.html | 2 +- src/app/material-docs-app.scss | 5 +++ src/app/material-docs-app.ts | 6 --- .../component-viewer/component-overview.scss | 8 ++++ .../component-viewer/component-viewer.scss | 5 ++- .../component-viewer/component-viewer.ts | 1 + src/app/pages/guide-viewer/guide-viewer.scss | 2 +- src/app/pages/homepage/homepage.scss | 27 ++++++++++++-- src/app/shared/navbar/_navbar-theme.scss | 2 +- src/app/shared/navbar/navbar.html | 29 ++++++++++----- src/app/shared/navbar/navbar.scss | 37 ++++++++++++++++++- src/app/shared/navbar/navbar.spec.ts | 8 +--- src/app/shared/navbar/navbar.ts | 5 ++- src/styles/_api-theme.scss | 5 +++ src/styles/_constants.scss | 4 +- src/styles/_general.scss | 3 +- src/styles/_markdown.scss | 3 +- src/styles/_tables.scss | 20 ++++++++++ 18 files changed, 135 insertions(+), 37 deletions(-) create mode 100644 src/app/pages/component-viewer/component-overview.scss diff --git a/src/app/material-docs-app.html b/src/app/material-docs-app.html index 66531431a..b7b9af2d0 100644 --- a/src/app/material-docs-app.html +++ b/src/app/material-docs-app.html @@ -1,2 +1,2 @@ - + diff --git a/src/app/material-docs-app.scss b/src/app/material-docs-app.scss index 9947a7ca8..c94af59fb 100644 --- a/src/app/material-docs-app.scss +++ b/src/app/material-docs-app.scss @@ -12,6 +12,11 @@ material-docs-app > app-component-sidenav { flex: 1 1 auto; } +// Target last-child as it will be the output of the router-outlet within the app's container. +material-docs-app > :last-child { + overflow-y: auto; +} + app-navbar { position: relative; z-index: 10; diff --git a/src/app/material-docs-app.ts b/src/app/material-docs-app.ts index 4af8e7d08..45e07b567 100644 --- a/src/app/material-docs-app.ts +++ b/src/app/material-docs-app.ts @@ -10,19 +10,13 @@ import 'rxjs/add/operator/filter'; encapsulation: ViewEncapsulation.None, }) export class MaterialDocsApp { - showShadow = false; constructor(router: Router) { - const routesWithNavbarShadow = ['/categories', '/components']; - let previousRoute = router.routerState.snapshot.url; router.events .filter(event => event instanceof NavigationEnd ) .subscribe((data: NavigationEnd) => { - this.showShadow = !!routesWithNavbarShadow - .find(route => data.urlAfterRedirects.startsWith(route)); - // We want to reset the scroll position on navigation except when navigating within // the documentation for a single component. if (!isNavigationWithinComponentView(previousRoute, data.urlAfterRedirects)) { diff --git a/src/app/pages/component-viewer/component-overview.scss b/src/app/pages/component-viewer/component-overview.scss new file mode 100644 index 000000000..b9d58a003 --- /dev/null +++ b/src/app/pages/component-viewer/component-overview.scss @@ -0,0 +1,8 @@ +@import '../../../styles/constants'; + +component-overview { + @media (max-width: $small-breakpoint-width) { + display: flex; + flex-direction: column; + } +} diff --git a/src/app/pages/component-viewer/component-viewer.scss b/src/app/pages/component-viewer/component-viewer.scss index d0614f8d1..289d187fa 100644 --- a/src/app/pages/component-viewer/component-viewer.scss +++ b/src/app/pages/component-viewer/component-viewer.scss @@ -32,7 +32,10 @@ app-component-viewer { top: 35px; @media (max-width: $small-breakpoint-width) { - display: none; + display: flex; + order: -1; + position: inherit; + width: auto; } } } diff --git a/src/app/pages/component-viewer/component-viewer.ts b/src/app/pages/component-viewer/component-viewer.ts index 60abb2edd..802e4394c 100644 --- a/src/app/pages/component-viewer/component-viewer.ts +++ b/src/app/pages/component-viewer/component-viewer.ts @@ -35,6 +35,7 @@ export class ComponentViewer { @Component({ selector: 'component-overview', templateUrl: './component-overview.html', + styleUrls: ['./component-overview.scss'], encapsulation: ViewEncapsulation.None, }) export class ComponentOverview { diff --git a/src/app/pages/guide-viewer/guide-viewer.scss b/src/app/pages/guide-viewer/guide-viewer.scss index f4236f924..e0d44b70f 100644 --- a/src/app/pages/guide-viewer/guide-viewer.scss +++ b/src/app/pages/guide-viewer/guide-viewer.scss @@ -23,7 +23,7 @@ $guide-content-margin-side-xs: 15px; } .docs-guide-toc-and-content { - display: inline-block; + display: block; text-align: left; max-width: 940px; } diff --git a/src/app/pages/homepage/homepage.scss b/src/app/pages/homepage/homepage.scss index 0e2f2e561..cb0aaefde 100644 --- a/src/app/pages/homepage/homepage.scss +++ b/src/app/pages/homepage/homepage.scss @@ -1,14 +1,14 @@ // The margin between two sections $margin-promotion-sections: 60px; +$margin-promotion-sections-small: 15px; .docs-header-background { - height: 300px; - margin-bottom: 40px; + overflow: hidden; } .docs-header-section { text-align: center; - padding-top: 60px; + padding-top: $margin-promotion-sections; } .docs-header-headline { @@ -16,7 +16,7 @@ $margin-promotion-sections: 60px; font-size: 56px; font-weight: 300; line-height: 56px; - margin: 15px 0 15px 0; + margin: 15px 5px; } h2 { @@ -85,3 +85,22 @@ $margin-promotion-sections: 60px; flex-direction: column; justify-content: center; } + + +/** + * Rules for when the device is detected to be a small screen. + */ +@media (max-width: 720px) { + .docs-header-section { + padding-top: $margin-promotion-sections-small; + } + + .docs-header-start, + .docs-homepage-bottom-start { + margin: $margin-promotion-sections-small 0; + } + + .docs-homepage-row { + margin: $margin-promotion-sections-small 0; + } +} diff --git a/src/app/shared/navbar/_navbar-theme.scss b/src/app/shared/navbar/_navbar-theme.scss index 7b5645c8c..365cbb25b 100644 --- a/src/app/shared/navbar/_navbar-theme.scss +++ b/src/app/shared/navbar/_navbar-theme.scss @@ -8,7 +8,7 @@ app-navbar { color: mat-color($primary, default-contrast); - .docs-navbar { + .docs-navbar, .docs-navbar-header { background: mat-color($primary); } } diff --git a/src/app/shared/navbar/navbar.html b/src/app/shared/navbar/navbar.html index 53c5adf4f..dc69061d4 100644 --- a/src/app/shared/navbar/navbar.html +++ b/src/app/shared/navbar/navbar.html @@ -1,19 +1,30 @@ -