diff --git a/ionic/components.ts b/ionic/components.ts index 8882d2d358..df34c25a0a 100644 --- a/ionic/components.ts +++ b/ionic/components.ts @@ -3,6 +3,7 @@ export * from 'ionic/components/app/app' export * from 'ionic/components/action-menu/action-menu' export * from 'ionic/components/aside/aside' export * from 'ionic/components/button/button' +export * from 'ionic/components/card/card' export * from 'ionic/components/checkbox/checkbox' export * from 'ionic/components/content/content' export * from 'ionic/components/icon/icon' diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss index 2298a45ea8..0164451d03 100644 --- a/ionic/components/app/typography.scss +++ b/ionic/components/app/typography.scss @@ -38,14 +38,14 @@ ion-app, margin-bottom: 1rem; &:first-child { - margin-top: -0.4rem; + margin-top: -0.3rem; } } h1 + h2, h1 + h3, h2 + h3 { - margin-top: -0.4rem; + margin-top: -0.3rem; } h1 { diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss index a56db9b2e0..30c45aae33 100644 --- a/ionic/components/card/card.scss +++ b/ionic/components/card/card.scss @@ -1,47 +1,23 @@ // Card // -------------------------------------------------- -$card-border-color: #ccc !default; -$card-border-radius: 2px !default; -$card-box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !default; -.card { - position: relative; + +.card.card { margin: 10px; } .card { - .card-header, .card-footer, .card-content { - padding: 15px; - } - img { width: 100%; } + } -.card .item-label { - white-space: normal; -} - -.card .item { - &:first-child { - border-top-left-radius: $card-border-radius; - border-top-right-radius: $card-border-radius; - - .item-content { - border-top-left-radius: $card-border-radius; - border-top-right-radius: $card-border-radius; - } - } - &:last-child { - border-bottom-right-radius: $card-border-radius; - border-bottom-left-radius: $card-border-radius; - - .item-content { - border-bottom-right-radius: $card-border-radius; - border-bottom-left-radius: $card-border-radius; - } - } +.card-header, +.card-footer { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } diff --git a/ionic/components/card/card.ts b/ionic/components/card/card.ts new file mode 100644 index 0000000000..8244aa5f14 --- /dev/null +++ b/ionic/components/card/card.ts @@ -0,0 +1,20 @@ +import {ElementRef} from 'angular2/angular2'; + +import {Ion} from '../ion'; +import {IonicConfig} from '../../config/config'; +import {IonicDirective} from '../../config/annotations'; +import {ListVirtualScroll} from './virtual'; +import * as util from 'ionic/util'; + + +@IonicDirective({ + selector: 'ion-card', + host: { + 'class': 'list' + } +}) +export class Card extends Ion { + constructor(elementRef: ElementRef, ionicConfig: IonicConfig) { + super(elementRef, ionicConfig); + } +} diff --git a/ionic/components/card/extensions/ios.scss b/ionic/components/card/extensions/ios.scss index 7c68fd022a..2aa377bb5c 100644 --- a/ionic/components/card/extensions/ios.scss +++ b/ionic/components/card/extensions/ios.scss @@ -2,39 +2,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; +$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-header-background-color: $card-ios-background-color !default; +$card-ios-header-padding: 10px; +$card-ios-footer-background-color: $card-ios-background-color !default; +$card-ios-footer-padding: 10px; -.mode-ios .card { +.card[mode="ios"] { 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::before, + .item::after { + left: 0; } - .item:last-of-type .item-content:after { - background: transparent; + .item:first-child:before { + border: none; } .card-header { - font-size: 1.7rem; + padding: $card-ios-header-padding; + background-color: $card-ios-footer-background-color; } .card-footer { - color: #6d6d72; - } - - .item-content { - padding: $card-ios-item-content-padding + padding: $card-ios-footer-padding; + background-color: $card-ios-footer-background-color; } } diff --git a/ionic/components/card/extensions/material.scss b/ionic/components/card/extensions/material.scss index 9f9eca7799..53a3da6128 100644 --- a/ionic/components/card/extensions/material.scss +++ b/ionic/components/card/extensions/material.scss @@ -1,5 +1,5 @@ -// iOS Card +// Material Design Card // -------------------------------------------------- $card-md-background-color: #fff !default; @@ -9,7 +9,7 @@ $card-md-font-size: 1.4rem !default; $card-md-item-content-padding: 15px !default; -[mode="md"] .card { +.card[mode="md"] { background: $card-md-background-color; box-shadow: $card-md-box-shadow; border-radius: $card-md-border-radius; diff --git a/ionic/components/card/test/basic/main.html b/ionic/components/card/test/basic/main.html index 09b637158d..aed805e993 100644 --- a/ionic/components/card/test/basic/main.html +++ b/ionic/components/card/test/basic/main.html @@ -1,69 +1,56 @@ - +Basic Cards - -
- List Header + +
+ Card Header +
+
+
+ Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
+
+
+ Card Footer +
+ -
-
- New Post -
-
- Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean. -
-
-
- Posted 5 days ago -
+ + + +
+ +
+ All Out Card
+ +
-
- -
-
-
- 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 -
-
-
- +
+
+ This is a multiline content within a card that should + take up multiple lines and stuff.
+
-
- List Footer +
+
+ + 255
+
+ + Reply +
+
+ + Forward +
+
- +
+ Card Footer +
- + diff --git a/ionic/components/card/test/images/e2e.ts b/ionic/components/card/test/images/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/ionic/components/card/test/images/e2e.ts @@ -0,0 +1 @@ + diff --git a/ionic/components/card/test/images/index.ts b/ionic/components/card/test/images/index.ts new file mode 100644 index 0000000000..2dac2b7a35 --- /dev/null +++ b/ionic/components/card/test/images/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class IonicApp {} diff --git a/ionic/components/card/test/images/main.html b/ionic/components/card/test/images/main.html new file mode 100644 index 0000000000..363a8c3567 --- /dev/null +++ b/ionic/components/card/test/images/main.html @@ -0,0 +1,63 @@ + +Card Images + + + +
+
+
+
+
+

Item with no-border-bottom

+
+
+
+
+

This is content text and stuff.

+
+
+
+
+ Like +
+
+ Share +
+
+ + + + + +
+
+
+
+
+

Card With An Inset Picture

+

Isn't it beautiful

+
+
+ +
+
+
+
+
+ +
+
+ + 255 +
+
+ + Reply +
+
+ + Forward +
+
+ + diff --git a/ionic/components/card/test/links/e2e.ts b/ionic/components/card/test/links/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/ionic/components/card/test/links/e2e.ts @@ -0,0 +1 @@ + diff --git a/ionic/components/card/test/links/index.ts b/ionic/components/card/test/links/index.ts new file mode 100644 index 0000000000..2dac2b7a35 --- /dev/null +++ b/ionic/components/card/test/links/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class IonicApp {} diff --git a/ionic/components/card/test/links/main.html b/ionic/components/card/test/links/main.html new file mode 100644 index 0000000000..e3fe102f90 --- /dev/null +++ b/ionic/components/card/test/links/main.html @@ -0,0 +1,81 @@ + +Card with Links + + + + + + +
+ Link 1 +
+ + + + + +
+ Link 2 +
+ + + + + + + + + + + + +
+ Card Header +
+ + + +
+ Link 1 +
+ + + + + +
+ Link 2 +
+ + + + + +
+ Link 3 +
+ + + + + +
+ Link 4 +
+ + + + + diff --git a/ionic/components/icon/icon.scss b/ionic/components/icon/icon.scss index 7a1c73b4df..482da9f2e1 100644 --- a/ionic/components/icon/icon.scss +++ b/ionic/components/icon/icon.scss @@ -18,3 +18,7 @@ icon { display: inline-block; font-size: 1.8em; } + +icon[small] { + font-size: 1.1em; +} diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 811c211ae8..ffeffa8871 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -48,6 +48,9 @@ button.item { min-width: 26px; text-align: center; } + icon[small]:first-child { + min-width: 18px; + } &.activated { background-color: #d9d9d9; @@ -65,7 +68,8 @@ button.item { icon + .item-content, .item-content + icon, .item-media + .item-content, - .item-content + .item-media { + .item-content + .item-media, + .item-content + .item-content { margin-left: 0; } @@ -129,24 +133,24 @@ button.item { align-items: flex-start; } +.item a { + text-decoration: none; +} + +.item.item.item.no-border-bottom:after { + border: none; +} + +.item.item.item.no-border-bottom + .item::before { + border: none; +} + +.item.item.item.no-border-bottom + .item { + margin-top: -13px; +} + /* -.item { - position: relative; - display: flex; - justify-content: space-between; - align-items: center; - - width: 100%; - min-height: $item-min-height; - margin: 0; - padding: 0; - border: 0; - text-align: initial; -} - -.item-group { -} .item-group-title { display: block; padding: $item-padding; @@ -188,105 +192,6 @@ ion-primary-swipe-buttons { } -// Item Content -// -------------------------------------------------- - -.item-content { - // TODO add proper bg to cover up swipe buttons - background: white; - transform: translate3d(0,0,0); - - position: relative; - - display: flex; - flex: 1; - justify-content: space-between; - align-items: center; - - width: 100%; - min-height: $item-min-height; - - padding: 0; -} - -.item-label { - position: relative; - - //display: flex; - flex: 1; - flex-shrink: 1; - - // To enable multi-line text more easily - flex-direction: column; - - max-width: 100%; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.item-content { - h1, h2, h3, h4, h5, h6 { - align-self: flex-start; - } -} - - - -// Item Media (Icons, checkboxes, images, etc.) -// -------------------------------------------------- - -.item-media { - display: flex; - flex-shrink: 0; - flex-wrap: nowrap; - align-items: center; - - max-width: 100%; - min-height: $item-min-height; - padding: 0; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - img { - max-width: 100%; - } -} - -.item-media + .item-label { - padding-left: $item-padding; -} - -.item-media:last-child { - //padding-right: $item-padding; -} - -.item-note { - color: #aaa; - font-size: 1.4rem; -} - -.item-avatar { - padding-top: ($item-padding / 2) - 1; - padding-bottom: ($item-padding / 2) + 1; - - img { - max-width: 40px; - max-height: 40px; - width: 100%; - height: 100%; - border-radius: 50%; - } -} - -.item-full { - -} - - // Some testing things .item-media-placeholder { diff --git a/ionic/components/item/test/text/main.html b/ionic/components/item/test/text/main.html index aa154a8c55..126b8781f5 100644 --- a/ionic/components/item/test/text/main.html +++ b/ionic/components/item/test/text/main.html @@ -14,6 +14,33 @@
+
+
+ Column +
+
+ Column +
+
+ Column +
+
+ Column +
+
+ +
+
+ align-left +
+
+ align-center +
+
+ align-right +
+
+
Multiline text that should wrap when it is too long to fit on one line in the item. Class on .item-content @@ -43,7 +70,7 @@
-

H4 Title Text

+

H3 Title Text

Paragraph line 1

Paragraph line 2

Paragraph line 3

diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts index f2d631099f..c623c26a36 100644 --- a/ionic/config/annotations.ts +++ b/ionic/config/annotations.ts @@ -8,7 +8,7 @@ import { Aside, Button, Content, Scroll, Refresher, Slides, Slide, SlidePager, Tabs, Tab, - List, Item, ItemGroup, ItemGroupTitle, + Card, List, Item, ItemGroup, ItemGroupTitle, Toolbar, Icon, IconDirective, @@ -38,6 +38,7 @@ export const IonicDirectives = [ forwardRef(() => Refresher), // Lists + forwardRef(() => Card), forwardRef(() => List), forwardRef(() => Item), forwardRef(() => ItemGroup), diff --git a/ionic/util/util.scss b/ionic/util/util.scss index 9221a7fed4..002c2af466 100755 --- a/ionic/util/util.scss +++ b/ionic/util/util.scss @@ -1,4 +1,16 @@ +.align-left { + text-align: left; +} + +.align-center { + text-align: center; +} + +.align-right { + text-align: right; +} + .no-transition { transition: none !important; }