From e2f89c3d1b33b2a68ddd86f545afcb746dc8e55b Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Tue, 22 Mar 2016 10:14:47 -0700
Subject: [PATCH] fix(list): update demo page

---
 src/components/list/list.scss    | 3 +++
 src/demo-app/list/list-demo.html | 4 ++--
 src/demo-app/list/list-demo.ts   | 9 ++++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index c26003d851f..7f6a9ca8f0d 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -58,6 +58,8 @@ based on whether the list is in "dense" mode.
     flex-direction: column;
     width: 100%;
     padding: 0 $md-list-side-padding;
+    box-sizing: border-box;
+    overflow: hidden;
 
     &:first-child {
       padding: 0;
@@ -78,6 +80,7 @@ based on whether the list is in "dense" mode.
   [md-list-avatar] {
     width: $md-list-avatar-size;
     height: $md-list-avatar-size;
+    border-radius: 50%;
   }
 }
 
diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
index 7809b65a739..3f5204db22e 100644
--- a/src/demo-app/list/list-demo.html
+++ b/src/demo-app/list/list-demo.html
@@ -15,7 +15,6 @@
 
     <md-list>
       <md-list-item *ngFor="#contact of contacts">
-        <img md-list-avatar src="" alt="">
         <h3 md-line>{{contact.name}}</h3>
         <p md-line *ngIf="thirdLine">extra line</p>
         <p md-line class="demo-secondary-text">{{contact.headline}}</p>
@@ -24,6 +23,7 @@
 
     <md-list>
       <md-list-item *ngFor="#message of messages">
+        <img md-list-avatar [src]="message.image" alt="Image of {{message.from}}">
         <h3 md-line>{{message.from}}</h3>
         <p md-line>
           <span>{{message.subject}} -- </span>
@@ -51,7 +51,6 @@
 
     <md-list dense>
       <md-list-item *ngFor="#contact of contacts">
-        <img md-list-avatar src="" alt="">
         <h3 md-line>{{contact.name}}</h3>
         <p md-line class="demo-secondary-text">{{contact.headline}}</p>
       </md-list-item>
@@ -59,6 +58,7 @@
 
     <md-list dense>
       <md-list-item *ngFor="#message of messages">
+        <img md-list-avatar [src]="message.image" alt="Image of {{message.from}}">
         <h3 md-line>{{message.from}}</h3>
         <p md-line> {{message.subject}} </p>
         <p md-line class="demo-secondary-text">{{message.message}} </p>
diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts
index 57d8eaaec74..afac25fae52 100644
--- a/src/demo-app/list/list-demo.ts
+++ b/src/demo-app/list/list-demo.ts
@@ -25,17 +25,20 @@ export class ListDemo {
     {
       from: 'Nancy',
       subject: 'Brunch?',
-      message: 'Did you want to go on Sunday? I was thinking that might work.'
+      message: 'Did you want to go on Sunday? I was thinking that might work.',
+      image: 'https://angular.io/resources/images/bios/julie-ralph.jpg'
     },
     {
       from: 'Mary',
       subject: 'Summer BBQ',
-      message: 'Wish I could come, but I have some prior obligations.'
+      message: 'Wish I could come, but I have some prior obligations.',
+      image: 'https://angular.io/resources/images/bios/juleskremer.jpg'
     },
     {
       from: 'Bobby',
       subject: 'Oui oui',
-      message: 'Do you have Paris reservations for the 15th? I just booked!'
+      message: 'Do you have Paris reservations for the 15th? I just booked!',
+      image: 'https://angular.io/resources/images/bios/jelbourn.jpg'
     }
   ];