From 13c614d0eadc4064d7d74e6d1b02f8d8bd4f6d21 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 19 Aug 2015 09:37:11 -0500 Subject: [PATCH] md list updates --- ionic/components/card/modes/material.scss | 45 +++++++++- ionic/components/card/test/advanced/e2e.ts | 1 + ionic/components/card/test/advanced/index.ts | 10 +++ ionic/components/card/test/advanced/main.html | 62 +++++++++++++ ionic/components/item/item.scss | 2 +- ionic/components/item/modes/ios.scss | 4 + ionic/components/item/modes/material.scss | 42 +++++++-- ionic/components/item/test/images/e2e.ts | 1 + ionic/components/item/test/images/index.ts | 7 ++ ionic/components/item/test/images/main.html | 87 +++++++++++++++++++ ionic/components/list/modes/material.scss | 4 +- ionic/components/view/view-controller.ts | 4 +- 12 files changed, 256 insertions(+), 13 deletions(-) create mode 100644 ionic/components/card/test/advanced/e2e.ts create mode 100644 ionic/components/card/test/advanced/index.ts create mode 100644 ionic/components/card/test/advanced/main.html create mode 100644 ionic/components/item/test/images/e2e.ts create mode 100644 ionic/components/item/test/images/index.ts create mode 100644 ionic/components/item/test/images/main.html diff --git a/ionic/components/card/modes/material.scss b/ionic/components/card/modes/material.scss index 4f63f2d1d7..dcf6e393bf 100644 --- a/ionic/components/card/modes/material.scss +++ b/ionic/components/card/modes/material.scss @@ -7,8 +7,10 @@ $card-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2p $card-md-border-radius: 2px !default; $card-md-font-size: 1.4rem !default; +$card-md-header-font-size: 2.4rem !default; $card-md-header-background-color: $card-md-background-color !default; $card-md-header-padding: 16px; + $card-md-footer-background-color: $card-md-background-color !default; $card-md-footer-padding: 16px; @@ -26,15 +28,27 @@ $card-md-footer-padding: 16px; .item:last-child { margin-bottom: 0; + padding-bottom: 8px; } - .item:first-child:before, - .item:last-child:after { + .item::before, + .item::after { border: none; } + .item-content button:first-child, + .item-content [button]:first-child { + margin-left: 0; + } + + .item-content { + margin-top: 8px; + margin-bottom: 8px; + } + ion-header { padding: $card-md-header-padding; + font-size: $card-md-header-font-size; background-color: $card-md-footer-background-color; } @@ -43,4 +57,31 @@ $card-md-footer-padding: 16px; background-color: $card-md-footer-background-color; } + .item > img { + padding-bottom: 8px; + } + + h1 { + margin: 0 0 2px; + font-size: 2.4rem; + } + + h2 { + margin: 2px 0 2px; + font-size: 1.6rem; + } + + h3, + h4, + h5, + h6 { + margin: 2px 0 2px; + font-size: 1.4rem; + } + + p { + font-size: 1.4rem; + margin: 0 0 2px; + } + } diff --git a/ionic/components/card/test/advanced/e2e.ts b/ionic/components/card/test/advanced/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/ionic/components/card/test/advanced/e2e.ts @@ -0,0 +1 @@ + diff --git a/ionic/components/card/test/advanced/index.ts b/ionic/components/card/test/advanced/index.ts new file mode 100644 index 0000000000..f02a733534 --- /dev/null +++ b/ionic/components/card/test/advanced/index.ts @@ -0,0 +1,10 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class E2EApp {} + + +document.body.style.background='#eee'; diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html new file mode 100644 index 0000000000..8c7a983e53 --- /dev/null +++ b/ionic/components/card/test/advanced/main.html @@ -0,0 +1,62 @@ + +Advanced Cards + + + + +
+ +
+ + + Title goes here + + +
+
+ Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. +
+
+ + + + + + + + + + + +
+
+ +
+
+

Card With An Inset Picture

+

Isn't it beautiful

+
+
+ +
+ +
+ +
+
+ Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. +
+
+ + + + + diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index b727a4808b..7574366182 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -27,6 +27,7 @@ button.item.item { color: inherit; text-decoration: none; width: 100%; + min-height: 4.4rem; line-height: normal; justify-content: inherit; box-shadow: none; @@ -76,7 +77,6 @@ button.item.item { button + .item-content, [button] + .item-content, icon + icon, - icon + .item-content, .item-content + icon, .item-media + .item-content, .item-content + .item-media, diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index 3fa3db0271..606c86320c 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -69,6 +69,10 @@ $item-ios-forward-icon-color: $item-ios-border-color !default; color: $item-ios-note-color; } + .item icon + .item-content { + margin-left: 0; + } + .item > icon { margin-left: $item-ios-padding-left; margin-right: $item-ios-padding-right; diff --git a/ionic/components/item/modes/material.scss b/ionic/components/item/modes/material.scss index ec3f4c7cd1..6167c85c84 100644 --- a/ionic/components/item/modes/material.scss +++ b/ionic/components/item/modes/material.scss @@ -5,13 +5,13 @@ $item-md-border-color: lighten($list-border-color, 10%) !default; $item-md-font-size: 1.6rem !default; -$item-md-padding-top: 16px !default; +$item-md-padding-top: 13px !default; $item-md-padding-right: 16px !default; -$item-md-padding-bottom: 16px !default; +$item-md-padding-bottom: 13px !default; $item-md-padding-left: 16px !default; -$item-md-padding-media-top: 12px !default; -$item-md-padding-media-bottom: 12px !default; +$item-md-padding-media-top: 8px !default; +$item-md-padding-media-bottom: 8px !default; $item-md-body-text-font-size: 1.4rem !default; $item-md-body-text-line-height: 1.5 !default; @@ -27,6 +27,7 @@ $item-md-forward-icon-color: $item-md-border-color !default; .item { font-size: $item-md-font-size; margin-top: -1px; + text-transform: none; &:before { position: absolute; @@ -73,7 +74,7 @@ $item-md-forward-icon-color: $item-md-border-color !default; } .item-input > icon { - margin-top: $item-md-padding-media-top - 1; + margin-top: $item-md-padding-media-top; } icon[forward] { @@ -81,7 +82,7 @@ $item-md-forward-icon-color: $item-md-border-color !default; color: $item-md-forward-icon-color; } - button { + .item > button { margin: 0 $item-md-padding-right 0 $item-md-padding-left; padding: 2px 6px; min-height: 26px; @@ -106,6 +107,35 @@ $item-md-forward-icon-color: $item-md-border-color !default; max-height: $item-md-thumbnail-size; } + h1 { + margin: 0 0 2px; + font-size: 2.4rem; + font-weight: normal; + } + + h2 { + margin: 2px 0 2px; + font-size: 1.6rem; + font-weight: normal; + } + + h3, + h4, + h5, + h6 { + line-height: normal; + margin: 2px 0 2px; + font-size: 1.4rem; + font-weight: normal; + } + + p { + line-height: normal; + color: #666; + font-size: 1.4rem; + margin: 0 0 2px; + } + button.item.activated { box-shadow: none; } diff --git a/ionic/components/item/test/images/e2e.ts b/ionic/components/item/test/images/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/ionic/components/item/test/images/e2e.ts @@ -0,0 +1 @@ + diff --git a/ionic/components/item/test/images/index.ts b/ionic/components/item/test/images/index.ts new file mode 100644 index 0000000000..43aed36502 --- /dev/null +++ b/ionic/components/item/test/images/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class E2EApp {} diff --git a/ionic/components/item/test/images/main.html b/ionic/components/item/test/images/main.html new file mode 100644 index 0000000000..45a7efc80e --- /dev/null +++ b/ionic/components/item/test/images/main.html @@ -0,0 +1,87 @@ +Item Images + + + +
+
+ Plain Ol' div w/ some text, no images +
+
+ +
+ +
+ One Line w/ Icon, div only text +
+
+ +
+ +
+

Two Lines w/ Icon, H2 Header

+

Paragraph text.

+
+
+ +
+
+ +
+
+ One Line w/ Avatar, div only text +
+
+ +
+
+ +
+
+

Two Lines w/ Avatar, H2 Header

+

Paragraph text.

+
+
+ +
+
+ +
+
+

Three Lines w/ Avatar, H2 Header

+

Paragraph text.

+

Paragraph text.

+
+
+ +
+
+ +
+
+

Two Lines w/ Thumbnail, H2 Header

+

Paragraph text.

+
+
+ +
+
+ +
+
+

Three Lines w/ Thumbnail, H2 Header

+

Paragraph text.

+

Paragraph text.

+
+
+ + + + diff --git a/ionic/components/list/modes/material.scss b/ionic/components/list/modes/material.scss index bfa0ba7165..71b2929bd2 100644 --- a/ionic/components/list/modes/material.scss +++ b/ionic/components/list/modes/material.scss @@ -4,11 +4,11 @@ $list-md-header-padding: 16px $item-md-padding-right 16px $item-md-padding-left !default; $list-md-header-font-size: 1.6rem !default; -$list-md-header-color: #6d6d72 !default; +$list-md-header-color: #222 !default; $list-md-footer-padding: 16px $item-md-padding-right 16px $item-md-padding-left !default; $list-md-footer-font-size: 1.2rem !default; -$list-md-footer-color: #8f8f94 !default; +$list-md-footer-color: #222 !default; .list[mode=md] { diff --git a/ionic/components/view/view-controller.ts b/ionic/components/view/view-controller.ts index bbc824adfb..13544adf56 100644 --- a/ionic/components/view/view-controller.ts +++ b/ionic/components/view/view-controller.ts @@ -265,9 +265,9 @@ export class ViewController extends Ion { }); - } + }); - }); + } swipeBackStart() { if (this.isTransitioning() || this.items.length < 2) {