From 21b0be7ef696a09729f548191552d038624d2967 Mon Sep 17 00:00:00 2001 From: haszari Date: Tue, 19 Feb 2019 16:31:14 +1300 Subject: [PATCH] share styles and markup for prpducts list suggestion --- assets/css/marketplace-suggestions-rtl.css | 2 +- assets/css/marketplace-suggestions.css | 2 +- assets/css/marketplace-suggestions.scss | 94 ++++++++--------- assets/js/admin/marketplace-suggestions.js | 112 ++++++++++++--------- 4 files changed, 113 insertions(+), 97 deletions(-) diff --git a/assets/css/marketplace-suggestions-rtl.css b/assets/css/marketplace-suggestions-rtl.css index 28a17d9aa1a..77267bf3d00 100644 --- a/assets/css/marketplace-suggestions-rtl.css +++ b/assets/css/marketplace-suggestions-rtl.css @@ -1 +1 @@ -@charset "UTF-8";a.suggestion-dismiss{border:none;box-shadow:none;color:#ddd}a.suggestion-dismiss:hover{color:#aaa}a.suggestion-dismiss::before{font-family:Dashicons;speak:none;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;content:"";text-decoration:none;font-size:1.5em}.marketplace-table-banner h2{color:#555}.marketplace-table-banner td{vertical-align:middle}.marketplace-table-banner td.marketplace-table-title{border-right:4px solid #a46497;padding-right:4em}.marketplace-table-banner td.marketplace-table-linkout{text-align:left;padding-left:1em}.marketplace-table-banner td.marketplace-table-linkout a.button{margin-left:.5em}.marketplace-table-banner td.marketplace-table-linkout a.suggestion-dismiss{position:relative;top:4px}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container-content h4,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container-content h4{font-size:1.1em;margin:0;margin-bottom:0}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-content{-webkit-box-flex:1;-webkit-flex:1 0 70%;flex:1 0 70%}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-content h4{margin:0;margin-bottom:.5em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-content p{margin:0;margin-bottom:.5em;color:#444}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-cta{-webkit-box-flex:1;-webkit-flex:1 1 30%;flex:1 1 30%;text-align:left}@media screen and (min-width:600px){.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container{-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row}}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body],.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-header]{text-align:right;border:1px solid #ddd;border-bottom:none}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body]:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer]:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header]:last-child{border-bottom:1px solid #ddd}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container{padding:1.5em;border-bottom:1px solid #ddd;position:relative}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container:last-child{border-bottom:none;padding-bottom:1.5em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-cta a.button,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container .marketplace-listitem-container-cta a.button,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container .marketplace-listitem-container-cta a.button{display:inline-block;min-width:120px;text-align:center}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-cta a.linkout,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container .marketplace-listitem-container-cta a.linkout,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container .marketplace-listitem-container-cta a.linkout{font-size:1.1em;text-decoration:none}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-cta a.linkout .dashicons,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container .marketplace-listitem-container-cta a.linkout .dashicons,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container .marketplace-listitem-container-cta a.linkout .dashicons{margin-right:4px;bottom:2px;position:relative}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container .marketplace-listitem-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container .marketplace-listitem-container-cta .suggestion-dismiss{text-decoration:none;position:absolute;top:1em;left:1em}@media screen and (min-width:600px){.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container{border-bottom:none;padding-bottom:0}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container .marketplace-listitem-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container .marketplace-listitem-container-cta .suggestion-dismiss{position:relative;top:7px;left:auto}} \ No newline at end of file +@charset "UTF-8";a.suggestion-dismiss{border:none;box-shadow:none;color:#ddd}a.suggestion-dismiss:hover{color:#aaa}a.suggestion-dismiss::before{font-family:Dashicons;speak:none;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;content:"";text-decoration:none;font-size:1.5em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container-content h4,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container-content h4{font-size:1.1em;margin:0;margin-bottom:0}.marketplace-suggestions-container.showing-suggestion{text-align:right}.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;position:relative}.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container .marketplace-suggestion-container-content{-webkit-box-flex:1;-webkit-flex:1 0 70%;flex:1 0 70%}.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container .marketplace-suggestion-container-content h4{margin:0;margin-bottom:.5em}.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container .marketplace-suggestion-container-content p{margin:0;margin-bottom:.5em;color:#444}.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container .marketplace-suggestion-container-cta{-webkit-box-flex:1;-webkit-flex:1 1 30%;flex:1 1 30%;text-align:left}.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss{text-decoration:none;position:absolute;top:1em;left:1em}@media screen and (min-width:600px){.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container{-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row}}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-inline] td:first-child{border-right:4px solid #a46497}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-inline] .marketplace-suggestion-container{padding:.5em 1em .5em 0}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-inline] .marketplace-suggestion-container h4{margin:0;font-size:1.2em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-inline] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss{position:relative;top:4px;left:auto;margin-right:1em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body],.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-header]{border:1px solid #ddd;border-bottom:none}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body]:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer]:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header]:last-child{border-bottom:1px solid #ddd}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container{padding:1.5em;border-bottom:1px solid #ddd}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container:last-child{border-bottom:none;padding-bottom:1.5em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.button,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.button,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.button{display:inline-block;min-width:120px;text-align:center}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.linkout,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.linkout,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.linkout{font-size:1.1em;text-decoration:none}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.linkout .dashicons,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.linkout .dashicons,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.linkout .dashicons{margin-right:4px;bottom:2px;position:relative}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss{position:absolute;top:1em;left:1em}@media screen and (min-width:600px){.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container{border-bottom:none;padding-bottom:0}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss{position:relative;top:7px;left:auto}} \ No newline at end of file diff --git a/assets/css/marketplace-suggestions.css b/assets/css/marketplace-suggestions.css index ea4840909b2..f99dd78f12e 100644 --- a/assets/css/marketplace-suggestions.css +++ b/assets/css/marketplace-suggestions.css @@ -1 +1 @@ -@charset "UTF-8";a.suggestion-dismiss{border:none;box-shadow:none;color:#ddd}a.suggestion-dismiss:hover{color:#aaa}a.suggestion-dismiss::before{font-family:Dashicons;speak:none;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;content:"";text-decoration:none;font-size:1.5em}.marketplace-table-banner h2{color:#555}.marketplace-table-banner td{vertical-align:middle}.marketplace-table-banner td.marketplace-table-title{border-left:4px solid #a46497;padding-left:4em}.marketplace-table-banner td.marketplace-table-linkout{text-align:right;padding-right:1em}.marketplace-table-banner td.marketplace-table-linkout a.button{margin-right:.5em}.marketplace-table-banner td.marketplace-table-linkout a.suggestion-dismiss{position:relative;top:4px}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container-content h4,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container-content h4{font-size:1.1em;margin:0;margin-bottom:0}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-content{-webkit-box-flex:1;-webkit-flex:1 0 70%;flex:1 0 70%}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-content h4{margin:0;margin-bottom:.5em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-content p{margin:0;margin-bottom:.5em;color:#444}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-cta{-webkit-box-flex:1;-webkit-flex:1 1 30%;flex:1 1 30%;text-align:right}@media screen and (min-width:600px){.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container{-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row}}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body],.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-header]{text-align:left;border:1px solid #ddd;border-bottom:none}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body]:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer]:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header]:last-child{border-bottom:1px solid #ddd}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container{padding:1.5em;border-bottom:1px solid #ddd;position:relative}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container:last-child{border-bottom:none;padding-bottom:1.5em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-cta a.button,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container .marketplace-listitem-container-cta a.button,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container .marketplace-listitem-container-cta a.button{display:inline-block;min-width:120px;text-align:center}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-cta a.linkout,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container .marketplace-listitem-container-cta a.linkout,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container .marketplace-listitem-container-cta a.linkout{font-size:1.1em;text-decoration:none}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-cta a.linkout .dashicons,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container .marketplace-listitem-container-cta a.linkout .dashicons,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container .marketplace-listitem-container-cta a.linkout .dashicons{margin-left:4px;bottom:2px;position:relative}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container .marketplace-listitem-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container .marketplace-listitem-container-cta .suggestion-dismiss{text-decoration:none;position:absolute;top:1em;right:1em}@media screen and (min-width:600px){.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container{border-bottom:none;padding-bottom:0}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-listitem-container .marketplace-listitem-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-listitem-container .marketplace-listitem-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-listitem-container .marketplace-listitem-container-cta .suggestion-dismiss{position:relative;top:7px;right:auto}} \ No newline at end of file +@charset "UTF-8";a.suggestion-dismiss{border:none;box-shadow:none;color:#ddd}a.suggestion-dismiss:hover{color:#aaa}a.suggestion-dismiss::before{font-family:Dashicons;speak:none;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;content:"";text-decoration:none;font-size:1.5em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container-content h4,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container-content h4{font-size:1.1em;margin:0;margin-bottom:0}.marketplace-suggestions-container.showing-suggestion{text-align:left}.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;position:relative}.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container .marketplace-suggestion-container-content{-webkit-box-flex:1;-webkit-flex:1 0 70%;flex:1 0 70%}.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container .marketplace-suggestion-container-content h4{margin:0;margin-bottom:.5em}.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container .marketplace-suggestion-container-content p{margin:0;margin-bottom:.5em;color:#444}.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container .marketplace-suggestion-container-cta{-webkit-box-flex:1;-webkit-flex:1 1 30%;flex:1 1 30%;text-align:right}.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss{text-decoration:none;position:absolute;top:1em;right:1em}@media screen and (min-width:600px){.marketplace-suggestions-container.showing-suggestion .marketplace-suggestion-container{-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row}}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-inline] td:first-child{border-left:4px solid #a46497}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-inline] .marketplace-suggestion-container{padding:.5em 0 .5em 1em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-inline] .marketplace-suggestion-container h4{margin:0;font-size:1.2em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-inline] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss{position:relative;top:4px;right:auto;margin-left:1em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body],.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-header]{border:1px solid #ddd;border-bottom:none}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body]:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer]:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header]:last-child{border-bottom:1px solid #ddd}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container{padding:1.5em;border-bottom:1px solid #ddd}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container:last-child,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container:last-child{border-bottom:none;padding-bottom:1.5em}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.button,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.button,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.button{display:inline-block;min-width:120px;text-align:center}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.linkout,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.linkout,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.linkout{font-size:1.1em;text-decoration:none}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.linkout .dashicons,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.linkout .dashicons,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container .marketplace-suggestion-container-cta a.linkout .dashicons{margin-left:4px;bottom:2px;position:relative}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss{position:absolute;top:1em;right:1em}@media screen and (min-width:600px){.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container{border-bottom:none;padding-bottom:0}.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-body] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-footer] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss,.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context=products-list-empty-header] .marketplace-suggestion-container .marketplace-suggestion-container-cta .suggestion-dismiss{position:relative;top:7px;right:auto}} \ No newline at end of file diff --git a/assets/css/marketplace-suggestions.scss b/assets/css/marketplace-suggestions.scss index 297d9852157..62d3085c242 100644 --- a/assets/css/marketplace-suggestions.scss +++ b/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 { } } } - } } diff --git a/assets/js/admin/marketplace-suggestions.js b/assets/js/admin/marketplace-suggestions.js index f06b6e19a16..14921380953 100644 --- a/assets/js/admin/marketplace-suggestions.js +++ b/assets/js/admin/marketplace-suggestions.js @@ -54,52 +54,10 @@ return linkoutButton; } - function renderTableBanner( slug, title, url, buttonText, allowDismiss ) { - 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; - + function renderSuggestionContent( slug, title, copy ) { var left = document.createElement( 'div' ); - left.classList.add( 'marketplace-listitem-container-content' ); - var right = document.createElement( 'div' ); - right.classList.add( 'marketplace-listitem-container-cta' ); + + left.classList.add( 'marketplace-suggestion-container-content' ); 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 ); - container.appendChild( right ); + return 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