From d937588775bac542792854bee5fc38cfe4f1aedc Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 2 Feb 2016 22:01:04 -0500
Subject: [PATCH] docs(demos): refactor hide/show-when demos

references #5311
---
 demos/hide-when/main.html | 37 ++++++++++++++++++++-----------------
 demos/show-when/main.html | 37 ++++++++++++++++++++-----------------
 2 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/demos/hide-when/main.html b/demos/hide-when/main.html
index 12e4d4c157..b8e0cdf306 100644
--- a/demos/hide-when/main.html
+++ b/demos/hide-when/main.html
@@ -2,29 +2,32 @@
   <ion-title>HideWhen</ion-title>
 </ion-navbar>
 
-<ion-content padding class="hide-when-demo">
-  <h5>If the platform is Android, it will hide the Apple logo. If the platform is iOS, it will hide the Android logo.</h5>
+<ion-content class="hide-when-demo">
+  <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>
 
-  <div class="icon-div" hideWhen="ios">
-    <ion-icon name="logo-android"></ion-icon><br>
-    <code>&lt;div hideWhen="ios"&gt;</code>
-  </div>
-  <div class="icon-div" hideWhen="android">
-    <ion-icon name="logo-apple"></ion-icon><br>
-    <code>&lt;div hideWhen="android"&gt;</code>
-  </div>
+  <ion-row text-center>
+    <ion-col>
+      <ion-icon name="logo-android" hideWhen="ios"></ion-icon>
+    </ion-col>
+    <ion-col>
+      <ion-icon name="logo-apple" hideWhen="android"></ion-icon>
+    </ion-col>
+  </ion-row>
 </ion-content>
 
 <style>
-  .hide-when-demo .icon-div {
-    text-align: center;
+  .hide-when-demo ion-col {
+    background: #f8f8f8;
+    border: 1px solid #ddd;
+    margin: 5px;
   }
 
-  .hide-when-demo .icon-div ion-icon {
-    font-size: 200px;
-  }
-
-  .hide-when-demo .icon-div code {
+  .hide-when-demo code {
     background: #f8f8f8;
   }
+
+  .hide-when-demo ion-icon {
+    font-size: 200px;
+  }
 </style>
diff --git a/demos/show-when/main.html b/demos/show-when/main.html
index 7454bd151d..9a9cb35887 100644
--- a/demos/show-when/main.html
+++ b/demos/show-when/main.html
@@ -2,29 +2,32 @@
   <ion-title>ShowWhen</ion-title>
 </ion-navbar>
 
-<ion-content padding class="show-when-demo">
-  <h5>If the platform is Android, it will show the Android logo. If the platform is iOS, it will show the Apple logo.</h5>
+<ion-content class="show-when-demo">
+  <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>
 
-  <div class="icon-div" showWhen="android">
-    <ion-icon name="logo-android"></ion-icon><br>
-    <code>&lt;div showWhen="android"&gt;</code>
-  </div>
-  <div class="icon-div" showWhen="ios">
-    <ion-icon name="logo-apple"></ion-icon><br>
-    <code>&lt;div showWhen="ios"&gt;</code>
-  </div>
+  <ion-row text-center>
+    <ion-col>
+      <ion-icon name="logo-android" showWhen="android"></ion-icon>
+    </ion-col>
+    <ion-col>
+      <ion-icon name="logo-apple" showWhen="ios"></ion-icon>
+    </ion-col>
+  </ion-row>
 </ion-content>
 
 <style>
-  .show-when-demo .icon-div {
-    text-align: center;
+  .show-when-demo ion-col {
+    background: #f8f8f8;
+    border: 1px solid #ddd;
+    margin: 5px;
   }
 
-  .show-when-demo .icon-div ion-icon {
-    font-size: 200px;
-  }
-
-  .show-when-demo .icon-div code {
+  .show-when-demo code {
     background: #f8f8f8;
   }
+
+  .show-when-demo ion-icon {
+    font-size: 200px;
+  }
 </style>