docs(demo): update item reorder demo to use a playlist

demos/item-reorder/index.ts

@@ -7,59 +7,56 @@ import { ionicBootstrap, ItemSliding, NavController, Toast, reorderArray } from
   encapsulation: ViewEncapsulation.None
 })
 class ApiDemoPage {
-  chats: any[];
-  editButton: string = 'Reorder';
+  songs: any[];
+  editButton: string = 'Edit';
   editing: boolean = false;
 
   constructor(private nav: NavController) {
-    this.chats = [
+    this.songs = [
     {
-      img: './avatar-cher.png',
-      name: 'Cher',
-      message: 'Ugh. As if.',
-      time: '9:38 pm'
-    }, {
-      img: './avatar-dionne.png',
-      name: 'Dionne',
-      message: 'Mr. Hall was way harsh.',
-      time: '8:59 pm'
-    }, {
-      img: './avatar-murray.png',
-      name: 'Murray',
-      message: 'Excuse me, "Ms. Dione."',
-      time: 'Wed'
+      title: 'Everything Beta',
+      band: 'Phoria',
+      album: 'Volition'
     },
     {
-      img: './avatar-cher.png',
-      name: 'Cher',
-      message: 'Ugh. As if.',
-      time: '9:38 pm'
-    }, {
-      img: './avatar-dionne.png',
-      name: 'Dionne',
-      message: 'Mr. Hall was way harsh.',
-      time: '8:59 pm'
-    }, {
-      img: './avatar-murray.png',
-      name: 'Murray',
-      message: 'Excuse me, "Ms. Dione."',
-      time: 'Wed'
+      title: 'Hello',
+      band: 'Adele',
+      album: '25'
     },
     {
-      img: './avatar-cher.png',
-      name: 'Cher',
-      message: 'Ugh. As if.',
-      time: '9:38 pm'
-    }, {
-      img: './avatar-dionne.png',
-      name: 'Dionne',
-      message: 'Mr. Hall was way harsh.',
-      time: '8:59 pm'
-    }, {
-      img: './avatar-murray.png',
-      name: 'Murray',
-      message: 'Excuse me, "Ms. Dione."',
-      time: 'Wed'
+      title: 'Bohemian Rhapsody',
+      band: 'Queen',
+      album: 'A Night at the Opera'
+    },
+    {
+      title: 'Don\'t Stop Believin\'',
+      band: 'Journey',
+      album: 'Escape'
+    },
+    {
+      title: 'Smells Like Teen Spirit',
+      band: 'Nirvana',
+      album: 'Nevermind'
+    },
+    {
+      title: 'All You Need Is Love',
+      band: 'The Beatles',
+      album: 'Magical Mystery Tour'
+    },
+    {
+      title: 'Hotel California',
+      band: 'The Eagles',
+      album: 'Hotel California'
+    },
+    {
+      title: 'The Hand That Feeds',
+      band: 'Nine Inch Nails',
+      album: 'With Teeth'
+    },
+    {
+      title: 'Who Are You',
+      band: 'The Who',
+      album: 'Who Are You'
     }];
   }
 
@@ -68,12 +65,12 @@ class ApiDemoPage {
     if (this.editing) {
       this.editButton = 'Done';
     } else {
-      this.editButton = 'Reorder';
+      this.editButton = 'Edit';
     }
   }
 
   reorderData(indexes: any) {
-    this.chats = reorderArray(this.chats, indexes);
+    this.songs = reorderArray(this.songs, indexes);
   }
 }
 

demos/item-reorder/main.html

@@ -10,41 +10,19 @@
 </ion-header>
 
 
-<ion-content class="outer-content" fullscreen>
+<ion-content fullscreen>
 
   <ion-list class="chat-sliding-demo">
     <ion-list-header>
-      Chats
+      Playlist
     </ion-list-header>
 
     <ion-item-group [reorder]="editing" (ionItemReorder)="reorderData($event)">
-
-      <ion-item *ngFor="let chat of chats">
-        <ion-avatar item-left>
-          <img [src]="chat.img">
-        </ion-avatar>
-        <h2>{{chat.name}}</h2>
-        <p>{{chat.message}}</p>
-        <ion-note item-right>
-          {{chat.time}}
-        </ion-note>
+      <ion-item *ngFor="let song of songs">
+        <h2>{{ song.title }}</h2>
+        <p>{{ song.band }} <b>&#183;</b> {{ song.album }}</p>
       </ion-item>
-
     </ion-item-group>
   </ion-list>
 
 </ion-content>
-
-<style>
-
-  .chat-sliding-demo ion-item-options .button-inner {
-    font-size: 14px;
-    flex-direction: column;
-  }
-
-  .chat-sliding-demo ion-item-options ion-icon {
-    padding-right: 0;
-    padding-bottom: 0.3em;
-  }
-
-</style>

src/components/item/item-reorder.ts

@@ -17,7 +17,7 @@ export interface ReorderIndexes {
  * @description
  * Item reorder adds the ability to change an item's order in a group.
  * It can be used within an `ion-list` or `ion-item-group` to provide a
- * visual drap and drop interface.
+ * visual drag and drop interface.
  *
  * ## Grouping Items
  *