diff --git a/css/global.css b/css/global.css index e86d889..75b2fbb 100644 --- a/css/global.css +++ b/css/global.css @@ -9804,6 +9804,73 @@ ul.address { font-size: 17px; } +.product_list_column { + text-align: center; +} + +.product_list_column article { + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid #eee; +} + +.product_list_column article .product-price-button-wrapper, .product_list_column article .button-container { + margin: 10px 0; +} + +.product_list_column article .product-container { + margin: 0; +} + +.product_list_column .product-image-container { + position: relative; +} + +.product_list_column .product-image-container .quick-view { + position: absolute; + right: 0; + bottom: 0; +} + +.product_list_column .functional-buttons { + text-align: left; +} + +.product_list_column .price.product-price { + color: #ff6f61; + font-size: 1.3em; +} + +@media (min-width: 480px) and (max-width: 767px) { + .product_list_column > li { + width: 50%; + float: left; + } + .product_list_column > li:nth-child(odd) { + clear: left; + } +} + +.product_list_column .btn { + white-space: initial; +} + +.quick-view { + width: 50px; + height: 50px; + line-height: 50px; + text-align: center; + display: block; + background: rgba(255, 255, 255, 0.7); + font-size: 16px; +} + +@media (max-width: 991px) { + .quick-view { + display: none; + } +} + .instant_search .productsSortForm { display: none; } diff --git a/css/product_list.css b/css/product_list.css index 5119a60..1758e00 100644 --- a/css/product_list.css +++ b/css/product_list.css @@ -56,22 +56,6 @@ h1.product-listing { transition: opacity .5s linear; } -.quick-view { - width: 50px; - height: 50px; - line-height: 50px; - text-align: center; - display: block; - background: rgba(255, 255, 255, 0.7); - font-size: 16px; -} - -@media (max-width: 991px) { - .quick-view { - display: none; - } -} - .color-list-container { display: none; margin-bottom: 10px; diff --git a/modules/blockbestsellers/blockbestsellers.tpl b/modules/blockbestsellers/blockbestsellers.tpl index 20e52f0..527cd8e 100644 --- a/modules/blockbestsellers/blockbestsellers.tpl +++ b/modules/blockbestsellers/blockbestsellers.tpl @@ -23,7 +23,7 @@

{l s='What others' mod='blockbestsellers'} {l s='love' mod='blockbestsellers'} {l s='most' mod='blockbestsellers'}

{l s='Browse our top selling products.' mod='blockbestsellers'}

- {include file="$tpl_dir./product-list.tpl" products=$best_sellers class='blockbestsellers' id='blockbestsellers'} + {include file="$tpl_dir./product-list-column.tpl" products=$best_sellers class='blockbestsellers' id='blockbestsellers'} {else} + {/strip} + + {addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL} + {addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL} + {addJsDef comparator_max_item=$comparator_max_item} + {addJsDef comparedProductsIds=$compared_products} +{/if} diff --git a/sass/_theme_variables.scss b/sass/_theme_variables.scss index 8d9e98a..63c8dba 100644 --- a/sass/_theme_variables.scss +++ b/sass/_theme_variables.scss @@ -896,7 +896,9 @@ $dl-horizontal-breakpoint: $grid-float-breakpoint !default; $hr-border: $gray-lighter !default; - +//** Product List +$quick-view-btn-size: 50px; +$product-grid-item-hover-bg: #fff; diff --git a/sass/global.scss b/sass/global.scss index ee5313c..757070c 100644 --- a/sass/global.scss +++ b/sass/global.scss @@ -27,6 +27,7 @@ @import "partials/products"; @import "partials/boxes"; @import "partials/blocks"; +@import "partials/product_list_column"; @import "partials/sortbar"; @import "partials/pagination"; @import "partials/utilities"; diff --git a/sass/partials/_product_list_column.scss b/sass/partials/_product_list_column.scss new file mode 100644 index 0000000..ca58b24 --- /dev/null +++ b/sass/partials/_product_list_column.scss @@ -0,0 +1,57 @@ +.product_list_column { + text-align: center; + article { + + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid $ps-border-color; + .product-price-button-wrapper, .button-container { + margin: 10px 0; + } + .product-container { + margin: 0; + } + } + .product-image-container { + position: relative; + .quick-view { + position: absolute; + right: 0; + bottom: 0; + } + } + .functional-buttons { + text-align: left; + } + .price.product-price { + color: $brand-primary; + font-size: 1.3em; + } + .img-responsive { + //border: 1px solid #0a86bf; + } + > li { + @media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) { + width: 50%; + float: left; + &:nth-child(odd) { + clear: left; + } + } + } + .btn { + white-space: initial; + } +} +.quick-view { + width: $quick-view-btn-size; + height: $quick-view-btn-size; + line-height: $quick-view-btn-size; + text-align: center; + display: block; + background: rgba(255, 255, 255, 0.7); + font-size: 16px; + @media (max-width: $screen-sm-max) { + display: none; + } +} diff --git a/sass/product_list.scss b/sass/product_list.scss index 4ca4801..08cecca 100644 --- a/sass/product_list.scss +++ b/sass/product_list.scss @@ -2,8 +2,6 @@ @import "theme_variables"; @import "vendor_variables"; -$quick-view-btn-size: 50px; -$product-grid-item-hover-bg: #fff; h1.product-listing{ text-transform: uppercase; @@ -68,18 +66,6 @@ h1.product-listing{ // // Component classes // -.quick-view { - width: $quick-view-btn-size; - height: $quick-view-btn-size; - line-height: $quick-view-btn-size; - text-align: center; - display: block; - background: rgba(255, 255, 255, 0.7); - font-size: 16px; - @media (max-width: $screen-sm-max) { - display: none; - } -} .color-list-container { display: none;