From a676d7d0f31a6882c86052473999d49166e5501f Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 27 Jan 2016 16:38:40 -0500
Subject: [PATCH] docs(demos): prettify the hide-when demo

---
 demos/hide-when/main.html | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/demos/hide-when/main.html b/demos/hide-when/main.html
index 581e2f5c05..12e4d4c157 100644
--- a/demos/hide-when/main.html
+++ b/demos/hide-when/main.html
@@ -2,8 +2,29 @@
   <ion-title>HideWhen</ion-title>
 </ion-navbar>
 
-<ion-content padding>
-  <p hideWhen="android">
-    <b>(hideWhen="android")</b> This text is hidden on Android only. Click the Android tab to hide this text.
-  </p>
+<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>
+
+  <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-content>
+
+<style>
+  .hide-when-demo .icon-div {
+    text-align: center;
+  }
+
+  .hide-when-demo .icon-div ion-icon {
+    font-size: 200px;
+  }
+
+  .hide-when-demo .icon-div code {
+    background: #f8f8f8;
+  }
+</style>