docs(demos): update demos to use ion-grid

references #6238
ionic-team · Apr 26, 2016 · 6f525d1 · 6f525d1
1 parent a0c0228
commit 6f525d1
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 77 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>