diff --git a/app/code/Magento/CatalogWidget/view/frontend/templates/product/widget/content/grid.phtml b/app/code/Magento/CatalogWidget/view/frontend/templates/product/widget/content/grid.phtml index 6789ace243b84..fad3ed621cff9 100644 --- a/app/code/Magento/CatalogWidget/view/frontend/templates/product/widget/content/grid.phtml +++ b/app/code/Magento/CatalogWidget/view/frontend/templates/product/widget/content/grid.phtml @@ -20,7 +20,7 @@ $showWishlist = true; $showCompare = true; $showCart = true; - $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::DEFAULT_VIEW; + $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW; $description = false; ?>
@@ -48,57 +48,55 @@ escapeHtml($_item->getName()) ?> - getProductPriceHtml($_item, $type); - ?> - getReviewsSummaryHtml($_item, $templateType) ?> - + getProductPriceHtml($_item, $type); ?> -
- -
- isSaleable()): ?> - getTypeInstance()->isPossibleBuyFromList($_item)): ?> - +
+
+ +
+ isSaleable()): ?> + getTypeInstance()->isPossibleBuyFromList($_item)): ?> + + + helper('Magento\Framework\Data\Helper\PostHelper'); + $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()]) + ?> + + - helper('Magento\Framework\Data\Helper\PostHelper'); - $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()]) - ?> - + getIsSalable()): ?> +
escapeHtml(__('In stock')) ?>
+ +
escapeHtml(__('Out of stock')) ?>
+ - - getIsSalable()): ?> -
escapeHtml(__('In stock')) ?>
- -
escapeHtml(__('Out of stock')) ?>
+
+ + +
+ helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?> + + escapeHtml(__('Add to Wish List')) ?> + + + getAddToCompareUrl() && $showCompare): ?> + helper('Magento\Catalog\Helper\Product\Compare');?> + + escapeHtml(__('Add to Compare')) ?> + - -
- - -
- helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?> - - escapeHtml(__('Add to Wish List')) ?> - - - getAddToCompareUrl() && $showCompare): ?> - helper('Magento\Catalog\Helper\Product\Compare');?> - - escapeHtml(__('Add to Compare')) ?> - - -
- +
+ +
diff --git a/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_widgets.less b/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_widgets.less index 42b1bf2d0cc09..7181606090ccb 100644 --- a/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_widgets.less +++ b/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_widgets.less @@ -23,6 +23,15 @@ } .block.widget { + .products-grid .product-item { + margin-left: 2%; + width: calc(~'(100% - 2%)/2'); + + &:nth-child(2n + 1) { + margin-left: 0; + } + } + .product-item-info { width: auto; } @@ -60,6 +69,15 @@ .page-layout-3columns .block.widget .products-grid .product-item { width: 100%/3; } + + .page-layout-1column .block.widget .products-grid .product-item { + margin-left: 2%; + width: calc(~'(100% - 4%)/3'); + + &:nth-child(3n + 1) { + margin-left: 0; + } + } } // @@ -82,7 +100,16 @@ } .page-layout-1column .block.widget .products-grid .product-item { - width: 100%/4; + margin-left: 2%; + width: calc(~'(100% - 6%)/4'); + + &:nth-child(3n + 1) { + margin-left: 2%; + } + + &:nth-child(4n + 1) { + margin-left: 0; + } } .page-layout-3columns .block.widget .products-grid .product-item { @@ -96,11 +123,11 @@ } .page-layout-1column .block.widget .products-grid .product-item { - margin-left: calc(~'(100% - 5 * (100%/6)) / 4'); - width: 100%/6; + margin-left: 2%; + width: calc(~'(100% - 8%)/5'); &:nth-child(4n + 1) { - margin-left: calc(~'(100% - 5 * (100%/6)) / 4'); + margin-left: 2%; } &:nth-child(5n + 1) { diff --git a/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_listings.less b/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_listings.less index 951ca89a07988..b7af69fd5ca82 100644 --- a/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_listings.less +++ b/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_listings.less @@ -29,15 +29,23 @@ .product { &-items { + font-size: 0; &:extend(.abs-reset-list all); } &-item { + font-size: 1.4rem; vertical-align: top; .products-grid & { display: inline-block; - width: 100%/2; + margin-left: 2%; + padding: 0; + width: calc(~'(100% - 2%) / 2'); + } + + &:nth-child(2n + 1) { + margin-left: 0; } &:extend(.abs-add-box-sizing all); @@ -63,13 +71,26 @@ } &-actions { + font-size: 0; + + > * { + font-size: 1.4rem; + } .actions-secondary { + display: inline-block; + font-size: 1.4rem; + vertical-align: middle; + white-space: nowrap; > button.action { .lib-button-reset(); } > .action { + line-height: 35px; + text-align: center; + width: 35px; + &:extend(.abs-actions-addto-gridlist all); &:before { margin: 0; @@ -80,6 +101,10 @@ } } } + + .actions-primary { + display: inline-block; + } } &-description { @@ -191,19 +216,6 @@ } } - .column.main { - .product { - &-items { - margin-left: -@indent__base; - } - - &-item { - padding-left: @indent__base; - } - } - - } - .price-container { .price { .lib-font-size(14); @@ -302,18 +314,10 @@ } .actions-primary + .actions-secondary { - display: table-cell; - padding-left: 5px; - white-space: nowrap; - width: 50%; > * { white-space: normal; } } - - .actions-primary { - display: table-cell; - } } } } @@ -329,7 +333,13 @@ .page-products.page-layout-3columns { .products-grid { .product-item { - width: 100%/3; + margin-left: 2%; + padding: 0; + width: calc(~'(100% - 4%) / 3'); + + &:nth-child(3n + 1) { + margin-left: 0; + } } } } @@ -343,7 +353,13 @@ .page-products { .products-grid { .product-item { - width: 100%/3; + margin-left: 2%; + padding: 0; + width: calc(~'(100% - 4%) / 3'); + + &:nth-child(3n + 1) { + margin-left: 0; + } } } } @@ -394,9 +410,13 @@ } .product-item { - margin-left: calc(~'(100% - 4 * 23.233%) / 3'); + margin-left: 2%; padding: 0; - width: 23.233%; + width: calc(~'(100% - 6%) / 4'); + + &:nth-child(3n + 1) { + margin-left: 2%; + } &:nth-child(4n + 1) { margin-left: 0; diff --git a/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module/_listings.less b/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module/_listings.less index 3cb3d4af53189..d477c08fc9553 100644 --- a/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module/_listings.less +++ b/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module/_listings.less @@ -18,7 +18,7 @@ @product-name-link__text-decoration__visited: @link__hover__text-decoration; @product-item__hover__background-color: @color-white; -@product-item__hover__box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, .3); +@product-item__hover__box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, .3); @product-price__muted__color: @color-gray40; @@ -34,15 +34,22 @@ .product { &-items { + font-size: 0; &:extend(.abs-reset-list all); } &-item { + font-size: 1.4rem; vertical-align: top; .products-grid & { display: inline-block; - width: 100%/2.04; + margin-left: 2%; + width: calc(~'(100% - 2%)/2'); + } + + &:nth-child(2n + 1) { + margin-left: 0; } &:extend(.abs-add-box-sizing all); @@ -68,8 +75,17 @@ } &-actions { + font-size: 0; + + > * { + font-size: 1.4rem; + } .actions-secondary { + display: inline-block; + font-size: 1.4rem; + vertical-align: middle; + > button.action { .lib-button-reset(); } @@ -79,12 +95,19 @@ &:before { margin: 0; } + line-height: 35px; + text-align: center; + width: 35px; span { &:extend(.abs-visually-hidden all); } } } + + .actions-primary { + display: inline-block; + } } &-description { @@ -291,7 +314,7 @@ border: 1px solid @color-gray-light2; border-top: none; left: 0; - margin: 9px 0 0 -1px; + margin: 10px 0 0 -1px; padding: 0 9px 9px; position: absolute; right: -1px; @@ -307,13 +330,13 @@ } .actions-primary + .actions-secondary { - display: table-cell; - padding-left: 10px; + display: inline-block; vertical-align: middle; - width: 50%; > .action { - margin-right: 10px; + line-height: 35px; + text-align: center; + width: 35px; &:last-child { margin-right: 0; @@ -322,7 +345,7 @@ } .actions-primary { - display: table-cell; + display: inline-block; } } @@ -363,7 +386,7 @@ .products-grid { .product-item { margin-bottom: @indent__base; - width: 100%/3.04; + width: 100%/3; } } @@ -374,10 +397,24 @@ .page-products.page-layout-3columns { .products-grid { .product-item { - width: 100%/3.04; + margin-left: 2%; + width: calc(~'(100% - 4%) / 3'); + + &:nth-child(3n + 1) { + margin-left: 0; + } } } } + + .block.widget .products-grid .product-item, + .page-layout-1column .block.widget .products-grid .product-item, + .page-layout-3columns .block.widget .products-grid .product-item { + .product-item-inner { + box-shadow: 3px 6px 4px 0 rgba(0, 0, 0, .3); + margin: 9px 0 0 -1px; + } + } } // @@ -388,7 +425,12 @@ .page-products { .products-grid { .product-item { - width: 100%/3.04; + margin-left: 2%; + width: calc(~'(100% - 4%) / 3'); + + &:nth-child(3n + 1) { + margin-left: 0; + } } } } @@ -441,9 +483,13 @@ } .product-item { - margin-left: calc(~'(100% - 4 * 24.439%) / 3'); + margin-left: 2%; padding: 5px; - width: 24.09%; + width: calc(~'(100% - 6%)/4'); + + &:nth-child(3n + 1) { + margin-left: 2%; + } &:nth-child(4n + 1) { margin-left: 0;