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 thumbnails

Browse Source
This commit is contained in:
Adam Bradley
2013-10-18 21:24:36 -05:00
parent 3ee2e4d6bf
commit bd8689feb8
6 changed files with 175 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1135,6 +1135,30 @@ a.list-item {
.list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; }
.list-thumbnail h2 {
overflow: hidden;
margin: 0 0 8px 0;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px; }
.list-thumbnail p {
overflow: hidden;
margin-bottom: 0;
text-overflow: ellipsis;
white-space: nowrap; }
.list-thumbnail .list-item-content {
padding-left: 95px;
min-height: 80px; }
.list-thumbnail .list-item-content img {
position: absolute;
top: 0;
left: 0;
max-width: 80px;
max-height: 80px;
width: 100%; }
.list-item-sliding {
-webkit-transition: -webkit-transform 0.1s ease-in-out; }

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

@ -1827,6 +1827,27 @@
font-size: 28px; }
.ionic .list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; }
.ionic .list-thumbnail h2 {
overflow: hidden;
margin: 0 0 8px 0;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px; }
.ionic .list-thumbnail p {
overflow: hidden;
margin-bottom: 0;
text-overflow: ellipsis;
white-space: nowrap; }
.ionic .list-thumbnail .list-item-content {
padding-left: 95px;
min-height: 80px; }
.ionic .list-thumbnail .list-item-content img {
position: absolute;
top: 0;
left: 0;
max-width: 80px;
max-height: 80px;
width: 100%; }
.ionic .list-item-sliding {
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
.ionic .list-item-reordering {

24
dist/css/ionic.css vendored
View File

@ -2244,6 +2244,30 @@ a.list-item {
.list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; }
.list-thumbnail h2 {
overflow: hidden;
margin: 0 0 8px 0;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px; }
.list-thumbnail p {
overflow: hidden;
margin-bottom: 0;
text-overflow: ellipsis;
white-space: nowrap; }
.list-thumbnail .list-item-content {
padding-left: 95px;
min-height: 80px; }
.list-thumbnail .list-item-content img {
position: absolute;
top: 0;
left: 0;
max-width: 80px;
max-height: 80px;
width: 100%; }
.list-item-sliding {
-webkit-transition: -webkit-transform 0.1s ease-in-out; }

32
scss/ionic/_listview.scss
View File

@ -136,7 +136,7 @@ a.list-item {
position: absolute;
top: ($list-item-padding / 2) + 3;
left: $list-item-padding / 2;
font-size: $icon-font-size;
font-size: $list-icon-font-size;
}
}
@ -147,7 +147,7 @@ a.list-item {
position: absolute;
top: ($list-item-padding / 2) + 3;
right: $list-item-padding / 2;
font-size: $icon-font-size;
font-size: $list-icon-font-size;
}
}
@ -155,6 +155,34 @@ a.list-item {
left: auto;
}
.list-thumbnail h2 {
overflow: hidden;
margin: 0 0 8px 0;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
}
.list-thumbnail p {
overflow: hidden;
margin-bottom: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.list-thumbnail .list-item-content {
padding-left: $list-thumbnail-width + $list-item-padding;
min-height: $list-thumbnail-width;
img {
position: absolute;
top: 0;
left: 0;
max-width: $list-thumbnail-width;
max-height: $list-thumbnail-width;
width: 100%;
}
}
.list-item-sliding {
-webkit-transition: -webkit-transform 0.1s ease-in-out;

47
scss/ionic/_variables.scss
View File

@ -337,41 +337,44 @@ $tabs-dark-border-color: $button-dark-border;
// Lists
// -------------------------------
$list-divider-bg: #f5f5f5;
$list-divider-color: #222;
$list-item-border-width: 1px !default;
$list-item-border-color: #ddd;
$list-item-padding: 15px !default;
$list-divider-bg: #f5f5f5;
$list-divider-color: #222;
$list-item-border-width: 1px !default;
$list-item-border-color: #ddd;
$list-item-padding: 15px !default;
$list-default-background: $brand-default;
$list-default-border: #ddd;
$list-default-background: $brand-default;
$list-default-border: #ddd;
$list-secondary-background: $brand-secondary;
$list-secondary-border: #ddd;
$list-secondary-background: $brand-secondary;
$list-secondary-border: #ddd;
$list-success-background: $brand-success;
$list-success-border: $brand-success;
$list-success-background: $brand-success;
$list-success-border: $brand-success;
$list-primary-background: $brand-primary;
$list-primary-border: $brand-primary;
$list-primary-background: $brand-primary;
$list-primary-border: $brand-primary;
$list-info-background: $brand-info;
$list-info-border: $brand-info;
$list-info-background: $brand-info;
$list-info-border: $brand-info;
$list-warning-background: $brand-warning;
$list-warning-border: $brand-warning;
$list-warning-background: $brand-warning;
$list-warning-border: $brand-warning;
$list-danger-background: $brand-danger;
$list-danger-border: $brand-danger;
$list-danger-background: $brand-danger;
$list-danger-border: $brand-danger;
$list-dark-background: $brand-dark;
$list-dark-border: $brand-dark;
$list-dark-background: $brand-dark;
$list-dark-border: $brand-dark;
$list-icon-font-size: 28px !default;
$list-thumbnail-width: 80px !default;
// Icons
// -------------------------------
$icon-font-size: 28px !default;
$icon-fill-border-radius: 6px !default;

51
test/lists.html
View File

@ -166,6 +166,57 @@
<button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
</div>
<hr>
<div class="list">
<a href="#" class="list-item list-thumbnail list-icon-right">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
<i class="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-thumbnail list-icon-right">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
<h2>Siamese Dream</h2>
<p>Smashing Pumpkins</p>
<i class="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-thumbnail list-icon-right">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2>
<p>Nirvana</p>
<i class="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-thumbnail list-icon-right">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2>
<p>Bestie Boys</p>
<i class="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-thumbnail list-icon-right">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>Dookie</h2>
<p>Green Day</p>
<i class="icon-chevron-right"></i>
</div>
</a>
</div>
<div class="padding">
<a class="button button-secondary" href="index.html">Homepage</a>
</div>