javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

card

Browse Source
This commit is contained in:
Adam Bradley
2015-04-01 20:18:33 -05:00
parent 48f7d6bd26
commit fee7520291
15 changed files with 150 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scripts/snapshot/ionic.snapshot.js
View File

@ -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;

2
src/components/app/ionic.scss
View File

@ -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",

12
src/components/card/card.scss
View File

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

0
src/components/card/extensions/android.scss Normal file
View File

40
src/components/card/extensions/ios.scss Normal file
View File

@ -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
}
}

1
src/components/card/test/basic/e2e.js Normal file
View File

@ -0,0 +1 @@

56
src/components/card/test/basic/main.html Normal file
View File

@ -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>

19
src/components/card/test/basic/main.js Normal file
View File

@ -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)

3
src/components/item/extensions/ios.scss
View File

@ -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;

3
src/components/item/item.scss
View File

@ -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;

13
src/components/list/list.scss
View File

@ -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 {

2
src/components/tabs/tabs.js
View File

@ -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="#">

2
src/components/toolbar/extensions/android.scss
View File

@ -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;
}

8
src/components/toolbar/extensions/ios.scss
View File

@ -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);
}

6
src/components/toolbar/toolbar.js
View File

@ -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>`,