From 95d03cad9b5d191d53ec5dc42be2aa635eee12e8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 28 Jan 2016 11:27:37 -0500
Subject: [PATCH] docs(demos): prettifying modal demo

---
 demos/modal/index.ts           |  2 +-
 demos/modal/main.html          | 36 ++++++++++++++++------------------
 demos/modal/modal-content.html | 13 ++++++++++--
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/demos/modal/index.ts b/demos/modal/index.ts
index ac0e981855..f419f9ddbe 100644
--- a/demos/modal/index.ts
+++ b/demos/modal/index.ts
@@ -51,7 +51,7 @@ export class ModalContentPage {
         this.myParam = params.get('myParam');
     }
 
-    closeModal() {
+    dismiss() {
       this.viewCtrl.dismiss();
     }
 }
diff --git a/demos/modal/main.html b/demos/modal/main.html
index b9bdeae928..2641b167d8 100644
--- a/demos/modal/main.html
+++ b/demos/modal/main.html
@@ -2,25 +2,23 @@
   <ion-title>Modals</ion-title>
 </ion-navbar>
 
-<ion-content padding>
-  <ion-row>
-    <button secondary clear (click)="openBasicModal()">Open Basic Modal</button>
-  </ion-row>
+<ion-content>
+  <div padding>
+    <button block (click)="openBasicModal()">Open Basic Modal</button>
+    <!-- <button block secondary (click)="openCustomAnimationModal()">Open with Custom Animation</button> -->
+  </div>
 
-<!--   <ion-row>
-    <button secondary outline (click)="openCustomAnimationModal()">Open With Custom Animation</button>
-  </ion-row> -->
+  <ion-list no-margin>
+    <ion-list-header>
+      Enter Parameters to Pass to the Modal
+    </ion-list-header>
+    <ion-item>
+      <ion-label>Parameters</ion-label>
+      <ion-input [(ngModel)]="myParam" type="text" placeholder="Enter Parameters"></ion-input>
+    </ion-item>
+  </ion-list>
 
-  <ion-row>
-    <ion-col>
-      <button secondary (click)="openModalWithParams()">Pass Params</button>
-    </ion-col>
-    <ion-col>
-      <ion-item>
-        <ion-label floating>Params</ion-label>
-        <ion-input [(ngModel)]="myParam" type="text"></ion-input>
-        {{ myParam }}
-      </ion-item>
-    </ion-col>
-  </ion-row>
+  <div padding>
+    <button block danger (click)="openModalWithParams()">Open with Parameters</button>
+  </div>
 </ion-content>
diff --git a/demos/modal/modal-content.html b/demos/modal/modal-content.html
index 74fdea736d..912b898394 100644
--- a/demos/modal/modal-content.html
+++ b/demos/modal/modal-content.html
@@ -1,8 +1,17 @@
 <ion-navbar *navbar>
+  <ion-buttons start>
+    <button (click)="dismiss()">Close</button>
+  </ion-buttons>
   <ion-title>Modals</ion-title>
 </ion-navbar>
 
 <ion-content padding>
-  <div [class.hide]="!myParam">Parameters entered: {{myParam}}</div>
-  <button danger full (click)="closeModal()">Close Modal</button>
+  <div [hidden]="!myParam">
+    <h5>Parameters passed:</h5>
+    <p>{{myParam}}</p>
+  </div>
+  <div [hidden]="myParam">
+    <p>No parameters passed.</p>
+  </div>
+  <button danger full (click)="dismiss()">Close Modal</button>
 </ion-content>