card

scripts/snapshot/ionic.snapshot.js

@@ -19,7 +19,7 @@ var IonicSnapshot = function(options) {
     self.platformId = browser.params.platform_id;
     self.platformIndex = browser.params.platform_index;
     self.platformCount = browser.params.platform_count;
-    self.sleepBetweenSpecs = options.sleepBetweenSpecs || 600;
+    self.sleepBetweenSpecs = options.sleepBetweenSpecs || 750;
     self.width = browser.params.width || -1;
     self.height = browser.params.height || -1;
     self.highestMismatch = 0;

src/components/app/ionic.scss

@@ -27,6 +27,7 @@
   "../alert/alert",
   "../aside/aside",
   "../button/button",
+  "../card/card",
   "../checkbox/checkbox",
   "../content/content",
   "../item/item",
@@ -49,6 +50,7 @@
 
 // iOS Components
 @import
+  "../card/extensions/ios",
   "../checkbox/extensions/ios",
   "../content/extensions/ios",
   "../list/extensions/ios",

src/components/card/card.scss

@@ -0,0 +1,12 @@
+
+// Card
+// --------------------------------------------------
+
+.card {
+  position: relative;
+  margin: 10px;
+}
+
+.card .item-title {
+  white-space: normal;
+}

src/components/card/extensions/ios.scss

@@ -0,0 +1,40 @@
+
+// iOS Card
+// --------------------------------------------------
+
+$card-ios-background-color:          #fff !default;
+$card-ios-box-shadow:                0 1px 2px rgba(0,0,0,.3) !default;
+$card-ios-border-radius:             2px !default;
+$card-ios-font-size:                 1.4rem !default;
+$card-ios-item-content-padding:      15px !default;
+
+.view-ios .card {
+  background: $card-ios-background-color;
+  box-shadow: $card-ios-box-shadow;
+  border-radius: $card-ios-border-radius;
+  font-size: $card-ios-font-size;
+
+  .item,
+  .item-content {
+    padding: 0;
+    background: transparent;
+  }
+
+  .item:last-of-type .item-content:after {
+    background: transparent;
+  }
+
+  .card-header {
+    font-size: 1.7rem;
+  }
+
+  .card-footer {
+    color: #6d6d72;
+  }
+
+  .item-content {
+    padding: $card-ios-item-content-padding
+  }
+
+}
+

src/components/card/test/basic/e2e.js

@@ -0,0 +1 @@
+

src/components/card/test/basic/main.html

@@ -0,0 +1,56 @@
+
+<ion-view nav-title="Card">
+
+  <ion-content>
+
+    <div class="list-header">
+      List Header
+    </div>
+
+    <div class="card">
+
+      <div class="item card-header">
+        <div class="item-content">
+          <div class="item-title">
+            Card Header
+          </div>
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="item-content">
+          <div class="item-title">
+            I met her in a club down in old Soho,
+            where you drink champagne and it tastes just like Cola cola,
+            C-O-L-A cola.
+          </div>
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="item-content">
+          <div class="item-title">
+            She walked up to me and she asked me to dance.
+            I asked her name and in a dark brown voice she said, "Lola",
+            L-O-L-A Lola, lo lo lo lo Lola
+          </div>
+        </div>
+      </div>
+
+      <div class="item card-footer">
+        <div class="item-content">
+          <div class="item-title">
+            Card Footer
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="list-footer">
+      List Footer
+    </div>
+
+  </ion-content>
+
+</ion-view>

src/components/card/test/basic/main.js

@@ -0,0 +1,19 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+import {View} from 'ionic2/components/view/view';
+import {Content} from 'ionic2/components/content/content';
+import {List} from 'ionic2/components/list/list';
+
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html',
+  directives: [View, Content, List]
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)

src/components/item/extensions/ios.scss

@@ -18,6 +18,7 @@ $item-ios-border-color:          $list-ios-border-color !default;
   .item {
     background: $item-ios-background-color;
     min-height: $item-ios-min-height;
+    padding-left: $item-ios-padding-left;
   }
 
   .item-media + .item-content {
@@ -26,7 +27,7 @@ $item-ios-border-color:          $list-ios-border-color !default;
 
   .item-content {
     min-height: $item-ios-min-height;
-    padding: 0 0 0 $item-ios-padding-left;
+    padding: 0;
 
     &:after {
       position: absolute;

src/components/item/item.scss

@@ -61,7 +61,6 @@ ion-primary-swipe-buttons {
   @include flex-shrink(0);
   @include flex-wrap(nowrap);
   @include flex-align-items(center);
-  @include flex-order(1);
 
   min-height: $item-min-height;
 
@@ -73,7 +72,6 @@ ion-primary-swipe-buttons {
 
   @include flex(1);
   @include flex-shrink(1);
-  @include flex-order(2);
 
   max-width: 100%;
 
@@ -85,7 +83,6 @@ ion-primary-swipe-buttons {
 .item-accessory {
   @include flex-display();
   @include flex-shrink(0);
-  @include flex-order(3);
 
   margin-left: 5px;
   max-height: 28px;

src/components/list/list.scss

@@ -2,11 +2,14 @@
 // List
 // --------------------------------------------------
 
+$list-margin-top:             35px !default;
+$list-margin-bottom:          10px !default;
+
 
 .list-header {
   position: relative;
-  margin-top: 35px;
+  margin-top: $list-margin-top;
-  margin-bottom: 10px;
+  margin-bottom: $list-margin-bottom;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -15,14 +18,14 @@
 .list {
   position: relative;
   display: block;
-  margin: 35px 0;
+  margin: $list-margin-top 0;
   padding: 0;
   width: 100%;
   list-style-type: none;
 }
 
-.list-footer {
+.list + .list-footer {
-  margin: -25px 0 10px;
+  margin: ($list-margin-bottom - $list-margin-top) 0 $list-margin-bottom;
 }
 
 .list-header + .list {

src/components/tabs/tabs.js

@@ -16,7 +16,7 @@ export let TabsConfig = new ComponentConfig('tabs');
 
     <div class="toolbar tab-bar toolbar-ios toolbar-bottom">
       <div class="tab-bar-content">
-        <a class="tab-bar-item" class="tab-active" href="#">
+        <a class="tab-bar-item tab-active" href="#">
           Tab 1
         </a>
         <a class="tab-bar-item" href="#">

src/components/toolbar/extensions/android.scss

@@ -14,7 +14,7 @@ $toolbar-android-button-text-color:       #007aff !default;
   height: $toolbar-android-height;
   background: $toolbar-android-background;
 
-  .bar-title {
+  .toolbar-title {
     font-size: $toolbar-android-title-font-size;
   }
 

src/components/toolbar/extensions/ios.scss

@@ -35,21 +35,21 @@ $toolbar-ios-button-background-color:       transparent !default;
     content: '';
   }
 
-  .bar-primary-item {
+  .toolbar-primary-item {
     @include flex-order(2);
   }
 
-  .bar-title {
+  .toolbar-title {
     @include flex-order(3);
     font-size: $toolbar-ios-title-font-size;
     text-align: center;
   }
 
-  .bar-inner-title {
+  .toolbar-inner-title {
     opacity: 0; // JS will set to 1 after adjusting alignment
   }
 
-  .bar-secondary-item {
+  .toolbar-secondary-item {
     @include flex-order(4);
   }
 

src/components/toolbar/toolbar.js

@@ -15,17 +15,17 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
 @Template({
   inline: `
     <div class="toolbar-items">
-      <button class="button back-button bar-item"></button>
+      <button class="button back-button toolbar-item"></button>
       <div class="toolbar-title">
         <div class="toolbar-inner-title">
           {{ title }}
           <content select="ion-nav-title"></content>
         </div>
       </div>
-      <div class="toolbar-item bar-primary-item">
+      <div class="toolbar-item toolbar-primary-item">
         <content select="ion-nav-items[side=primary]"></content>
       </div>
-      <div class="toolbar-item bar-secondary-item">
+      <div class="toolbar-item toolbar-secondary-item">
         <content select="ion-nav-items[side=secondary]"></content>
       </div>
     </div>`,