fix list showcase

components/ionItem/ionItem.html

@@ -1,15 +1,11 @@
 <template name="ionItem">
   {{#if isAnchor}}
     <a class="{{itemClasses}}" href="{{url}}" target="{{target}}">
-      <div class="{{contentClasses}}">
-        {{> UI.contentBlock}}
-      </div>
+      {{> UI.contentBlock}}
     </a>
   {{else}}
     <div class="{{itemClasses}}">
-      <div class="{{contentClasses}}">
-        {{> UI.contentBlock}}
-      </div>
+      {{> UI.contentBlock}}
     </div>
   {{/if}}
 </template>

components/ionItem/ionItem.js

@@ -9,6 +9,10 @@ Template.ionItem.helpers({
       });
     }
 
+    if (this.avatar) {
+      classes.push('item-avatar');
+    }
+
     if (this.iconLeft) {
       classes.push('item-icon-left');
     }
@@ -17,11 +21,13 @@ Template.ionItem.helpers({
       classes.push('item-icon-right');
     }
 
-    return classes.join(' ');
-  },
+    if (this.buttonLeft) {
+      classes.push('item-button-left');
+    }
 
-  contentClasses: function () {
-    var classes = ['item-content'];
+    if (this.buttonRight) {
+      classes.push('item-button-right');
+    }
 
     return classes.join(' ');
   },

showcase/client/stylesheets/app.scss

@@ -4,3 +4,13 @@
 .popover {
   height: auto;
 }
+
+.item p {
+  margin-bottom: 0;
+}
+
+.item-button-left, .item-button-right {
+  button {
+    top: 16px;
+  }
+}

showcase/client/templates/forms/forms.html

@@ -6,9 +6,10 @@
     <h1 class="title">Forms</h1>
   {{/ionHeaderBar}}
 
-  {{#ionContent}}
-    <div class="padding">
-      Content goes here
-    </div>
+  {{#ionContent class="padding"}}
+    <p>
+      Forms use the <a href="https://github.com/meteoric/autoform-ionic" class="positive" target="_blank"><i>meteoric:autoform-ionic</i> package.</a>
+    </p>
+    <a href="http://autoform-ionic.meteor.com/" class="button button-positive" target="_blank">{{> ionIcon icon="ios-upload-outline"}} Launch Example</a>
   {{/ionContent}}
 </template>

showcase/client/templates/lists/lists.html

@@ -4,11 +4,27 @@
       {{> ionIcon icon='ios-arrow-back'}}
     </a>
     <h1 class="title">Lists</h1>
+    <button class="button button-clear" onclick="alert('TODO')">Edit</button>
   {{/ionHeaderBar}}
 
   {{#ionContent}}
-    <div class="padding">
-      Content goes here
-    </div>
+    {{#ionList}}
+
+      {{#each times}}
+
+        {{#ionItem buttonRight=true avatar=true}}
+
+          <img src="https://randomuser.me/api/portraits/thumb/men/27.jpg">
+          <h2>John Smith</h2>
+          <p>
+            (555) 555-1212
+          </p>
+          <button class="button button-balanced">{{> ionIcon icon="ios-telephone"}}</button>
+
+        {{/ionItem}}
+
+      {{/each}}
+
+    {{/ionList}}
   {{/ionContent}}
 </template>

showcase/client/templates/lists/lists.js

@@ -0,0 +1,9 @@
+Template.lists.helpers({
+  times: function () {
+    var times = [];
+    _(20).times(function(n){
+      times.push(n);
+    });
+    return times;
+  }
+});

showcase/client/templates/popup/popup.html

@@ -8,17 +8,17 @@
 
   {{#ionContent}}
     <div class="padding">
-      <button class="button button-block button-stable" data-action="showPopup">
-        Popup
+      <button class="button button-block button-stable" data-action="showPopup" onclick="alert('TODO')">
+        Show Popup
       </button>
-      <button class="button button-block button-stable" data-action="showConfirm">
-        Confirm
+      <button class="button button-block button-stable" data-action="showConfirm" onclick="alert('TODO')">
+        Show Confirm
       </button>
-      <button class="button button-block button-stable" data-action="showAlert">
-        Alert
+      <button class="button button-block button-stable" data-action="showAlert" onclick="alert('TODO')">
+        Show Alert
       </button>
-      <button class="button button-block button-stable" data-action="showPrompt">
-        Prompt
+      <button class="button button-block button-stable" data-action="showPrompt" onclick="alert('TODO')">
+        Show Prompt
       </button>
     </div>
   {{/ionContent}}

showcase/client/templates/slideBox/slideBox.html

@@ -8,7 +8,7 @@
 
   {{#ionContent}}
     <div class="padding">
-      Content goes here
+      Coming Soon
     </div>
   {{/ionContent}}
 </template>

showcase/client/templates/userAccounts/userAccounts.html

@@ -6,9 +6,10 @@
     <h1 class="title">User Accounts</h1>
   {{/ionHeaderBar}}
 
-  {{#ionContent}}
-    <div class="padding">
-      Content goes here
-    </div>
+  {{#ionContent class="padding"}}
+    <p>
+      User accounts use the <a href="https://github.com/meteoric/useraccounts-ionic" class="positive" target="_blank"><i>useraccounts:ionic</i> package.</a>
+    </p>
+    <a href="http://useraccounts-ionic.meteor.com/" class="button button-positive" target="_blank">{{> ionIcon icon="ios-upload-outline"}} Launch Example</a>
   {{/ionContent}}
 </template>