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

fix(grid): add ion-grid element which wraps the rows/cols and adds padding

Browse Source 
update tests to use new ion-grid element

references #6238
This commit is contained in:
Brandy Carney
2016-04-26 13:33:12 -04:00
parent a48ee6eab0
commit a0c0228acb
3 changed files with 305 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
ionic/components/card/test/advanced/main.html
View File

@@ -19,20 +19,22 @@
</p>
</ion-card-content>
<ion-row>
<ion-col no-padding>
<button clear small>
<ion-icon name="star"></ion-icon>
Star
</button>
</ion-col>
<ion-col no-padding text-right>
<button clear small class="activated">
<ion-icon name="share"></ion-icon>
Activated
</button>
</ion-col>
</ion-row>
<ion-grid>
<ion-row>
<ion-col no-padding>
<button clear small>
<ion-icon name="star"></ion-icon>
Star
</button>
</ion-col>
<ion-col no-padding text-right>
<button clear small class="activated">
<ion-icon name="share"></ion-icon>
Activated
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
@@ -55,26 +57,28 @@
<p>Hello. I am a paragraph.</p>
</ion-card-content>
<ion-row>
<ion-col no-padding>
<button clear small>
<ion-icon name="star"></ion-icon>
Favorite
</button>
</ion-col>
<ion-col no-padding text-center>
<button clear small>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
</ion-col>
<ion-col no-padding text-right>
<button clear small danger class="activated">
<ion-icon name="share"></ion-icon>
Activated
</button>
</ion-col>
</ion-row>
<ion-grid>
<ion-row>
<ion-col no-padding>
<button clear small>
<ion-icon name="star"></ion-icon>
Favorite
</button>
</ion-col>
<ion-col no-padding text-center>
<button clear small>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
</ion-col>
<ion-col no-padding text-right>
<button clear small danger class="activated">
<ion-icon name="share"></ion-icon>
Activated
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
<ion-card>
@@ -87,27 +91,29 @@
This card was breaking the border radius.
</ion-card-content>
<ion-row>
<ion-col no-padding>
<button clear small dark>
<ion-icon name="star"></ion-icon>
Favorite
</button>
</ion-col>
<ion-grid>
<ion-row>
<ion-col no-padding>
<button clear small dark>
<ion-icon name="star"></ion-icon>
Favorite
</button>
</ion-col>
<ion-col no-padding text-center>
<button clear small dark>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
</ion-col>
<ion-col no-padding text-right>
<button clear small dark>
<ion-icon name="share-alt"></ion-icon>
Share
</button>
</ion-col>
</ion-row>
<ion-col no-padding text-center>
<button clear small dark>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
</ion-col>
<ion-col no-padding text-right>
<button clear small dark>
<ion-icon name="share-alt"></ion-icon>
Share
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>

20
ionic/components/grid/grid.scss
View File

@@ -45,22 +45,25 @@ $grid-responsive-lg-break: 1023px !default; // smaller than landscape tab
}
}
ion-grid {
display: flex;
flex-direction: column;
padding: ($grid-padding-width / 2);
width: 100%;
}
ion-row {
display: flex;
padding: ($grid-padding-width / 2);
width: 100%;
&[wrap] {
flex-wrap: wrap;
}
&[flush] {
padding: 0;
}
&[top] {
align-items: flex-start;
}
@@ -82,11 +85,6 @@ ion-row {
}
}
ion-row + ion-row {
margin-top: ($grid-padding-width / 2) * -1;
padding-top: 0;
}
ion-col {
display: block;

470
ionic/components/grid/test/basic/main.html
View File

@@ -1,251 +1,253 @@
<ion-toolbar><ion-title>Grid</ion-title></ion-toolbar>
<ion-content class="grid-demo">
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
<ion-grid>
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
<div>
ion-col[width-50]
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
<div>
ion-col[width-50]
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-25>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col width-25>
<div>
ion-col[width-25]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-25>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col width-25>
<div>
ion-col[width-25]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-25>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col width-25 offset-25>
<div>
ion-col[width-25][offset-25]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-25>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col width-25 offset-25>
<div>
ion-col[width-25][offset-25]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col top>
<div>
ion-col[top]
</div>
</ion-col>
<ion-col center>
<div>
ion-col[center]
</div>
</ion-col>
<ion-col bottom>
<div>
ion-col[bottom]
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col top>
<div>
ion-col[top]
</div>
</ion-col>
<ion-col center>
<div>
ion-col[center]
</div>
</ion-col>
<ion-col bottom>
<div>
ion-col[bottom]
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row top>
<ion-col>
<div>
[top] ion-col
</div>
</ion-col>
<ion-col>
<div>
[top] ion-col
</div>
</ion-col>
<ion-col bottom>
<div>
[top] ion-col[bottom]
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row top>
<ion-col>
<div>
[top] ion-col
</div>
</ion-col>
<ion-col>
<div>
[top] ion-col
</div>
</ion-col>
<ion-col bottom>
<div>
[top] ion-col[bottom]
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row center>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row center>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row bottom>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col top>
<div>
[bottom] ion-col[top]
</div>
</ion-col>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row bottom>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col top>
<div>
[bottom] ion-col[top]
</div>
</ion-col>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row responsive-sm>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
</ion-row>
<ion-row responsive-sm>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
</ion-row>
<ion-row responsive-md>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
</ion-row>
<ion-row responsive-md>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
</ion-row>
<ion-row responsive-lg>
<ion-col width-50 offset-25>
<div>
[responsive-lg] ion-col[width-50][offset-25]
</div>
</ion-col>
<ion-col width-25>
<div>
[responsive-lg] ion-col[width-25]
</div>
</ion-col>
</ion-row>
<ion-row responsive-lg>
<ion-col width-50 offset-25>
<div>
[responsive-lg] ion-col[width-50][offset-25]
</div>
</ion-col>
<ion-col width-25>
<div>
[responsive-lg] ion-col[width-25]
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>