Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

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>

0 commit comments

Comments
 (0)