Tightened up spacing, removed the icon, added more across (up to 5)

toddparker · toddparker · commit 07535fba2374 · 2012-10-15T22:10:54.000-04:00
TODO: Make split buttons work somehow, create a variant with large
photos that stretch for an album example,  fix highlight on darker
themes
diff --git a/css/structure/jquery.mobile.listview.grid.css b/css/structure/jquery.mobile.listview.grid.css
@@ -1,7 +1,7 @@
 .ui-listview-grid li.ui-li {
 	float: left;
 	width: 45%;
-	margin: 1em 2% 0;
+	margin: .7em .75% 0;
 	border-width: 1px;
 	padding: .6em 0;
 }
@@ -21,26 +21,30 @@
 .ui-listview-grid .ui-li-static.ui-li-has-thumb {
 	padding: 0 .6em;
 }
-
+.ui-listview-grid .ui-li .ui-icon {
+	display:none;
+}
+.ui-listview-grid .ui-li .ui-li-heading {
+	font-size:13px;
+}
 .ui-listview-grid  .ui-btn-icon-left > .ui-btn-inner > .ui-icon, 
 .ui-listview-grid  .ui-btn-icon-right > .ui-btn-inner > .ui-icon {
-	top: 0;
-	bottom: auto;
-	margin-top: 0;
-	left: .6em;
+	display:none;
 }
 
 
 @media (min-width: 50em){
 	.ui-listview-grid li.ui-li {
-		width: 30%;
-		margin: 1em 1.25% 0;
+		width: 28%;
 	}
 }
-
 @media (min-width: 70em){
 	.ui-listview-grid li.ui-li {
-		width: 22.25%;
-		margin: 1em .75% 0;
+		width: 21%;
+	}
+}
+@media (min-width: 85em){
+	.ui-listview-grid li.ui-li {
+		width: 18%;
 	}
 }
diff --git a/docs/lists/lists-grid.html b/docs/lists/lists-grid.html
@@ -14,7 +14,7 @@
 </head> 
 <body> 
 
-	<div data-role="page" class="type-interior">
+	<div data-role="page" class="type-interior" data-theme="c">
 
 		<div data-role="header" data-theme="f">
 		<h1>Grid layout</h1>
@@ -33,7 +33,7 @@ <h1>Grid layout</h1>
 				<img src="images/album-bb.jpg" />
 				<h3>Broken Bells</h3>
 				<p>Broken Bells</p>
-			</a></li>
+			</a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a></li>
 			<li><a href="index.html">
 				<img src="images/album-hc.jpg" />
 				<h3>Warning</h3>
@@ -87,6 +87,13 @@ <h3>The Suburbs</h3>
 				<p>Arcade Fire</p>
 			</a></li>
 		</ul>
+		
+		<div data-role="popup" id="purchase" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;">
+			<h3>Purchase Album?</h3>
+			<p>Your download will begin immediately on your mobile device when you purchase.</p>
+			<a href="index.html" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">Buy: $10.99</a>
+			<a href="index.html" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>	
+		</div>
 		</div><!--/content-primary -->		
 
 		<div class="content-secondary">
