Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

styling products empty state OBW style, including existing add/import + suggestions

This commit is contained in:
haszari 2019-02-14 12:16:59 +13:00
parent c9f9d01f4b
commit 8db91f44c0
7 changed files with 51 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/admin-rtl.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/admin.css
View File

File diff suppressed because one or more lines are too long

46
assets/css/admin.scss
View File

@ -5517,10 +5517,6 @@
@include icon( '\e600' ); @include icon( '\e600' );
} }
.post-type-product .woocommerce-BlankState-message::before {
@include icon( '\e006' );
}
.woocommerce-BlankState--api .woocommerce-BlankState-message::before { .woocommerce-BlankState--api .woocommerce-BlankState-message::before {
@include icon( '\e01c' ); @include icon( '\e01c' );
} }
@ -5529,28 +5525,40 @@
@include icon( '\e01b' ); @include icon( '\e01b' );
} }
.woocommerce-BlankState { .post-type-product .woocommerce-BlankState {
background-color: white;
max-width: 800px;
padding: 4em 6em;
text-align: center; text-align: center;
padding: 5em 0 0; margin: auto;
.woocommerce-BlankState-message {
margin: 0 auto 1.5em;
line-height: 1.5em;
max-width: 500px;
}
.woocommerce-BlankState-cta {
font-size: 1.2em;
padding: 0.75em 1.5em;
margin: 0 .25em;
height: auto;
display: inline-block !important
}
}
.woocommerce-BlankState {
background-color: white;
max-width: 800px;
padding: 4em;
text-align: center;
margin: auto;
.woocommerce-BlankState-message { .woocommerce-BlankState-message {
color: #aaa;
margin: 0 auto 1.5em; margin: 0 auto 1.5em;
line-height: 1.5em; line-height: 1.5em;
font-size: 1.2em; font-size: 1.2em;
max-width: 500px; max-width: 500px;
&::before {
color: #ddd;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.8);
font-size: 8em;
display: block;
position: relative !important;
top: auto;
left: auto;
line-height: 1em;
margin: 0 0 0.1875em;
}
} }
.woocommerce-BlankState-cta { .woocommerce-BlankState-cta {

2
assets/css/marketplace-suggestions-rtl.css
View File

@ -1 +1 @@
.marketplace-list-banner h2{color:#555}.marketplace-list-banner td{vertical-align:middle}.marketplace-list-banner td.marketplace-list-title{padding-right:4em}.marketplace-list-banner td.marketplace-list-linkout{text-align:left;padding-left:3em}@media screen and (max-width:782px){.marketplace-list-banner{display:none}}.marketplace-suggestions-container{text-align:center;margin-top:2em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card{border:1px solid #e5e5e5;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:1em;padding:1.5em;text-align:right;width:230px}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card h2{margin-top:0;margin-bottom:.5em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card .button{width:110px;text-align:center} .marketplace-table-banner h2{color:#555}.marketplace-table-banner td{vertical-align:middle}.marketplace-table-banner td.marketplace-table-title{padding-right:4em}.marketplace-table-banner td.marketplace-table-linkout{text-align:left;padding-left:3em}@media screen and (max-width:782px){.marketplace-table-banner{display:none}}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body]{margin-top:4em;text-align:right}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container{border-top:1px solid #ccc}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container h4{margin-bottom:.5em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container p{margin-top:0}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container a.button{display:inline-block}

2
assets/css/marketplace-suggestions.css
View File

@ -1 +1 @@
.marketplace-list-banner h2{color:#555}.marketplace-list-banner td{vertical-align:middle}.marketplace-list-banner td.marketplace-list-title{padding-left:4em}.marketplace-list-banner td.marketplace-list-linkout{text-align:right;padding-right:3em}@media screen and (max-width:782px){.marketplace-list-banner{display:none}}.marketplace-suggestions-container{text-align:center;margin-top:2em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card{border:1px solid #e5e5e5;box-shadow:0 1px 1px rgba(0,0,0,.04);background:#fff;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:1em;padding:1.5em;text-align:left;width:230px}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card h2{margin-top:0;margin-bottom:.5em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-card .button{width:110px;text-align:center} .marketplace-table-banner h2{color:#555}.marketplace-table-banner td{vertical-align:middle}.marketplace-table-banner td.marketplace-table-title{padding-left:4em}.marketplace-table-banner td.marketplace-table-linkout{text-align:right;padding-right:3em}@media screen and (max-width:782px){.marketplace-table-banner{display:none}}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body]{margin-top:4em;text-align:left}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container{border-top:1px solid #ccc}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container h4{margin-bottom:.5em}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container p{margin-top:0}.marketplace-suggestions-container[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container a.button{display:inline-block}

44
assets/css/marketplace-suggestions.scss
View File

@ -3,7 +3,7 @@
* Styling for in-product marketplace suggestions. * Styling for in-product marketplace suggestions.
*/ */
.marketplace-list-banner { .marketplace-table-banner {
h2 { h2 {
color: #555; color: #555;
@ -13,11 +13,11 @@
vertical-align: middle; vertical-align: middle;
} }
td.marketplace-list-title { td.marketplace-table-title {
padding-left: 4em; padding-left: 4em;
} }
td.marketplace-list-linkout { td.marketplace-table-linkout {
text-align: right; text-align: right;
padding-right: 3em; padding-right: 3em;
} }
@ -25,41 +25,29 @@
@media screen and (max-width: 782px) { @media screen and (max-width: 782px) {
.marketplace-list-banner { .marketplace-table-banner {
display: none; display: none;
} }
} }
.marketplace-suggestions-container {
text-align: center;
margin-top: 2em;
}
.marketplace-suggestions-container[data-marketplace-suggestions-context="products-list-empty-body"] { .marketplace-suggestions-container[data-marketplace-suggestions-context="products-list-empty-body"] {
display: flex; margin-top: 4em;
flex-wrap: wrap; text-align: left;
justify-content: center;
.marketplace-card { .marketplace-listitem-container {
border: 1px solid #e5e5e5; border-top: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 1em;
padding: 1.5em;
text-align: left;
width: 230px;
h2 { h4 {
margin-top: 0;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.button { p {
width: 110px; margin-top: 0;
text-align: center; }
a.button {
display: inline-block;
} }
} }
} }

14
assets/js/admin/marketplace-suggestions.js
View File

@ -6,12 +6,6 @@
} }
var marketplaceSuggestionsApiData = [ var marketplaceSuggestionsApiData = [
{
slug: 'products-empty-header',
context: 'products-list-empty-header',
title: 'Ready to start selling something awesome?',
copy: 'Create your first product, import your product data, or browse extensions'
},
{ {
slug: 'products-empty-memberships', slug: 'products-empty-memberships',
context: 'products-list-empty-body', context: 'products-list-empty-body',
@ -86,11 +80,11 @@
} }
var row = document.createElement( 'tr' ); var row = document.createElement( 'tr' );
row.classList.add( 'marketplace-list-banner' ); row.classList.add( 'marketplace-table-banner' );
var titleColumn = document.createElement( 'td' ); var titleColumn = document.createElement( 'td' );
titleColumn.setAttribute( 'colspan', 5 ); titleColumn.setAttribute( 'colspan', 5 );
titleColumn.classList.add( 'marketplace-list-title' ); titleColumn.classList.add( 'marketplace-table-title' );
var titleHeading = document.createElement( 'h2' ); var titleHeading = document.createElement( 'h2' );
titleColumn.append( titleHeading ); titleColumn.append( titleHeading );
titleHeading.textContent = title; titleHeading.textContent = title;
@ -99,7 +93,7 @@
var linkoutColumn = document.createElement( 'td' ); var linkoutColumn = document.createElement( 'td' );
linkoutColumn.setAttribute( 'colspan', 4 ); linkoutColumn.setAttribute( 'colspan', 4 );
linkoutColumn.classList.add( 'marketplace-list-linkout' ); linkoutColumn.classList.add( 'marketplace-table-linkout' );
var linkoutButton = renderLinkoutButton( url, buttonText ); var linkoutButton = renderLinkoutButton( url, buttonText );
linkoutColumn.append( linkoutButton ); linkoutColumn.append( linkoutButton );
@ -118,7 +112,7 @@
} }
var container = document.createElement( 'div' ); var container = document.createElement( 'div' );
container.classList.add( 'marketplace-list-container' ); container.classList.add( 'marketplace-listitem-container' );
var titleHeading = document.createElement( 'h4' ); var titleHeading = document.createElement( 'h4' );
titleHeading.textContent = title; titleHeading.textContent = title;