share styles and markup for prpducts list suggestion

assets/css/marketplace-suggestions.scss

@@ -26,40 +26,10 @@ a.suggestion-dismiss::before {
 	font-size: 1.5em;
 }
 
-.marketplace-table-banner {
-
-	h2 {
-		color: #555;
-	}
-
-	td {
-		vertical-align: middle;
-	}
-
-	td.marketplace-table-title {
-		border-left: 4px solid $woocommerce;
-		padding-left: 4em;
-	}
-
-	td.marketplace-table-linkout {
-		text-align: right;
-		padding-right: 1em;
-
-		a.button {
-			margin-right: 0.5em;
-		}
-
-		a.suggestion-dismiss {
-			position: relative;
-			top: 4px;
-		}
-	}
-}
-
 .marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-header"],
 .marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-footer"] {
 
-	.marketplace-listitem-container-content {
+	.marketplace-suggestion-container-content {
 
 		h4 {
 			font-size: 1.1em;
@@ -69,14 +39,18 @@ a.suggestion-dismiss::before {
 	}
 }
 
-.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-body"] {
+.marketplace-suggestions-container.showing-suggestion {
+	text-align: left;
 
-	.marketplace-listitem-container {
+	.marketplace-suggestion-container {
 		align-items: flex-start;
 		display: flex;
 		flex-direction: column;
 
-		.marketplace-listitem-container-content {
+		// Allows us to position the dismiss x button relative to container on mobile.
+		position: relative;
+
+		.marketplace-suggestion-container-content {
 			flex: 1 0 70%;
 
 			h4 {
@@ -91,17 +65,51 @@ a.suggestion-dismiss::before {
 			}
 		}
 
-		.marketplace-listitem-container-cta {
+		.marketplace-suggestion-container-cta {
 			flex: 1 1 30%;
 			text-align: right;
+
+			.suggestion-dismiss {
+				text-decoration: none;
+				position: absolute;
+				top: 1em;
+				right: 1em;
+			}
 		}
 	}
 
 	@media screen and (min-width: 600px) {
 
-		.marketplace-listitem-container {
+		.marketplace-suggestion-container {
 			align-items: center;
 			flex-direction: row;
+
+		}
+	}
+}
+
+.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-inline"] {
+
+	td:first-child {
+		border-left: 4px solid $woocommerce;
+	}
+
+	.marketplace-suggestion-container {
+		padding: 0.5em 0 0.5em 1em;
+
+		h4 {
+			margin: 0;
+			font-size: 1.2em;
+		}
+
+		.marketplace-suggestion-container-cta {
+
+			.suggestion-dismiss {
+				position: relative;
+				top: 4px;
+				right: auto;
+				margin-left: 1em;
+			}
 		}
 	}
 }
@@ -110,7 +118,6 @@ a.suggestion-dismiss::before {
 .marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-footer"],
 .marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-body"] {
 
-	text-align: left;
 	border: 1px solid $suggestions-pale-gray;
 	border-bottom: none;
 
@@ -118,19 +125,16 @@ a.suggestion-dismiss::before {
 		border-bottom: 1px solid $suggestions-pale-gray;
 	}
 
-	.marketplace-listitem-container {
+	.marketplace-suggestion-container {
 		padding: 1.5em;
 		border-bottom: 1px solid $suggestions-pale-gray;
 
-		// Allows us to position the dismiss x button relative to container on mobile.
-		position: relative;
-
 		&:last-child {
 			border-bottom: none;
 			padding-bottom: 1.5em;
 		}
 
-		.marketplace-listitem-container-cta {
+		.marketplace-suggestion-container-cta {
 
 			a.button {
 				display: inline-block;
@@ -150,7 +154,6 @@ a.suggestion-dismiss::before {
 			}
 
 			.suggestion-dismiss {
-				text-decoration: none;
 				position: absolute;
 				top: 1em;
 				right: 1em;
@@ -160,11 +163,11 @@ a.suggestion-dismiss::before {
 
 	@media screen and (min-width: 600px) {
 
-		.marketplace-listitem-container {
+		.marketplace-suggestion-container {
 			border-bottom: none;
 			padding-bottom: 0;
 
-			.marketplace-listitem-container-cta {
+			.marketplace-suggestion-container-cta {
 
 				.suggestion-dismiss {
 					position: relative;
@@ -173,6 +176,5 @@ a.suggestion-dismiss::before {
 				}
 			}
 		}
-
 	}
 }

assets/js/admin/marketplace-suggestions.js

@@ -54,52 +54,10 @@
 			return linkoutButton;
 		}
 
-		function renderTableBanner( slug, title, url, buttonText, allowDismiss ) {
+		function renderSuggestionContent( slug, title, copy ) {
-			if ( ! title || ! url ) {
-				return;
-			}
-
-			if ( ! buttonText ) {
-				buttonText = 'Go';
-			}
-
-			var row = document.createElement( 'tr' );
-			row.classList.add( 'marketplace-suggestions-container' );
-			row.classList.add( 'marketplace-table-banner' );
-			row.dataset.suggestionSlug = slug;
-
-			var titleColumn = document.createElement( 'td' );
-			titleColumn.setAttribute( 'colspan', 5 );
-			titleColumn.classList.add( 'marketplace-table-title' );
-			var titleHeading = document.createElement( 'h2' );
-			titleColumn.appendChild( titleHeading );
-			titleHeading.textContent = title;
-
-			row.appendChild( titleColumn );
-
-			var linkoutColumn = document.createElement( 'td' );
-			linkoutColumn.setAttribute( 'colspan', 5 );
-			linkoutColumn.classList.add( 'marketplace-table-linkout' );
-			var linkoutButton = renderLinkout( url, buttonText, true );
-			linkoutColumn.appendChild( linkoutButton );
-			if ( allowDismiss ) {
-				linkoutColumn.appendChild( renderDismissButton( slug ) )
-			}
-
-			row.appendChild( linkoutColumn );
-
-			return row;
-		}
-
-		function renderListItem( slug, title, url, linkText, linkIsButton, copy, allowDismiss ) {
-			var container = document.createElement( 'div' );
-			container.classList.add( 'marketplace-listitem-container' );
-			container.dataset.suggestionSlug = slug;
-
 			var left = document.createElement( 'div' );
-			left.classList.add( 'marketplace-listitem-container-content' );
+
-			var right = document.createElement( 'div' );
+			left.classList.add( 'marketplace-suggestion-container-content' );
-			right.classList.add( 'marketplace-listitem-container-cta' );
 
 			if ( title ) {
 				var titleHeading = document.createElement( 'h4' );
@@ -113,6 +71,13 @@
 				left.appendChild( body );
 			}
 
+			return left;
+		}
+
+		function renderSuggestionCTA( slug, url, linkText, linkIsButton, allowDismiss ) {
+			var right = document.createElement( 'div' );
+
+			right.classList.add( 'marketplace-suggestion-container-cta' );
 			if ( url && linkText ) {
 				var linkoutElement = renderLinkout( url, linkText, linkIsButton );
 				right.appendChild( linkoutElement );
@@ -122,8 +87,57 @@
 				right.appendChild( renderDismissButton( slug ) )
 			}
 
-			container.appendChild( left );
+			return right;
-			container.appendChild( right );
+		}
+
+		function renderTableBanner( slug, title, copy, url, buttonText, allowDismiss ) {
+			if ( ! title || ! url ) {
+				return;
+			}
+
+			if ( ! buttonText ) {
+				buttonText = 'Go';
+			}
+
+			var row = document.createElement( 'tr' );
+			row.classList.add( 'marketplace-table-banner' );
+			row.classList.add( 'marketplace-suggestions-container' );
+			row.classList.add( 'showing-suggestion' );
+			row.dataset.marketplaceSuggestionsContext = 'products-list-inline';
+			row.dataset.suggestionSlug = slug;
+
+			var cell = document.createElement( 'td' );
+			cell.setAttribute( 'colspan', 10 );
+
+			var container = document.createElement( 'div' );
+			container.classList.add( 'marketplace-suggestion-container' );
+			container.dataset.suggestionSlug = slug;
+
+
+			container.appendChild(
+				renderSuggestionContent( slug, title, copy )
+			);
+			container.appendChild(
+				renderSuggestionCTA( slug, url, buttonText, true, allowDismiss )
+			);
+
+			cell.appendChild( container );
+			row.appendChild( cell );
+
+			return row;
+		}
+
+		function renderListItem( slug, title, copy, url, linkText, linkIsButton, allowDismiss ) {
+			var container = document.createElement( 'div' );
+			container.classList.add( 'marketplace-suggestion-container' );
+			container.dataset.suggestionSlug = slug;
+
+			container.appendChild(
+				renderSuggestionContent( slug, title, copy )
+			);
+			container.appendChild(
+				renderSuggestionCTA( slug, url, linkText, linkIsButton, allowDismiss )
+			);
 
 			return container;
 		}
@@ -139,7 +153,6 @@
 				return ! _.contains( marketplace_suggestions.dismissed_suggestions, promo.slug );
 			} );
 
-
 			// hide promos for things the user already has installed
 			promos = _.filter( promos, function( promo ) {
 				return ! _.contains( marketplace_suggestions.installed_woo_plugins, promo['hide-if-installed'] );
@@ -201,10 +214,10 @@
 					var content = renderListItem(
 						promos[ i ].slug,
 						promos[ i ].title,
+						promos[ i ].copy,
 						promos[ i ].url,
 						linkText,
 						linkoutIsButton,
-						promos[ i ].copy,
 						allowDismiss
 					);
 					$( this ).append( content );
@@ -233,6 +246,7 @@
 				var content = renderTableBanner(
 					promos[ 0 ].slug,
 					promos[ 0 ].title,
+					promos[ 0 ].copy,
 					promos[ 0 ].url,
 					promos[ 0 ]['button-text'],
 					allowDismiss