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(item): fix avatar/thumbnail in .item-complex, and avatar misspelling

Browse Source
This commit is contained in:
Adam Bradley
2014-03-18 22:39:33 -05:00
parent f744d9ebcf
commit 947b8d6943
3 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
scss/_items.scss
View File

@@ -437,16 +437,18 @@ button.item-button-right:after,
// Item Avatar
// -------------------------------
.item-avatar {
padding-left: $item-avitar-width + ($item-padding * 2);
min-height: $item-avitar-width + ($item-padding * 2);
.item-avatar,
.item-avatar .item-content {
padding-left: $item-avatar-width + ($item-padding * 2);
min-height: $item-avatar-width + ($item-padding * 2);
img:first-child, .item-img {
> img:first-child,
.item-img {
position: absolute;
top: $item-padding;
left: $item-padding;
max-width: $item-avitar-width;
max-height: $item-avitar-height;
max-width: $item-avatar-width;
max-height: $item-avatar-height;
width: 100%;
border-radius: 4px;
}
@@ -461,7 +463,8 @@ button.item-button-right:after,
padding-left: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
> img:first-child, > .item-image {
> img:first-child,
.item-image {
position: absolute;
top: $item-thumbnail-margin;
left: $item-thumbnail-margin;
@@ -470,6 +473,7 @@ button.item-button-right:after,
width: 100%;
}
}
.item-avatar.item-complex,
.item-thumbnail-left.item-complex {
padding-left: 0;
}
@@ -479,7 +483,8 @@ button.item-button-right:after,
padding-right: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
> img:first-child, > .item-image {
> img:first-child,
.item-image {
position: absolute;
top: $item-thumbnail-margin;
right: $item-thumbnail-margin;
@@ -488,7 +493,7 @@ button.item-button-right:after,
width: 100%;
}
}
.item-thumbnail-left.item-complex {
.item-thumbnail-right.item-complex {
padding-right: 0;
}

4
scss/_variables.scss
View File

@@ -289,8 +289,8 @@ $item-button-line-height: 32px !default;
$item-icon-font-size: 32px !default;
$item-icon-fill-font-size: 28px !default;
$item-avitar-width: 40px !default;
$item-avitar-height: 40px !default;
$item-avatar-width: 40px !default;
$item-avatar-height: 40px !default;
$item-thumbnail-width: 80px !default;
$item-thumbnail-height: 80px !default;

30
test/html/cards.html
View File

@@ -16,7 +16,7 @@
</header>
<ion-content has-header="true" class="ionic-pseudo">
<div class="card">
<div class="item item-text-wrap">
This is a basic Card with some wrapping text.
@@ -24,7 +24,7 @@
This is a basic Card with some wrapping text.
</div>
</div>
<div class="card item-text-wrap">
<div class="item">
This is a basic Card with some wrapping text.
@@ -32,7 +32,7 @@
This is a basic Card with some wrapping text.
</div>
</div>
<div class="card">
<div class="item item-divider">
I'm a Header in a Card!
@@ -77,6 +77,14 @@
<p>Nine Inch Nails</p>
</div>
<div class="item item-avatar item-complex">
<a class="item-content">
<img class="item-img" src="http://tutupash.com/site/assets/nin_logo.jpeg">
<h2>Pretty Hate Machine, .item-complex</h2>
<p>Nine Inch Nails</p>
</a>
</div>
<div class="item item-image">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
</div>
@@ -102,12 +110,28 @@
<p>November 05, 1955</p>
</div>
<div class="item item-thumbnail-left item-complex">
<a class="item-content">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly, .item-complex</h2>
<p>November 05, 1955</p>
</a>
</div>
<div class="item item-thumbnail-right">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-thumbnail-right item-complex">
<a class="item-content">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly, .item-complex</h2>
<p>November 05, 1955</p>
</a>
</div>
<div class="item item-body">
<img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
<p>