From 8bc853f68163128fe4e20b8cb70f8375fa757eda Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 27 Jan 2016 17:04:14 -0500
Subject: [PATCH] docs(demos): prettifying local-storage demo

---
 demos/local-storage/main.html | 81 +++++++++++++++++++----------------
 1 file changed, 43 insertions(+), 38 deletions(-)

diff --git a/demos/local-storage/main.html b/demos/local-storage/main.html
index 92bce1d2a1..209c42a23c 100644
--- a/demos/local-storage/main.html
+++ b/demos/local-storage/main.html
@@ -2,49 +2,54 @@
   <ion-title>Local Storage</ion-title>
 </ion-navbar>
 
-<ion-content padding>
+<ion-content class="local-storage-demo outer-content">
 
-  <ion-row>
-    <ion-col width-33>
-      <ion-item>
-        <ion-input type="text" placeholder="Key" [(ngModel)]="myItem.key"></ion-input>
-      </ion-item>
-    </ion-col>
+  <ion-list no-margin>
+    <ion-list-header>Add to Local Storage</ion-list-header>
 
-    <ion-col width-33>
-      <ion-item>
-        <ion-input type="text" placeholder="Value" [(ngModel)]="myItem.value"></ion-input>
-      </ion-item>
-    </ion-col>
+    <ion-item>
+      <ion-label>Key</ion-label>
+      <ion-input type="text" placeholder="Enter a key" [(ngModel)]="myItem.key"></ion-input>
+    </ion-item>
 
-    <ion-col width-34>
-      <button full secondary (click)="set()">
-        <ion-icon name="add"></ion-icon>
-        set()
-      </button>
-    </ion-col>
-  </ion-row>
+    <ion-item>
+      <ion-label>Value</ion-label>
+      <ion-input type="text" placeholder="Enter a Value" [(ngModel)]="myItem.value"></ion-input>
+    </ion-item>
 
-  <ion-row>
+  </ion-list>
 
-    <ion-col width-33>
-      <ion-item>
-        <ion-input type="text" placeholder="Key" [(ngModel)]="delKey"></ion-input>
-      </ion-item>
-    </ion-col>
+  <div padding>
+    <button block secondary (click)="set()">
+      <ion-icon name="add"></ion-icon>
+      Add
+    </button>
+  </div>
 
-    <ion-col width-34 offset-33>
-      <button full danger (click)="remove()">
-        <ion-icon name="remove"></ion-icon>
-        remove()
-      </button>
-    </ion-col>
-  </ion-row>
+  <ion-list no-margin>
+    <ion-list-header>Delete from Local Storage</ion-list-header>
 
-  <ion-row>
-    <b>Local Storage:</b>
-    <ion-col>
-    {{localStorageDemo}}
-    </ion-col>
-  </ion-row>
+    <ion-item>
+      <ion-label>Key</ion-label>
+      <ion-input type="text" placeholder="Enter a Key" [(ngModel)]="delKey"></ion-input>
+    </ion-item>
+  </ion-list>
+
+  <div padding>
+    <button block danger (click)="remove()">
+      <ion-icon name="remove"></ion-icon>
+      Delete
+    </button>
+  </div>
+
+  <div padding>
+    <h2>Local Storage:</h2>
+    <pre>local: {{ localStorageDemo }}</pre>
+  </div>
 </ion-content>
+
+<style>
+  .local-storage-demo pre {
+    background: #f8f8f8;
+  }
+</style>