Skip to content

Commit f25e91c

Browse files
tinayuangaotinayuangao
authored
Addressed comments (#9)
1 parent 63903c5 commit f25e91c

33 files changed

+868
-6
lines changed

‎src/_app-theme.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
@import '~@angular/material/core/theming/theming';
2+
@import './app/pages/homepage/homepage-theme';
3+
@import './app/shared/navbar/navbar-theme';
24

35
// Styles for the docs app that are based on the current theme.
46
@mixin material-docs-app-theme($theme) {
@@ -11,4 +13,7 @@
1113
material-docs-app {
1214
background: md-color($background, background);
1315
}
16+
17+
@include nav-bar-theme($theme);
18+
@include home-page-theme($theme);
1419
}

‎src/app/app-module.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,25 @@ import {FormsModule} from '@angular/forms';
55
import {HttpModule} from '@angular/http';
66
import {MaterialModule} from '@angular/material';
77
import {MaterialDocsApp} from './material-docs-app';
8+
import {Homepage} from './pages/homepage/homepage';
9+
import {NavBar} from './shared/navbar/navbar';
10+
import {routing} from './routes';
11+
import {ComponentsList} from './pages/components/components';
812

913

1014
@NgModule({
1115
declarations: [
1216
MaterialDocsApp,
17+
ComponentsList,
18+
Homepage,
19+
NavBar,
1320
],
1421
imports: [
1522
BrowserModule,
1623
FormsModule,
1724
HttpModule,
1825
MaterialModule.forRoot(),
26+
routing,
1927
],
2028
providers: [
2129
Location,

‎src/app/material-docs-app.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
Main content
2-
<button md-raised-button color="primary">HELLO</button>
3-
<button md-raised-button color="accent">WORLD</button>
1+
<app-navbar></app-navbar>
2+
<router-outlet></router-outlet>

‎src/app/material-docs-app.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +0,0 @@
1-
:host {
2-
display: block;
3-
}

‎src/app/pages/components/components.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div *ngFor="let component of componentItems">
2+
<img src="../../../assets/img/components/{{component.src}}.svg" [alt]="component.name" />
3+
{{component.name}}
4+
</div>

‎src/app/pages/components/components.scss

Whitespace-only changes.

‎src/app/pages/components/components.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Component} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-components',
5+
templateUrl: 'components.html',
6+
styleUrls: ['components.scss']
7+
})
8+
export class ComponentsList {
9+
componentItems = [
10+
{name: 'Buttons', src: 'button'},
11+
{name: 'Cards', src: 'card'},
12+
{name: 'Chips', src: 'chip'},
13+
{name: 'Grid lists', src: 'grid'},
14+
{name: 'Menu', src: 'menu'},
15+
{name: 'Tooltip', src: 'tooltip'},
16+
{name: 'Progress', src: 'progress'},
17+
]
18+
}

‎src/app/pages/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './components';

‎src/app/pages/homepage/_homepage-theme.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@mixin home-page-theme($theme) {
2+
$primary: map-get($theme, primary);
3+
$accent: map-get($theme, accent);
4+
$warn: map-get($theme, warn);
5+
$background: map-get($theme, background);
6+
$foreground: map-get($theme, foreground);
7+
8+
app-homepage {
9+
.docs-header-background {
10+
background: url('assets/img/homepage/material_splash.svg') repeat-x bottom center, md-color($primary);
11+
}
12+
13+
.docs-header-headline {
14+
color: md-color($primary, default-contrast);
15+
}
16+
17+
.docs-header-start {
18+
color: md-color($primary);
19+
}
20+
21+
.docs-homepage-row {
22+
color: md-color($primary, 800);
23+
}
24+
}
25+
}

‎src/app/pages/homepage/homepage.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<header class="docs-header-background">
2+
<div class="docs-header-section">
3+
<div class="docs-header-headline">
4+
<h1>Angular Material</h1>
5+
Material Design components for Angular 2 apps
6+
</div>
7+
<div class="docs-header-start">
8+
<a md-raised-button routerLink="components">Get started</a>
9+
</div>
10+
</div>
11+
</header>
12+
13+
<div class="docs-homepage-promo">
14+
<div *ngFor="let section of homePageContent"
15+
class="docs-homepage-row"
16+
[class.docs-homepage-reverse-row]="section.reverse">
17+
<div class="docs-homepage-promo-img">
18+
<img [src]="getImagePath(section.img)" [alt]="section.title" />
19+
</div>
20+
<div class="docs-homepage-promo-desc">
21+
<h2>{{section.title}}</h2>
22+
<p>{{section.content}}</p>
23+
</div>
24+
</div>
25+
<div class="docs-homepage-bottom-start">
26+
<button md-raised-button color="primary">Get started</button>
27+
</div>
28+
</div>

‎src/app/pages/homepage/homepage.scss

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// The margin between two sections
2+
$margin-promotion-sections: 32px;
3+
4+
.docs-header-background {
5+
height: 560px;
6+
}
7+
8+
.docs-header-section {
9+
text-align: center;
10+
padding-top: 160px;
11+
}
12+
13+
.docs-homepage-promo {
14+
padding: 16px;
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
}
19+
20+
.docs-homepage-row {
21+
display: flex;
22+
max-width: 920px;
23+
margin: $margin-promotion-sections 0;
24+
}
25+
26+
.docs-homepage-row img {
27+
max-width: 100%;
28+
}
29+
30+
.docs-homepage-reverse-row {
31+
flex-direction: row-reverse;
32+
}
33+
34+
.docs-header-start,
35+
.docs-homepage-bottom-start {
36+
text-align: center;
37+
margin: $margin-promotion-sections 0;
38+
}
39+
40+
.docs-homepage-promo-img,
41+
.docs-homepage-promo-desc {
42+
width: 50%;
43+
}
44+
45+
.docs-homepage-promo-img {
46+
text-align: center;
47+
}
48+
49+
.docs-homepage-promo-desc {
50+
line-height: 2;
51+
display: flex;
52+
flex-direction: column;
53+
justify-content: center;
54+
}
55+
56+

‎src/app/pages/homepage/homepage.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Component} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-homepage',
5+
templateUrl: 'homepage.html',
6+
styleUrls: ['homepage.scss']
7+
})
8+
export class Homepage {
9+
private _imagePath: string = '../assets/img/homepage/';
10+
11+
homePageContent = [
12+
{
13+
title: 'Sprint from Zero to App',
14+
content: `Hit the ground running with comprehensive, modern UI components that work across
15+
the web, mobile and desktop`,
16+
reverse: false,
17+
img: 'sprintzerotoapp.svg',
18+
},
19+
{
20+
title: 'Fast and Consistent',
21+
content: `Finely tunes performance, because every millisecond counts. Fully tested across
22+
modern browsers.`,
23+
reverse: true,
24+
img: 'fastandconsistent.svg',
25+
},
26+
{
27+
title: 'Versatile',
28+
content: `Themable, for when you need to stay on brand or just have a facourite color.
29+
Accessible and internationalized so that all users are welcome.`,
30+
reverse: false,
31+
img: 'versatile.svg',
32+
},
33+
{
34+
title: 'Optimized for Angular',
35+
content: 'Built by the Angular team to integrate seamlessly with Angular 2.',
36+
reverse: true,
37+
img: 'optimized.svg',
38+
},
39+
];
40+
41+
getImagePath(srcSvg: string): string {
42+
return this._imagePath + srcSvg;
43+
}
44+
}

‎src/app/pages/homepage/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './homepage';

‎src/app/routes.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { ModuleWithProviders } from '@angular/core';
2+
import { Homepage } from './pages/homepage';
3+
import { ComponentsList } from './pages/components';
4+
import { Routes, RouterModule } from '@angular/router';
5+
6+
const MATERIAL_DOCS_ROUTES: Routes = [
7+
{ path: '', component: Homepage, pathMatch: 'full' },
8+
{ path: 'components', component: ComponentsList },
9+
];
10+
11+
export const routing: ModuleWithProviders = RouterModule.forRoot(MATERIAL_DOCS_ROUTES);

‎src/app/shared/navbar/_navbar-theme.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@mixin nav-bar-theme($theme) {
2+
$primary: map-get($theme, primary);
3+
$accent: map-get($theme, accent);
4+
$warn: map-get($theme, warn);
5+
$background: map-get($theme, background);
6+
$foreground: map-get($theme, foreground);
7+
8+
app-navbar {
9+
color: md-color($primary, default-contrast);
10+
11+
.docs-navbar {
12+
background: md-color($primary);
13+
}
14+
}
15+
}

‎src/app/shared/navbar/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './navbar';

‎src/app/shared/navbar/navbar.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
2+
<nav class="docs-navbar">
3+
<a md-button routerLink="/" aria-label="Angular Material">
4+
<img class="docs-angular-logo"
5+
src="../../../assets/img/homepage/angular-logo-with-text.svg"
6+
alt="Angular">
7+
<span>Material</span>
8+
</a>
9+
<a md-button routerLink="components" aria-label="Components">Components</a>
10+
</nav>
11+

‎src/app/shared/navbar/navbar.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import '../../../main';
2+
3+
.docs-navbar {
4+
padding: 8px 16px;
5+
}
6+
7+
.docs-angular-logo {
8+
margin: 0 4px 3px 0;
9+
height: 26px;
10+
vertical-align: middle;
11+
}

‎src/app/shared/navbar/navbar.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-navbar',
5+
templateUrl: 'navbar.html',
6+
styleUrls: ['navbar.scss']
7+
})
8+
export class NavBar {}

‎src/assets/img/components/card.svg

Lines changed: 18 additions & 0 deletions
Loading

‎src/assets/img/components/chip.svg

Lines changed: 19 additions & 0 deletions
Loading

‎src/assets/img/components/fab.svg

Lines changed: 17 additions & 0 deletions
Loading

‎src/assets/img/components/grid.svg

Lines changed: 17 additions & 0 deletions
Loading

‎src/assets/img/components/menu.svg

Lines changed: 16 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)