From fee752029175a427b0b13a460799231d241567d8 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 1 Apr 2015 20:18:33 -0500 Subject: [PATCH] card --- scripts/snapshot/ionic.snapshot.js | 2 +- src/components/app/ionic.scss | 2 + src/components/card/card.scss | 12 ++++ src/components/card/extensions/android.scss | 0 src/components/card/extensions/ios.scss | 40 +++++++++++++ src/components/card/test/basic/e2e.js | 1 + src/components/card/test/basic/main.html | 56 +++++++++++++++++++ src/components/card/test/basic/main.js | 19 +++++++ src/components/item/extensions/ios.scss | 3 +- src/components/item/item.scss | 3 - src/components/list/list.scss | 13 +++-- src/components/tabs/tabs.js | 2 +- .../toolbar/extensions/android.scss | 2 +- src/components/toolbar/extensions/ios.scss | 8 +-- src/components/toolbar/toolbar.js | 6 +- 15 files changed, 150 insertions(+), 19 deletions(-) create mode 100644 src/components/card/extensions/android.scss create mode 100644 src/components/card/extensions/ios.scss create mode 100644 src/components/card/test/basic/e2e.js create mode 100644 src/components/card/test/basic/main.html create mode 100644 src/components/card/test/basic/main.js diff --git a/scripts/snapshot/ionic.snapshot.js b/scripts/snapshot/ionic.snapshot.js index 7bb7d26251..5755e95f0a 100644 --- a/scripts/snapshot/ionic.snapshot.js +++ b/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; diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss index a9d2fededb..235db51812 100644 --- a/src/components/app/ionic.scss +++ b/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", diff --git a/src/components/card/card.scss b/src/components/card/card.scss index e69de29bb2..8d391a7cf4 100644 --- a/src/components/card/card.scss +++ b/src/components/card/card.scss @@ -0,0 +1,12 @@ + +// Card +// -------------------------------------------------- + +.card { + position: relative; + margin: 10px; +} + +.card .item-title { + white-space: normal; +} diff --git a/src/components/card/extensions/android.scss b/src/components/card/extensions/android.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/components/card/extensions/ios.scss b/src/components/card/extensions/ios.scss new file mode 100644 index 0000000000..618e0baec1 --- /dev/null +++ b/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 + } + +} + diff --git a/src/components/card/test/basic/e2e.js b/src/components/card/test/basic/e2e.js new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/components/card/test/basic/e2e.js @@ -0,0 +1 @@ + diff --git a/src/components/card/test/basic/main.html b/src/components/card/test/basic/main.html new file mode 100644 index 0000000000..87f0bcc8cd --- /dev/null +++ b/src/components/card/test/basic/main.html @@ -0,0 +1,56 @@ + + + + + +
+ List Header +
+ +
+ +
+
+
+ Card Header +
+
+
+ +
+
+
+ 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. +
+
+
+ +
+
+
+ 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 +
+
+
+ +
+
+
+ Card Footer +
+
+
+ +
+ +
+ List Footer +
+ + + + diff --git a/src/components/card/test/basic/main.js b/src/components/card/test/basic/main.js new file mode 100644 index 0000000000..57787662f9 --- /dev/null +++ b/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) diff --git a/src/components/item/extensions/ios.scss b/src/components/item/extensions/ios.scss index 69d964ca32..6030f5c134 100644 --- a/src/components/item/extensions/ios.scss +++ b/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; diff --git a/src/components/item/item.scss b/src/components/item/item.scss index f70e7e46eb..505d9c4367 100644 --- a/src/components/item/item.scss +++ b/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; diff --git a/src/components/list/list.scss b/src/components/list/list.scss index 782e0bc0e7..f14605e78c 100644 --- a/src/components/list/list.scss +++ b/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-bottom: 10px; + margin-top: $list-margin-top; + 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 { - margin: -25px 0 10px; +.list + .list-footer { + margin: ($list-margin-bottom - $list-margin-top) 0 $list-margin-bottom; } .list-header + .list { diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index 14a0ac3dad..013ac2a22f 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -16,7 +16,7 @@ export let TabsConfig = new ComponentConfig('tabs');
- + Tab 1 diff --git a/src/components/toolbar/extensions/android.scss b/src/components/toolbar/extensions/android.scss index 771bf00a9e..5faebef4d7 100644 --- a/src/components/toolbar/extensions/android.scss +++ b/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; } diff --git a/src/components/toolbar/extensions/ios.scss b/src/components/toolbar/extensions/ios.scss index 93950e4ada..172a36d96c 100644 --- a/src/components/toolbar/extensions/ios.scss +++ b/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); } diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js index e7675a646e..19aa605c24 100644 --- a/src/components/toolbar/toolbar.js +++ b/src/components/toolbar/toolbar.js @@ -15,17 +15,17 @@ export let ToolbarConfig = new ComponentConfig('toolbar') @Template({ inline: `
- +
{{ title }}
-
+
-
+
`,