docs(demos): prettifying modal demo

demos/modal/index.ts

@@ -51,7 +51,7 @@ export class ModalContentPage {
         this.myParam = params.get('myParam');
     }
 
-    closeModal() {
+    dismiss() {
       this.viewCtrl.dismiss();
     }
 }

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>

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>