adding images

ContactsManager/app/app.component.html

@@ -1,7 +1,9 @@
 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
  <div class="mdl-layout__header-row">
- <a class="md-title-icon" href="#" target="_blank"><i></i></a>
+ <a class="md-title-icon" href="#" target="_blank">
+ <i class="material-icons">contacts</i>
+ </a>
  <span class="mdl-layout-title">Contacts Manager</span>
  </div>
  <div class="mdl-navigation">

ContactsManager/app/contacts/contact.ts

@@ -6,4 +6,5 @@ export interface Contact {
  zip: string;
  email: string;
  twitter: string;
+ image: string;
 }

ContactsManager/app/contacts/create-contact.component.ts

@@ -4,7 +4,7 @@ import { ContactsService } from './contacts.service';
 
 @Component({
  selector: 'create-contact',
- templateUrl: 'app/contacts/create-contact.html'
+ templateUrl: 'app/contacts/create-contact.component.html'
 })
 export class CreateContactComponent {
 

ContactsManager/app/contacts/display-contacts.component.css

@@ -1,10 +1,22 @@
-.mdl-card {
+.mdl-grid {
+ width: 70%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+
+.mdl-card img {
+ width: 100%;
+}
+
+
+/*.mdl-card {
  width: 320px;
  height: 320px;
 }
 
 .mdl-card > .mdl-card__title {
  background: #FF5252;
  color: #fff;
- /*background: url('./images/image_card.jpg') bottom right 15% no-repeat #46B6AC;*/
-}
+ background: url('./images/image_card.jpg') bottom right 15% no-repeat #46B6AC;
+}*/

ContactsManager/app/contacts/display-contacts.component.html

@@ -1,20 +1,22 @@
 <div class="mdl-grid">
- <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--3-col-desktop" *ngFor="#contact of contactsList">
- <div class="mdl-card__title mdl-card--expand">
- <h2 class="mdl-card__title-text">{{contact.name}}</h2>
+ <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp" *ngFor="#contact of contactsList">
+ <div class="mdl-card__media">
+ <img [src]="'app/assets/images/' + contact.image"/>
  </div>
- <div class="mdl-card__supporting-text mdl-color-text--grey-600">
- {{contact.address}}, {{contact.city}}, {{contact.state}} {{contact.zip}}
+ <div class="mdl-card__title">
+ <h4 class="mdl-card__title-text">{{contact.name}}</h4>
  </div>
- <div class="mdl-card__supporting-text mdl-color-text--grey-600">
- {{contact.email}}
+ <div class="mdl-card__supporting-text">
+ <span class="mdl-typography--font-light mdl-typography--subhead">{{contact.address}}, {{contact.city}}, {{contact.state}} {{contact.zip}}</span>
  </div>
- <div class="mdl-card__actions mdl-card--border">
- <a [href]="'http:https://twitter.com/' + contact.twitter" class="mdl-button mdl-js-button mdl-js-ripple-effect">@{{contact.twitter}}</a>
+ <div class="mdl-card__supporting-text">
+ <span class="mdl-typography--font-light mdl-typography--subhead">{{contact.email}}</span>
+ </div>
+ <div class="mdl-card__actions">
+ <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" [href]="'http:https://twitter.com/' + contact.twitter" target="_blank">
+ @{{contact.twitter}}
+ <i class="material-icons">chevron_right</i>
+ </a>
  </div>
  </div>
-</div>
-
-<!--<button class="mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;colored">-->
-<!--<i class="material-icons">add</i>-->
-<!--</button>-->
+</div>

ContactsManager/app/contacts/mock-contacts.ts

@@ -1,4 +1,4 @@
-import { Contact } from './models/contact';
+import { Contact } from './contact';
 
 export let ContactsList: Contact[] = [
  {
@@ -8,7 +8,8 @@ export let ContactsList: Contact[] = [
  state: 'WA',
  zip: '10999',
  email: '[email protected]',
- twitter: 'debra_example'
+ twitter: 'debra_example',
+ image: 'one.png'
  },
  {
  name: 'Thorsten Weinrich',
@@ -17,7 +18,8 @@ export let ContactsList: Contact[] = [
  state: 'WA',
  zip: '10999',
  email: '[email protected]',
- twitter: 'thorsten_example'
+ twitter: 'thorsten_example',
+ image: 'two.png'
  },
  {
  name: 'Yuhong Li',
@@ -26,7 +28,8 @@ export let ContactsList: Contact[] = [
  state: 'WA',
  zip: '10999',
  email: '[email protected]',
- twitter: 'yuhong_example'
+ twitter: 'yuhong_example',
+ image: 'one.png'
  },
  {
  name: 'Jon Orton',
@@ -35,7 +38,8 @@ export let ContactsList: Contact[] = [
  state: 'WA',
  zip: '10999',
  email: '[email protected]',
- twitter: 'jon_example'
+ twitter: 'jon_example',
+ image: 'two.png'
  },
  {
  name: 'Diliana Alexieva-Bosseva',
@@ -44,6 +48,7 @@ export let ContactsList: Contact[] = [
  state: 'WA',
  zip: '10999',
  email: '[email protected]',
- twitter: 'diliana_example'
+ twitter: 'diliana_example',
+ image: 'one.png'
  }
 ];

ContactsManager/package.json

@@ -1,28 +1,28 @@
 {
- "name": "contacts-manager",
- "version": "1.0.0",
- "scripts": {
- "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
- "tsc": "tsc",
- "tsc:w": "tsc -w",
- "lite": "lite-server",
- "typings": "typings",
- "postinstall": "typings install"
- },
- "license": "ISC",
- "dependencies": {
- "angular2": "2.0.0-beta.8",
- "systemjs": "0.19.22",
- "es6-promise": "^3.0.2",
- "es6-shim": "^0.33.3",
- "reflect-metadata": "0.1.2",
- "rxjs": "5.0.0-beta.2",
- "zone.js": "0.5.15"
- },
- "devDependencies": {
- "concurrently": "^2.0.0",
- "lite-server": "^2.1.0",
- "typescript": "^1.8.2",
- "typings":"^0.6.8"
- }
+  "name": "contacts-manager",
+  "version": "1.0.0",
+  "scripts": {
+  "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
+  "tsc": "tsc",
+  "tsc:w": "tsc -w",
+  "lite": "lite-server",
+  "typings": "typings",
+  "postinstall": "typings install"
+  },
+  "license": "ISC",
+  "dependencies": {
+  "angular2": "2.0.0-beta.9",
+  "systemjs": "0.19.24",
+  "es6-promise": "^3.0.2",
+  "es6-shim": "^0.33.3",
+  "reflect-metadata": "0.1.2",
+  "rxjs": "5.0.0-beta.2",
+  "zone.js": "0.5.15"
+  },
+  "devDependencies": {
+  "concurrently": "^2.0.0",
+  "lite-server": "^2.1.0",
+  "typescript": "^1.8.7",
+  "typings": "^0.7.5"
+  }
 }

ContactsManager/typings.json

@@ -1,6 +1,6 @@
 {
- "ambientDependencies": {
- "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
- "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#bc92442c075929849ec41d28ab618892ba493504"
- }
+  "ambientDependencies": {
+  "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
+  "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#d594ef506d1efe2fea15f8f39099d19b39436b71"
+  }
 }