Skip to content

Fixes for left column #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gregzawadzki wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Fixes for left column #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c932bed
Improved product list and split into 2
gregzawadzki Apr 8, 2020
442c4d7
blockbestsellers and blocknewproducts now use new left column tpl
gregzawadzki Apr 8, 2020
76a1af5
Added missing CSS for product list
gregzawadzki Apr 9, 2020
009ffb3
Mobile css fixes - 2 columns and adaptable buttons
gregzawadzki Apr 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions css/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
16 changes: 0 additions & 16 deletions css/product_list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion modules/blockbestsellers/blockbestsellers.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<h2><span class="tm-over">{l s='What others' mod='blockbestsellers'} <span>{l s='love' mod='blockbestsellers'}</span> {l s='most' mod='blockbestsellers'}</span></h2>
<p>{l s='Browse our top selling products.' mod='blockbestsellers'}</p>
</div>
{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}
<ul id="blockbestsellers" class="blockbestsellers">
<li class="alert alert-info">{l s='No best sellers at this time.' mod='blockbestsellers'}</li>
Expand Down
17 changes: 2 additions & 15 deletions modules/blocknewproducts/views/templates/hook/blocknewproducts.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,8 @@
<h4 class="title_block"><a href="{$link->getPageLink('new-products')|escape:'html'}" title="{l s='New products' mod='blocknewproducts'}">{l s='New products' mod='blocknewproducts'}</a></h4>
<div class="block_content">
{if $new_products !== false}
<ul class="product_images clearfix">
{$imageSize=Image::getSize('medium')}
{foreach from=$new_products item='product' name='newProducts'}
{if $smarty.foreach.newProducts.index < 2}
<li{if $smarty.foreach.newProducts.first} class="first"{/if}><a href="{$product.link|escape:'html'}" title="{$product.legend|escape:html:'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'medium')|escape:'html'}" height="{$imageSize.height}" width="{$imageSize.width}" alt="{$product.legend|escape:html:'UTF-8'}" /></a></li>
{/if}
{/foreach}
</ul>
<dl class="products">
{foreach from=$new_products item=newproduct name=myLoop}
<dt class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}"><a href="{$newproduct.link|escape:'html'}" title="{$newproduct.name|escape:html:'UTF-8'}">{$newproduct.name|strip_tags|escape:html:'UTF-8'}</a></dt>
{if $newproduct.description_short}<dd class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}"><a href="{$newproduct.link|escape:'html'}">{$newproduct.description_short|strip_tags:'UTF-8'|truncate:75:'...'}</a><br /><a href="{$newproduct.link}" class="lnk_more">{l s='Read more' mod='blocknewproducts'}</a></dd>{/if}
{/foreach}
</dl>
<p><a href="{$link->getPageLink('new-products')|escape:'html'}" title="{l s='All new products' mod='blocknewproducts'}" class="button_large">&raquo; {l s='All new products' mod='blocknewproducts'}</a></p>
{include file="$tpl_dir./product-list-column.tpl" products=$new_products class='blocknewproducts' id='blocknewproducts'}
<p><a href="{$link->getPageLink('new-products')|escape:'html'}" title="{l s='All new products' mod='blocknewproducts'}" class="btn btn-warning">&raquo; {l s='All new products' mod='blocknewproducts'}</a></p>
{else}
<p>&raquo; {l s='Do not allow new products at this time.' mod='blocknewproducts'}</p>
{/if}
Expand Down
22 changes: 22 additions & 0 deletions product-list-column.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{if !empty($products)}


{$show_functional_buttons = $page_name != 'index'}

{strip}
<ul{if !empty($id)} id="{$id}"{/if} class="product_list_column{if !empty($class)} {$class}{/if}">

{foreach from=$products item=product}
<li class="ajax_block_product">
{include file='./product-list-item.tpl' product=$product show_functional_buttons=false}
</li>
{/foreach}

</ul>
{/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}
4 changes: 3 additions & 1 deletion sass/_theme_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;



Expand Down
1 change: 1 addition & 0 deletions sass/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
57 changes: 57 additions & 0 deletions sass/partials/_product_list_column.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
14 changes: 0 additions & 14 deletions sass/product_list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down