From 6f525d1bd8e213e60e3b29b8be59005fdbc3622d Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 26 Apr 2016 13:33:29 -0400
Subject: [PATCH] docs(demos): update demos to use ion-grid

references #6238
---
 demos/hide-when/main.html | 50 +++++++++++++++++----------------
 demos/icon/main.html      |  1 -
 demos/platform/main.html  | 58 ++++++++++++++++++++-------------------
 demos/show-when/main.html | 50 +++++++++++++++++----------------
 4 files changed, 82 insertions(+), 77 deletions(-)

diff --git a/demos/hide-when/main.html b/demos/hide-when/main.html
index bcc127dc9d5..15270b11f46 100644
--- a/demos/hide-when/main.html
+++ b/demos/hide-when/main.html
@@ -6,30 +6,32 @@
   <h5 margin>Hide Icon Per Platform</h5>
   <p margin>In this example we're using the <code>hideWhen</code> directive to decide whether to hide an icon based on the platform.</p>
 
-  <ion-row>
-    <ion-col text-center>
-      <ion-icon name="logo-apple" hideWhen="android,windows"></ion-icon>
-    </ion-col>
-    <ion-col>
-      <code> &lt;ion-icon name="logo-apple" hideWhen="android,windows"&gt;&lt;/ion-icon&gt; </code>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col text-center>
-      <ion-icon name="logo-android" hideWhen="ios,windows"></ion-icon>
-    </ion-col>
-    <ion-col>
-      <code> &lt;ion-icon name="logo-android" hideWhen="ios,windows"&gt;&lt;/ion-icon&gt; </code>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col text-center>
-      <ion-icon name="logo-windows" hideWhen="ios,android"></ion-icon>
-    </ion-col>
-    <ion-col>
-      <code> &lt;ion-icon name="logo-windows" hideWhen="ios,android"&gt;&lt;/ion-icon&gt; </code>
-    </ion-col>
-  </ion-row>
+  <ion-grid>
+    <ion-row>
+      <ion-col text-center>
+        <ion-icon name="logo-apple" hideWhen="android,windows"></ion-icon>
+      </ion-col>
+      <ion-col>
+        <code> &lt;ion-icon name="logo-apple" hideWhen="android,windows"&gt;&lt;/ion-icon&gt; </code>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col text-center>
+        <ion-icon name="logo-android" hideWhen="ios,windows"></ion-icon>
+      </ion-col>
+      <ion-col>
+        <code> &lt;ion-icon name="logo-android" hideWhen="ios,windows"&gt;&lt;/ion-icon&gt; </code>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col text-center>
+        <ion-icon name="logo-windows" hideWhen="ios,android"></ion-icon>
+      </ion-col>
+      <ion-col>
+        <code> &lt;ion-icon name="logo-windows" hideWhen="ios,android"&gt;&lt;/ion-icon&gt; </code>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>
 
 <style>
diff --git a/demos/icon/main.html b/demos/icon/main.html
index 821993fa7f8..90a33d23bd5 100644
--- a/demos/icon/main.html
+++ b/demos/icon/main.html
@@ -58,7 +58,6 @@
 
   .icon-demo ion-row {
     height: 100%;
-    padding: 0;
     flex-wrap: wrap;
   }
 
diff --git a/demos/platform/main.html b/demos/platform/main.html
index ee64912631c..771df1434fe 100644
--- a/demos/platform/main.html
+++ b/demos/platform/main.html
@@ -5,34 +5,36 @@
 <ion-content class="platform-demo">
   <p margin class="note">Change devices to see the platform values change.</p>
 
-  <ion-row>
-    <ion-col><b>Name</b></ion-col>
-    <ion-col><b>Value</b></ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <pre>platform.is('ios')</pre>
-    </ion-col>
-    <ion-col>
-      <pre [ngClass]="isIos ? 'platform-true' : 'platform-false'">{{isIos}}</pre>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <pre>platform.is('android')</pre>
-    </ion-col>
-    <ion-col>
-      <pre [ngClass]="isAndroid ? 'platform-true' : 'platform-false'">{{isAndroid}}</pre>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <pre>platform.is('windows')</pre>
-    </ion-col>
-    <ion-col>
-      <pre [ngClass]="isWindows ? 'platform-true' : 'platform-false'">{{isWindows}}</pre>
-    </ion-col>
-  </ion-row>
+  <ion-grid>
+    <ion-row>
+      <ion-col><b>Name</b></ion-col>
+      <ion-col><b>Value</b></ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col>
+        <pre>platform.is('ios')</pre>
+      </ion-col>
+      <ion-col>
+        <pre [ngClass]="isIos ? 'platform-true' : 'platform-false'">{{isIos}}</pre>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col>
+        <pre>platform.is('android')</pre>
+      </ion-col>
+      <ion-col>
+        <pre [ngClass]="isAndroid ? 'platform-true' : 'platform-false'">{{isAndroid}}</pre>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col>
+        <pre>platform.is('windows')</pre>
+      </ion-col>
+      <ion-col>
+        <pre [ngClass]="isWindows ? 'platform-true' : 'platform-false'">{{isWindows}}</pre>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 
 </ion-content>
 
diff --git a/demos/show-when/main.html b/demos/show-when/main.html
index 0407f2d803d..ea75e935250 100644
--- a/demos/show-when/main.html
+++ b/demos/show-when/main.html
@@ -6,30 +6,32 @@
   <h5 margin>Show Icon Per Platform</h5>
   <p margin>In this example we're using the <code>showWhen</code> directive to decide whether to show an icon based on the platform.</p>
 
-  <ion-row>
-    <ion-col text-center>
-      <ion-icon name="logo-apple" showWhen="ios"></ion-icon>
-    </ion-col>
-    <ion-col>
-      <code> &lt;ion-icon name="logo-apple" showWhen="ios"&gt;&lt;/ion-icon&gt; </code>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col text-center>
-      <ion-icon name="logo-android" showWhen="android"></ion-icon>
-    </ion-col>
-    <ion-col>
-      <code> &lt;ion-icon name="logo-android" showWhen="android"&gt;&lt;/ion-icon&gt; </code>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col text-center>
-      <ion-icon name="logo-windows" showWhen="windows"></ion-icon>
-    </ion-col>
-    <ion-col>
-      <code> &lt;ion-icon name="logo-windows" showWhen="windows"&gt;&lt;/ion-icon&gt; </code>
-    </ion-col>
-  </ion-row>
+  <ion-grid>
+    <ion-row>
+      <ion-col text-center>
+        <ion-icon name="logo-apple" showWhen="ios"></ion-icon>
+      </ion-col>
+      <ion-col>
+        <code> &lt;ion-icon name="logo-apple" showWhen="ios"&gt;&lt;/ion-icon&gt; </code>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col text-center>
+        <ion-icon name="logo-android" showWhen="android"></ion-icon>
+      </ion-col>
+      <ion-col>
+        <code> &lt;ion-icon name="logo-android" showWhen="android"&gt;&lt;/ion-icon&gt; </code>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col text-center>
+        <ion-icon name="logo-windows" showWhen="windows"></ion-icon>
+      </ion-col>
+      <ion-col>
+        <code> &lt;ion-icon name="logo-windows" showWhen="windows"&gt;&lt;/ion-icon&gt; </code>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>
 
 <style>