javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

list item image

Browse Source
This commit is contained in:
Adam Bradley
2013-10-23 22:58:27 -05:00
parent ce8d34fa5e
commit ca90a13524
7 changed files with 91 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
dist/css/ionic-ios7.css vendored
View File

@ -1,4 +1,3 @@
@charset "UTF-8";
/** /**
* Adapted from normalize.css and some reset.css. We don't care even one * Adapted from normalize.css and some reset.css. We don't care even one
* bit about old IE, so we don't need any hacks for that in here. * bit about old IE, so we don't need any hacks for that in here.
@ -182,7 +181,7 @@ sub {
fieldset { fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
/** /**
* 1. Correct `color` not being inherited in IE 8/9. * 1. Correct `color` not being inherited in IE 8/9.
@ -1203,10 +1202,10 @@ a.list-icon-right .list-item-content:after,
button.list-icon-right .list-item-content:after { button.list-icon-right .list-item-content:after {
display: none; } display: none; }
.list-thumbnail .list-item-content { .list-item-thumbnail .list-item-content {
padding-left: 70px; padding-left: 70px;
min-height: 70px; } min-height: 70px; }
.list-thumbnail .list-item-content img:first-child, .list-thumbnail .list-item-content .list-img { .list-item-thumbnail .list-item-content img:first-child, .list-item-thumbnail .list-item-content .list-img {
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 15px; left: 15px;
@ -1215,10 +1214,10 @@ button.list-icon-right .list-item-content:after {
width: 100%; width: 100%;
border-radius: 4px; } border-radius: 4px; }
.list-thumbnail-lrg .list-item-content { .list-item-thumbnail-lrg .list-item-content {
padding-left: 95px; padding-left: 95px;
min-height: 80px; } min-height: 80px; }
.list-thumbnail-lrg .list-item-content img:first-child, .list-thumbnail-lrg .list-item-content .list-img { .list-item-thumbnail-lrg .list-item-content img:first-child, .list-item-thumbnail-lrg .list-item-content .list-img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -1226,6 +1225,12 @@ button.list-icon-right .list-item-content:after {
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
.list-item-image .list-item-content {
text-align: center;
padding: 0; }
.list-item-image .list-item-content img:first-child, .list-item-image .list-item-content .list-img {
width: 100%; }
.list-header { .list-header {
margin-top: 20px; margin-top: 20px;
padding: 5px 15px; padding: 5px 15px;
@ -1576,7 +1581,7 @@ input[type="checkbox"][readonly] {
right: 20px; right: 20px;
transition: 0.2s ease; transition: 0.2s ease;
transition-property: left, right; transition-property: left, right;
transition-delay: 0s, 0.05s; } transition-delay: 0s, .05s; }
.toggle :checked + .track { .toggle :checked + .track {
/* When the toggle is "on" */ /* When the toggle is "on" */
@ -1591,7 +1596,7 @@ input[type="checkbox"][readonly] {
right: 0; right: 0;
left: 20px; left: 20px;
-webkit-transform: none; -webkit-transform: none;
transition-delay: 0.05s, 0s; } transition-delay: .05s, 0s; }
.radio-buttton-list .list-item-content { .radio-buttton-list .list-item-content {
/* give some room to the right for the checkmark icon */ /* give some room to the right for the checkmark icon */
@ -1860,7 +1865,7 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active { .button.button-icon:active, .button.button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full { .button.block, .button.button-full {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; } margin-bottom: 10px; }
@ -2236,9 +2241,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.icon-loading:before { .icon-loading:before {
content: "\e144"; } content: "\e144"; }
@ -2251,9 +2256,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.icon-refreshing:before { .icon-refreshing:before {
content: "\e144"; } content: "\e144"; }

34
dist/css/ionic-scoped.css vendored
View File

@ -1,4 +1,3 @@
@charset "UTF-8";
.ionic { .ionic {
@font-face { @font-face {
font-family: 'ionicons'; font-family: 'ionicons';
@ -1024,7 +1023,7 @@
.ionic fieldset { .ionic fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
.ionic legend { .ionic legend {
padding: 0; padding: 0;
/* 2 */ /* 2 */
@ -1912,10 +1911,10 @@
.ionic a.list-icon-right .list-item-content:after, .ionic a.list-icon-right .list-item-content:after,
.ionic button.list-icon-right .list-item-content:after { .ionic button.list-icon-right .list-item-content:after {
display: none; } display: none; }
.ionic .list-thumbnail .list-item-content { .ionic .list-item-thumbnail .list-item-content {
padding-left: 70px; padding-left: 70px;
min-height: 70px; } min-height: 70px; }
.ionic .list-thumbnail .list-item-content img:first-child, .ionic .list-thumbnail .list-item-content .list-img { .ionic .list-item-thumbnail .list-item-content img:first-child, .ionic .list-item-thumbnail .list-item-content .list-img {
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 15px; left: 15px;
@ -1923,16 +1922,21 @@
max-height: 40px; max-height: 40px;
width: 100%; width: 100%;
border-radius: 4px; } border-radius: 4px; }
.ionic .list-thumbnail-lrg .list-item-content { .ionic .list-item-thumbnail-lrg .list-item-content {
padding-left: 95px; padding-left: 95px;
min-height: 80px; } min-height: 80px; }
.ionic .list-thumbnail-lrg .list-item-content img:first-child, .ionic .list-thumbnail-lrg .list-item-content .list-img { .ionic .list-item-thumbnail-lrg .list-item-content img:first-child, .ionic .list-item-thumbnail-lrg .list-item-content .list-img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
.ionic .list-item-image .list-item-content {
text-align: center;
padding: 0; }
.ionic .list-item-image .list-item-content img:first-child, .ionic .list-item-image .list-item-content .list-img {
width: 100%; }
.ionic .list-header { .ionic .list-header {
margin-top: 20px; margin-top: 20px;
padding: 5px 15px; padding: 5px 15px;
@ -2221,7 +2225,7 @@
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color .1s ease-in-out; }
.ionic .checkbox input:after { .ionic .checkbox input:after {
position: absolute; position: absolute;
top: 34%; top: 34%;
@ -2234,7 +2238,7 @@
border-right: 0; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
.ionic .checkbox input:checked:before { .ionic .checkbox input:checked:before {
@ -2571,7 +2575,7 @@
.ionic .button.button-icon:active, .ionic .button.button-icon.active { .ionic .button.button-icon:active, .ionic .button.button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.ionic .button.block, .ionic .button.button-full { .ionic .button.block, .ionic .button.button-full {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; } margin-bottom: 10px; }
@ -2853,9 +2857,9 @@
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ionic .icon-loading:before { .ionic .icon-loading:before {
content: "\e144"; } content: "\e144"; }
.ionic .icon-refreshing { .ionic .icon-refreshing {
@ -2867,9 +2871,9 @@
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ionic .icon-refreshing:before { .ionic .icon-refreshing:before {
content: "\e144"; } content: "\e144"; }
.ionic .hidden, .ionic .hidden,

35
dist/css/ionic.css vendored
View File

@ -1,4 +1,3 @@
@charset "UTF-8";
@font-face { @font-face {
font-family: 'ionicons'; font-family: 'ionicons';
src: url("fonts/ionicons.eot"); src: url("fonts/ionicons.eot");
@ -1261,7 +1260,7 @@ sub {
fieldset { fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
/** /**
* 1. Correct `color` not being inherited in IE 8/9. * 1. Correct `color` not being inherited in IE 8/9.
@ -2346,10 +2345,10 @@ a.list-icon-right .list-item-content:after,
button.list-icon-right .list-item-content:after { button.list-icon-right .list-item-content:after {
display: none; } display: none; }
.list-thumbnail .list-item-content { .list-item-thumbnail .list-item-content {
padding-left: 70px; padding-left: 70px;
min-height: 70px; } min-height: 70px; }
.list-thumbnail .list-item-content img:first-child, .list-thumbnail .list-item-content .list-img { .list-item-thumbnail .list-item-content img:first-child, .list-item-thumbnail .list-item-content .list-img {
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 15px; left: 15px;
@ -2358,10 +2357,10 @@ button.list-icon-right .list-item-content:after {
width: 100%; width: 100%;
border-radius: 4px; } border-radius: 4px; }
.list-thumbnail-lrg .list-item-content { .list-item-thumbnail-lrg .list-item-content {
padding-left: 95px; padding-left: 95px;
min-height: 80px; } min-height: 80px; }
.list-thumbnail-lrg .list-item-content img:first-child, .list-thumbnail-lrg .list-item-content .list-img { .list-item-thumbnail-lrg .list-item-content img:first-child, .list-item-thumbnail-lrg .list-item-content .list-img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -2369,6 +2368,12 @@ button.list-icon-right .list-item-content:after {
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
.list-item-image .list-item-content {
text-align: center;
padding: 0; }
.list-item-image .list-item-content img:first-child, .list-item-image .list-item-content .list-img {
width: 100%; }
.list-header { .list-header {
margin-top: 20px; margin-top: 20px;
padding: 5px 15px; padding: 5px 15px;
@ -2702,7 +2707,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color .1s ease-in-out; }
/* the checkmark within the box */ /* the checkmark within the box */
.checkbox input:after { .checkbox input:after {
@ -2717,7 +2722,7 @@ input[type="checkbox"][readonly] {
border-right: 0; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
@ -3081,7 +3086,7 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active { .button.button-icon:active, .button.button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full { .button.block, .button.button-full {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; } margin-bottom: 10px; }
@ -3508,9 +3513,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.icon-loading:before { .icon-loading:before {
content: "\e144"; } content: "\e144"; }
@ -3523,9 +3528,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.icon-refreshing:before { .icon-refreshing:before {
content: "\e144"; } content: "\e144"; }

17
scss/ionic/_list.scss
View File

@ -215,7 +215,7 @@ button.list-icon-right {
// List Thumbnails // List Thumbnails
// ------------------------------- // -------------------------------
.list-thumbnail .list-item-content { .list-item-thumbnail .list-item-content {
padding-left: $list-thumbnail-width + ($list-item-padding * 2); padding-left: $list-thumbnail-width + ($list-item-padding * 2);
min-height: $list-thumbnail-width + ($list-item-padding * 2); min-height: $list-thumbnail-width + ($list-item-padding * 2);
@ -230,7 +230,7 @@ button.list-icon-right {
} }
} }
.list-thumbnail-lrg .list-item-content { .list-item-thumbnail-lrg .list-item-content {
padding-left: $list-thumbnail-lrg-width + $list-item-padding; padding-left: $list-thumbnail-lrg-width + $list-item-padding;
min-height: $list-thumbnail-lrg-height; min-height: $list-thumbnail-lrg-height;
@ -245,6 +245,19 @@ button.list-icon-right {
} }
// List Image
// -------------------------------
.list-item-image .list-item-content {
text-align: center;
padding: 0;
img:first-child, .list-img {
width: 100%;
}
}
// List Header // List Header
// ------------------------------- // -------------------------------

10
test/cards.html
View File

@ -90,21 +90,19 @@
<div class="list card"> <div class="list card">
<a href="#" class="list-item list-thumbnail"> <div href="#" class="list-item list-item-thumbnail">
<div class="list-item-content"> <div class="list-item-content">
<img src="http://tutupash.com/site/assets/nin_logo.jpeg"> <img src="http://tutupash.com/site/assets/nin_logo.jpeg">
<h2>Pretty Hate Machine</h2> <h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p> <p>Nine Inch Nails</p>
</div> </div>
</a> </div>
<a href="#" class="list-item list-thumbnail"> <div href="#" class="list-item list-item-image">
<div class="list-item-content"> <div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg"> <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div> </div>
</a> </div>
<a href="#" class="list-item list-icon-left"> <a href="#" class="list-item list-icon-left">
<div class="list-item-content"> <div class="list-item-content">

6
test/index.html
View File

@ -46,9 +46,9 @@
<script> <script>
// cache buster only for testing to make sure the page is always refreshed // cache buster only for testing to make sure the page is always refreshed
for(var x=0; x<document.links.length; x++) { // for(var x=0; x<document.links.length; x++) {
document.links[x].href += "?r=" + Math.random(); // document.links[x].href += "?r=" + Math.random();
} // }
</script> </script>
</body> </body>

20
test/lists.html
View File

@ -345,10 +345,10 @@
<button class="button button-secondary" id="btn-test-left">Test Slide Left</button> <button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
</div> </div>
<h3>Thumbnails .list-thumbnail</h3> <h3>Thumbnails .list-item-thumbnail</h3>
<div class="list"> <div class="list">
<a href="#" class="list-item list-thumbnail"> <a href="#" class="list-item list-item-thumbnail">
<div class="list-item-content"> <div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg"> <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2> <h2>Pretty Hate Machine</h2>
@ -356,7 +356,7 @@
</div> </div>
</a> </a>
<a href="#" class="list-item list-thumbnail"> <a href="#" class="list-item list-item-thumbnail">
<div class="list-item-content"> <div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg"> <img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2> <h2>Nevermind</h2>
@ -364,7 +364,7 @@
</div> </div>
</a> </a>
<a href="#" class="list-item list-thumbnail"> <a href="#" class="list-item list-item-thumbnail">
<div class="list-item-content"> <div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg"> <img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2> <h2>License To Ill</h2>
@ -372,7 +372,7 @@
</div> </div>
</a> </a>
<a href="#" class="list-item list-thumbnail"> <a href="#" class="list-item list-item-thumbnail">
<div class="list-item-content"> <div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg"> <img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>Dookie</h2> <h2>Dookie</h2>
@ -382,10 +382,10 @@
</div> </div>
<h3>Large Thumbnails .list-thumbnail-lrg</h3> <h3>Large Thumbnails .list-item-thumbnail-lrg</h3>
<div class="list"> <div class="list">
<a href="#" class="list-item list-thumbnail-lrg"> <a href="#" class="list-item list-item-thumbnail-lrg">
<div class="list-item-content"> <div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg"> <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2> <h2>Pretty Hate Machine</h2>
@ -393,7 +393,7 @@
</div> </div>
</a> </a>
<a href="#" class="list-item list-thumbnail-lrg"> <a href="#" class="list-item list-item-thumbnail-lrg">
<div class="list-item-content"> <div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg"> <img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2> <h2>Nevermind</h2>
@ -401,7 +401,7 @@
</div> </div>
</a> </a>
<a href="#" class="list-item list-thumbnail-lrg"> <a href="#" class="list-item list-item-thumbnail-lrg">
<div class="list-item-content"> <div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg"> <img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2> <h2>License To Ill</h2>
@ -409,7 +409,7 @@
</div> </div>
</a> </a>
<a href="#" class="list-item list-thumbnail-lrg"> <a href="#" class="list-item list-item-thumbnail-lrg">
<div class="list-item-content"> <div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg"> <img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>Dookie</h2> <h2>Dookie</h2>