javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

inset lists, card updates

Browse Source
This commit is contained in:
Adam Bradley
2015-08-12 15:44:27 -05:00
parent 8e053f18de
commit db0413b2dd
27 changed files with 275 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
ionic/components/list/list.scss
View File

@@ -2,18 +2,30 @@
// List
// --------------------------------------------------
$list-inset-margin: 10px !default;
.list {
display: block;
margin: 0;
padding: 0;
list-style-type: none;
ion-header,
ion-footer {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
ion-list-header,
ion-list-footer {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.list[inset] {
margin: $list-inset-margin;
border: 1px solid $list-border-color;
}
.hairlines .list[inset] {
border-width: 0.5px;
}

2
ionic/components/list/list.ts
View File

@@ -45,7 +45,7 @@ export class List extends Ion {
@Directive({
selector: 'ion-list-header',
selector: 'ion-header',
properties: [
'id'
],

10
ionic/components/list/modes/ios.scss
View File

@@ -8,7 +8,7 @@ $list-ios-header-font-weight: 500 !default;
$list-ios-header-letter-spacing: 0.1rem !default;
$list-ios-header-color: #333 !default;
$list-ios-footer-padding: 10px $item-ios-padding-right 0 $item-ios-padding-left !default;
$list-ios-footer-padding: 10px $item-ios-padding-right 10px $item-ios-padding-left !default;
$list-ios-footer-font-size: 1.2rem !default;
$list-ios-footer-font-weight: 500 !default;
$list-ios-footer-letter-spacing: 0.1rem !default;
@@ -17,7 +17,7 @@ $list-ios-footer-color: #333 !default;
.list[mode=ios] {
ion-list-header {
ion-header {
padding: $list-ios-header-padding;
font-size: $list-ios-header-font-size;
font-weight: $list-ios-header-font-weight;
@@ -26,7 +26,7 @@ $list-ios-footer-color: #333 !default;
color: $list-ios-header-color;
}
ion-list-footer {
ion-footer {
padding: $list-ios-footer-padding;
font-size: $list-ios-footer-font-size;
font-weight: $list-ios-footer-font-weight;
@@ -35,4 +35,8 @@ $list-ios-footer-color: #333 !default;
color: $list-ios-footer-color;
}
&[inset] ion-header {
padding-top: 10px;
}
}

4
ionic/components/list/modes/material.scss
View File

@@ -13,14 +13,14 @@ $list-md-footer-color: #8f8f94 !default;
.list[mode=md] {
ion-list-header {
ion-header {
padding: $list-md-header-padding;
font-size: $list-md-header-font-size;
text-transform: uppercase;
color: $list-md-header-color;
}
ion-list-footer {
ion-footer {
padding: $list-md-footer-padding;
font-size: $list-md-footer-font-size;
text-transform: uppercase;

20
ionic/components/list/test/headers-footers/main.html
View File

@@ -2,9 +2,9 @@
<ion-list>
<ion-list-header>
<ion-header>
List Header
</ion-list-header>
</ion-header>
<div class="item">
<icon name="ion-wifi"></icon>
@@ -30,9 +30,9 @@
<ion-list>
<ion-list-header>
<ion-header>
List Header
</ion-list-header>
</ion-header>
<div class="item">
<icon name="ion-wand"></icon>
@@ -44,17 +44,17 @@
</div>
</div>
<ion-list-footer>
<ion-footer>
List Footer
</ion-list-footer>
</ion-footer>
</ion-list>
<ion-list>
<ion-list-header>
<ion-header>
List Header with text that is too long to fit inside the list header
</ion-list-header>
</ion-header>
<div class="item">
<icon name="ion-pizza"></icon>
@@ -76,8 +76,8 @@
</div>
</div>
<ion-list-footer>
<ion-footer>
List Footer with text that is also too long why do you do this all the time plz stop its too long!
</ion-list-footer>
</ion-footer>
</ion-list>

1
ionic/components/list/test/inset/e2e.ts Normal file
View File

@@ -0,0 +1 @@

7
ionic/components/list/test/inset/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class IonicApp {}

67
ionic/components/list/test/inset/main.html Normal file
View File

@@ -0,0 +1,67 @@
<ion-toolbar><ion-title>Inset List</ion-title></ion-toolbar>
<ion-list inset>
<ion-header>
Inset List Header
</ion-header>
<div class="item item-text-wrap">
<div class="item-content">
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.
</div>
</div>
<ion-footer>
List Footer
</ion-footer>
</ion-list>
<ion-list inset>
<div class="item">
<icon name="ion-location"></icon>
<div class="item-content">
All Out Inset List
</div>
<button outline>View</button>
</div>
<div class="item item-text-wrap">
<div class="item-content">
This is a multiline content within a list that should
take up multiple lines and stuff.
</div>
</div>
<div class="item">
<div class="item-content">
<icon small name="ion-star"></icon>
<span>255</span>
</div>
<div class="item-content">
<icon small name="ion-reply"></icon>
<span>Reply</span>
</div>
<div class="item-content">
<icon small name="ion-forward"></icon>
Forward
</div>
</div>
<ion-footer>
list Footer
</ion-footer>
</ion-list>
<ion-list inset>
<div class="item">
<div class="item-content">
Inset List, no header or footer
</div>
</div>
</ion-list>