pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website_sale: design fixes

Browse Source 
Solve multiple issues on the products grid, causing:
- the ribbon to be wrongly positioned
- the layout to be broken on Firefox
- the products' images ratio to be incorrect on Safari

task #2710553

closes odoo/odoo#81150

Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>
This commit is contained in:
stefanorigano (SRI)
2021-12-23 16:43:01 +00:00
parent 88008a8247
commit b0bf660c77
2 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_sale/static/src/scss/website_sale.scss
-1
View File
@@ -299,7 +299,6 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
@include media-breakpoint-up(lg) {
td.oe_product {
height: 1px; // Will adapt to its content
padding-bottom: $o-wsale-products-layout-grid-gutter-width * .5;
.o_wsale_product_btn {
addons/website_sale/views/templates.xml
+7 -7
View File
@@ -163,14 +163,18 @@
<form action="/shop/cart/update" method="post" class="oe_product_cart h-100 d-flex"
t-att-data-publish="product.website_published and 'on' or 'off'"
itemscope="itemscope" itemtype="http://schema.org/Product">
<!-- <a class="o_product_link css_editable_mode_hidden" t-att-href="product_href"/> -->
<div class="oe_product_image position-relative h-100 flex-grow-0">
<div class="oe_product_image position-relative h-100 flex-grow-0 overflow-hidden">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
<a t-att-href="product_href" class="oe_product_image_link d-block h-100 position-relative" itemprop="url" contenteditable="false">
<t t-set="image_holder" t-value="product._get_image_holder()"/>
<span t-field="image_holder.image_1920"
t-options="{'widget': 'image', 'preview_image': 'image_1024', 'itemprop': 'image', 'class': 'h-100 w-100'}"
t-options="{'widget': 'image', 'preview_image': 'image_1024', 'itemprop': 'image', 'class': 'h-100 w-100 position-absolute'}"
class="oe_product_image_img_wrapper d-flex h-100 justify-content-center align-items-center position-absolute"/>
<t t-set="bg_color" t-value="td_product['ribbon']['bg_color'] or ''"/>
<t t-set="text_color" t-value="td_product['ribbon']['text_color']"/>
<t t-set="bg_class" t-value="td_product['ribbon']['html_class']"/>
<span t-attf-class="o_ribbon #{bg_class}" t-attf-style="#{text_color and ('color: %s; ' % text_color)}#{bg_color and 'background-color:' + bg_color}" t-out="td_product['ribbon']['html'] or ''"/>
</a>
</div>
<div class="o_wsale_product_information position-relative d-flex flex-column flex-grow-1 flex-shrink-1">
@@ -192,10 +196,6 @@
</div>
</div>
</div>
<t t-set="bg_color" t-value="td_product['ribbon']['bg_color'] or ''"/>
<t t-set="text_color" t-value="td_product['ribbon']['text_color']"/>
<t t-set="bg_class" t-value="td_product['ribbon']['html_class']"/>
<span t-attf-class="o_ribbon #{bg_class}" t-attf-style="#{text_color and ('color: %s; ' % text_color)}#{bg_color and 'background-color:' + bg_color}" t-out="td_product['ribbon']['html'] or ''"/>
</form>
</template>