Conflicts:
	dist/css/ionic-scoped.css
This commit is contained in:
Max Lynch
2013-10-21 21:01:14 -05:00
15 changed files with 166 additions and 152 deletions

View File

@ -634,7 +634,8 @@ address {
.bar .title + .buttons { .bar .title + .buttons {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; } right: 5px;
bottom: 5px; }
.bar-default .button { .bar-default .button {
color: #333333; color: #333333;
@ -772,10 +773,13 @@ address {
box-shadow: none; box-shadow: none;
font-size: 17px; } font-size: 17px; }
.bar [class^="icon-"],
.bar [class*=" icon-"] {
font-size: 24px; }
.bar .button-icon { .bar .button-icon {
border: 1px solid transparent; border: 1px solid transparent;
background-color: transparent; background-color: transparent; }
font-size: 24px; }
.bar-header { .bar-header {
top: 0; } top: 0; }
@ -1123,7 +1127,8 @@ a.list-item {
border: 1px solid #dddddd; border: 1px solid #dddddd;
z-index: 2; z-index: 2;
margin-top: -1px; margin-top: -1px;
padding: 15px; padding: 15px 45px 15px 15px;
font-size: 16px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.list-item-content i { .list-item-content i {
@ -1139,14 +1144,36 @@ a.list-item {
.list-icon-left .list-item-content i { .list-icon-left .list-item-content i {
left: 7.5px; } left: 7.5px; }
.list-icon-right .list-item-content { .list-icon-right .list-item-content i {
padding-right: 45px; }
.list-icon-right .list-item-content i {
right: 7.5px; } right: 7.5px; }
.list-icon-left.list-icon-right .list-item-content i:last-child { .list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; } left: auto; }
a .list-item-content:after,
button .list-item-content:after {
position: absolute;
top: 0;
right: 11px;
display: flex;
height: 100%;
color: #ccc;
content: "\e0fc";
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 16px;
font-family: 'ionicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
align-items: center; }
a.list-icon-right .list-item-content:after,
button.list-icon-right .list-item-content:after {
display: none; }
.list-thumbnail h2 { .list-thumbnail h2 {
overflow: hidden; overflow: hidden;
margin: 0 0 8px 0; margin: 0 0 8px 0;
@ -1163,7 +1190,7 @@ a.list-item {
.list-thumbnail .list-item-content { .list-thumbnail .list-item-content {
padding-left: 95px; padding-left: 95px;
min-height: 80px; } min-height: 80px; }
.list-thumbnail .list-item-content img { .list-thumbnail .list-item-content .thumbnail {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -1274,16 +1301,10 @@ a.list-item {
* List refreser elements * List refreser elements
*/ */
.list-refresher { .list-refresher {
background-color: red;
height: 0; height: 0;
overflow: hidden; } overflow: hidden; }
.list-refresher-content {
padding: 20px;
text-align: center; }
.list-refreshing {
-webkit-transition: height 0.2s ease-in-out; }
form { form {
margin: 0 0 1.42857; } margin: 0 0 1.42857; }

51
dist/css/ionic.css vendored
View File

@ -1743,7 +1743,8 @@ address {
.bar .title + .buttons { .bar .title + .buttons {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; } right: 5px;
bottom: 5px; }
.bar-default .button { .bar-default .button {
color: #333333; color: #333333;
@ -1881,10 +1882,13 @@ address {
box-shadow: none; box-shadow: none;
font-size: 17px; } font-size: 17px; }
.bar [class^="icon-"],
.bar [class*=" icon-"] {
font-size: 24px; }
.bar .button-icon { .bar .button-icon {
border: 1px solid transparent; border: 1px solid transparent;
background-color: transparent; background-color: transparent; }
font-size: 24px; }
.bar-header { .bar-header {
top: 0; } top: 0; }
@ -2266,7 +2270,8 @@ a.list-item {
border: 1px solid #dddddd; border: 1px solid #dddddd;
z-index: 2; z-index: 2;
margin-top: -1px; margin-top: -1px;
padding: 15px; padding: 15px 45px 15px 15px;
font-size: 16px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.list-item-content i { .list-item-content i {
@ -2282,14 +2287,36 @@ a.list-item {
.list-icon-left .list-item-content i { .list-icon-left .list-item-content i {
left: 7.5px; } left: 7.5px; }
.list-icon-right .list-item-content { .list-icon-right .list-item-content i {
padding-right: 45px; }
.list-icon-right .list-item-content i {
right: 7.5px; } right: 7.5px; }
.list-icon-left.list-icon-right .list-item-content i:last-child { .list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; } left: auto; }
a .list-item-content:after,
button .list-item-content:after {
position: absolute;
top: 0;
right: 11px;
display: flex;
height: 100%;
color: #ccc;
content: "\e0fc";
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 16px;
font-family: 'ionicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
align-items: center; }
a.list-icon-right .list-item-content:after,
button.list-icon-right .list-item-content:after {
display: none; }
.list-thumbnail h2 { .list-thumbnail h2 {
overflow: hidden; overflow: hidden;
margin: 0 0 8px 0; margin: 0 0 8px 0;
@ -2306,7 +2333,7 @@ a.list-item {
.list-thumbnail .list-item-content { .list-thumbnail .list-item-content {
padding-left: 95px; padding-left: 95px;
min-height: 80px; } min-height: 80px; }
.list-thumbnail .list-item-content img { .list-thumbnail .list-item-content .thumbnail {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -2417,16 +2444,10 @@ a.list-item {
* List refreser elements * List refreser elements
*/ */
.list-refresher { .list-refresher {
background-color: red;
height: 0; height: 0;
overflow: hidden; } overflow: hidden; }
.list-refresher-content {
padding: 20px;
text-align: center; }
.list-refreshing {
-webkit-transition: height 0.2s ease-in-out; }
form { form {
margin: 0 0 1.42857; } margin: 0 0 1.42857; }

View File

@ -367,7 +367,7 @@ angular.module('ionic.ui.content', [])
(function() { (function() {
'use strict'; 'use strict';
angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate']) angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
.directive('listItem', function() { .directive('listItem', function() {
return { return {
@ -384,7 +384,7 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate'])
canSwipe: '@', canSwipe: '@',
buttons: '=', buttons: '=',
}, },
template: '<li class="list-item" ng-click="onSelect()">\ template: '<li class="list-item">\
<div class="list-item-edit" ng-if="canDelete && isEditing">\ <div class="list-item-edit" ng-if="canDelete && isEditing">\
<button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\ <button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
</div>\ </div>\
@ -413,15 +413,6 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate'])
}; };
}) })
.directive('listRefresher', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="list-refresher"><div class="list-refresher-content" ng-transclude></div></div>'
}
})
.directive('list', function() { .directive('list', function() {
return { return {
restrict: 'E', restrict: 'E',
@ -431,10 +422,7 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate'])
scope: { scope: {
isEditing: '=', isEditing: '=',
deleteIcon: '@', deleteIcon: '@',
reorderIcon: '@', reorderIcon: '@'
onRefreshOpening: '&',
onRefreshHolding: '&',
onRefresh: '&',
}, },
// So we can require being under this // So we can require being under this
@ -453,12 +441,7 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate'])
compile: function(element, attr, transclude) { compile: function(element, attr, transclude) {
return function($scope, $element, $attr) { return function($scope, $element, $attr) {
var lv = new ionic.views.List({ var lv = new ionic.views.List({el: $element[0]});
el: $element[0],
onRefreshOpening: function(ratio) { $scope.onRefreshOpening({ratio: ratio}) },
onRefreshHolding: function() { $scope.onRefreshHolding(); },
onRefresh: function() { $scope.onRefresh(); }
});
if(attr.animation) { if(attr.animation) {
$element.addClass(attr.animation); $element.addClass(attr.animation);

4
dist/js/ionic.js vendored
View File

@ -3746,10 +3746,6 @@ ionic.controllers.TabBarController.prototype = {
return this.selectedController; return this.selectedController;
}, },
getSelectedIndex: function() {
return this.selectedIndex;
},
// Add a tab // Add a tab
addController: function(controller) { addController: function(controller) {
this.controllers.push(controller); this.controllers.push(controller);

View File

@ -97,10 +97,6 @@ ionic.controllers.TabBarController.prototype = {
return this.selectedController; return this.selectedController;
}, },
getSelectedIndex: function() {
return this.selectedIndex;
},
// Add a tab // Add a tab
addController: function(controller) { addController: function(controller) {
this.controllers.push(controller); this.controllers.push(controller);

View File

@ -1,7 +1,7 @@
(function() { (function() {
'use strict'; 'use strict';
angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate']) angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
.directive('listItem', function() { .directive('listItem', function() {
return { return {
@ -18,7 +18,7 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate'])
canSwipe: '@', canSwipe: '@',
buttons: '=', buttons: '=',
}, },
template: '<li class="list-item" ng-click="onSelect()">\ template: '<li class="list-item">\
<div class="list-item-edit" ng-if="canDelete && isEditing">\ <div class="list-item-edit" ng-if="canDelete && isEditing">\
<button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\ <button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
</div>\ </div>\
@ -47,15 +47,6 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate'])
}; };
}) })
.directive('listRefresher', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="list-refresher"><div class="list-refresher-content" ng-transclude></div></div>'
}
})
.directive('list', function() { .directive('list', function() {
return { return {
restrict: 'E', restrict: 'E',
@ -65,10 +56,7 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate'])
scope: { scope: {
isEditing: '=', isEditing: '=',
deleteIcon: '@', deleteIcon: '@',
reorderIcon: '@', reorderIcon: '@'
onRefreshOpening: '&',
onRefreshHolding: '&',
onRefresh: '&',
}, },
// So we can require being under this // So we can require being under this
@ -87,12 +75,7 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate'])
compile: function(element, attr, transclude) { compile: function(element, attr, transclude) {
return function($scope, $element, $attr) { return function($scope, $element, $attr) {
var lv = new ionic.views.List({ var lv = new ionic.views.List({el: $element[0]});
el: $element[0],
onRefreshOpening: function(ratio) { $scope.onRefreshOpening({ratio: ratio}) },
onRefreshHolding: function() { $scope.onRefreshHolding(); },
onRefresh: function() { $scope.onRefresh(); }
});
if(attr.animation) { if(attr.animation) {
$element.addClass(attr.animation); $element.addClass(attr.animation);

View File

@ -16,7 +16,7 @@
"../ionic/tabs", "../ionic/tabs",
"../ionic/menu", "../ionic/menu",
"../ionic/modal", "../ionic/modal",
"../ionic/listview", "../ionic/list",
// Forms // Forms
"../ionic/form", "../ionic/form",

View File

@ -117,6 +117,7 @@
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; right: 5px;
bottom: 5px;
} }
} }
@ -175,12 +176,16 @@
} }
} }
.bar .button-icon { .bar [class^="icon-"],
border: 1px solid transparent; .bar [class*=" icon-"] {
background-color: transparent;
font-size: 24px; font-size: 24px;
} }
.bar .button-icon {
border: $button-border-width solid transparent;
background-color: transparent;
}
// Header at top // Header at top
.bar-header { .bar-header {
top: 0; top: 0;

View File

@ -110,7 +110,8 @@ a.list-item {
z-index: 2; z-index: 2;
margin-top: $list-item-border-width * -1; margin-top: $list-item-border-width * -1;
padding: $list-item-padding; padding: $list-item-padding ($list-item-padding * 3) $list-item-padding $list-item-padding;
font-size: $list-font-size;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
} }
@ -132,18 +133,44 @@ a.list-item {
} }
} }
.list-icon-right .list-item-content { .list-icon-right .list-item-content i {
padding-right: ($list-item-padding * 3);
i {
right: $list-item-padding / 2; right: $list-item-padding / 2;
}
} }
.list-icon-left.list-icon-right .list-item-content i:last-child { .list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; left: auto;
} }
a .list-item-content:after,
button .list-item-content:after {
position: absolute;
top: 0;
right: $list-item-padding - 4;
display: flex;
height: 100%;
color: #ccc;
content: "\e0fc"; // icon-chevron-right
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 16px;
font-family: 'ionicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
align-items: center;
}
// do not show the default right arrow when they want their own right side icon
a.list-icon-right,
button.list-icon-right {
.list-item-content:after {
display: none;
}
}
.list-thumbnail h2 { .list-thumbnail h2 {
overflow: hidden; overflow: hidden;
margin: 0 0 8px 0; margin: 0 0 8px 0;
@ -163,7 +190,7 @@ a.list-item {
padding-left: $list-thumbnail-width + $list-item-padding; padding-left: $list-thumbnail-width + $list-item-padding;
min-height: $list-thumbnail-width; min-height: $list-thumbnail-width;
img { .thumbnail {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -304,13 +331,9 @@ a.list-item {
* List refreser elements * List refreser elements
*/ */
.list-refresher { .list-refresher {
background-color: red;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
} }
.list-refresher-content {
padding: 20px;
text-align: center;
}
.list-refreshing { .list-refreshing {
-webkit-transition: height 0.2s ease-in-out;
} }

View File

@ -131,17 +131,6 @@
clear: both; clear: both;
} }
} }
// Webkit-style focus
// ------------------
@mixin tab-focus() {
// Default
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Center-align a block level element // Center-align a block level element
// ---------------------------------- // ----------------------------------
@mixin center-block() { @mixin center-block() {

View File

@ -337,6 +337,8 @@ $tabs-dark-border-color: $button-dark-border;
// Lists // Lists
// ------------------------------- // -------------------------------
$list-font-size: 16px;
$list-header-bg: transparent; $list-header-bg: transparent;
$list-header-color: #222; $list-header-color: #222;
$list-header-padding: 5px 15px; $list-header-padding: 5px 15px;

View File

@ -22,7 +22,7 @@
"tabs", "tabs",
"menu", "menu",
"modal", "modal",
"listview", "list",
// Forms // Forms
"form", "form",

View File

@ -21,7 +21,7 @@
"menu", "menu",
"modal", "modal",
"popup", "popup",
"listview", "list",
// Forms // Forms
"form", "form",

View File

@ -5,8 +5,7 @@
<!-- Sets initial viewport load and disables zooming --> <!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/ionicons.css" rel="stylesheet"> <link href="../dist/css/ionic.css" rel="stylesheet">
<link href="../dist/ionic.css" rel="stylesheet">
<style> <style>
.bar { .bar {
position: relative; position: relative;
@ -22,7 +21,7 @@
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<a class="button">Back</a> <a class="button">Back</a>
<h1 class="title">Really really really really really really really really long title!</h1> <h1 class="title">Really really really really really really really really long title!</h1>
<a class="button">This</a> <a class="button"><i class="icon-home"></i> Home</a>
</header> </header>
<div class="bar bar-header-secondary bar-success"> <div class="bar bar-header-secondary bar-success">
<div class="button-bar"> <div class="button-bar">
@ -32,13 +31,17 @@
</div> </div>
</div> </div>
<header class="bar bar-header bar-default"> <header class="bar bar-header bar-default">
<a class="button">Back</a> <a class="button button-icon">
<i class="icon-home"></i> Home
</a>
<div class="button-bar"> <div class="button-bar">
<a class="button">Success</a> <a class="button">Success</a>
<a class="button">Warning</a> <a class="button">Warning</a>
<a class="button">Danger</a> <a class="button">Danger</a>
</div> </div>
<a class="button">This</a> <a class="button">
<i class="icon-star"></i>
</a>
</header> </header>
<div class="bar bar-header bar-default"> <div class="bar bar-header bar-default">
<div class="button-bar"> <div class="button-bar">
@ -62,8 +65,5 @@
</section> </section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body> </body>
</html> </html>

View File

@ -22,15 +22,22 @@
List Header List Header
</div> </div>
<a href="#" class="list-item"> <div href="#" class="list-item">
<div class="list-item-content"> <div class="list-item-content">
Madison, WI Not a link so no default right arrow
</div>
</div> </div>
</a>
<a href="#" class="list-item"> <a href="#" class="list-item">
<div class="list-item-content slide-right"> <div class="list-item-content slide-right">
Driving Directions Auto Right side arrow cuz its a link
</div>
</a>
<a href="#" class="list-item list-icon-right">
<div class="list-item-content slide-right">
Custom Right Icon
<i class="icon-chevron-right"></i>
</div> </div>
</a> </a>
@ -74,28 +81,25 @@
<div class="list padding"> <div class="list padding">
<a href="#" class="list-item list-icon-right"> <a href="#" class="list-item">
<div class="list-item-content slide-right"> <div class="list-item-content slide-right">
Madison, WI Madison, WI
<i class="icon-chevron-right"></i>
</div> </div>
</a> </a>
<a href="#" class="list-item list-icon-right"> <a href="#" class="list-item">
<div class="list-item-content slide-left"> <div class="list-item-content slide-left">
Driving Directions Driving Directions
<i class="icon-chevron-right"></i>
</div> </div>
<div class="list-item-buttons"> <div class="list-item-buttons">
<button class="button">Button</button> <button class="button">Button</button>
</div> </div>
</a> </a>
<a href="#" class="list-item list-icon-right"> <a href="#" class="list-item">
<div class="list-item-content"> <div class="list-item-content">
Computers Computers
<span class="badge">3</span> <span class="badge">3</span>
<i class="icon-chevron-right"></i>
</div> </div>
</a> </a>
@ -162,19 +166,17 @@
<div class="list padding"> <div class="list padding">
<a href="#" class="list-item list-icon-left list-icon-right"> <a href="#" class="list-item list-icon-left">
<div class="list-item-content"> <div class="list-item-content">
<i class="icon-heart brand-danger fill-icon"></i> <i class="icon-heart brand-danger fill-icon"></i>
Madison, WI Madison, WI
<i class="icon-chevron-right"></i>
</div> </div>
</a> </a>
<a href="#" class="list-item list-icon-left list-icon-right"> <a href="#" class="list-item list-icon-left">
<div class="list-item-content"> <div class="list-item-content">
<i class="icon-image brand-warning fill-icon"></i> <i class="icon-image brand-warning fill-icon"></i>
Driving Directions Driving Directions
<i class="icon-chevron-right"></i>
</div> </div>
</a> </a>
@ -202,52 +204,45 @@
<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>
<hr>
<div class="list"> <div class="list">
<a href="#" class="list-item list-thumbnail list-icon-right"> <a href="#" class="list-item list-thumbnail">
<div class="list-item-content"> <div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg"> <img class="thumbnail" src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2> <h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p> <p>Nine Inch Nails</p>
<i class="icon-chevron-right"></i>
</div> </div>
</a> </a>
<a href="#" class="list-item list-thumbnail list-icon-right"> <a href="#" class="list-item list-thumbnail">
<div class="list-item-content"> <div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg"> <img class="thumbnail" src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
<h2>Siamese Dream</h2> <h2>Siamese Dream</h2>
<p>Smashing Pumpkins</p> <p>Smashing Pumpkins</p>
<i class="icon-chevron-right"></i>
</div> </div>
</a> </a>
<a href="#" class="list-item list-thumbnail list-icon-right"> <a href="#" class="list-item list-thumbnail">
<div class="list-item-content"> <div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg"> <img class="thumbnail" src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2> <h2>Nevermind</h2>
<p>Nirvana</p> <p>Nirvana</p>
<i class="icon-chevron-right"></i>
</div> </div>
</a> </a>
<a href="#" class="list-item list-thumbnail list-icon-right"> <a href="#" class="list-item list-thumbnail">
<div class="list-item-content"> <div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg"> <img class="thumbnail" src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2> <h2>License To Ill</h2>
<p>Bestie Boys</p> <p>Bestie Boys</p>
<i class="icon-chevron-right"></i>
</div> </div>
</a> </a>
<a href="#" class="list-item list-thumbnail list-icon-right"> <a href="#" class="list-item list-thumbnail">
<div class="list-item-content"> <div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg"> <img class="thumbnail" src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>Dookie</h2> <h2>Dookie</h2>
<p>Green Day</p> <p>Green Day</p>
<i class="icon-chevron-right"></i>
</div> </div>
</a> </a>