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

[FIX] website, website_sale: fix right corner ribbon

Browse Source 
Before this commit, when ribbon was at the right corner of a product
card, this ribbon hid the buttons in list view.

After this commit, in list view, we place the ribbon on the left to
avoid this bug. There was no better solution to fix this in stable.

task-2466120

closes odoo/odoo#67898

X-original-commit: dcddf2125652b03bf4bff385c074fef0b2096f1d
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Benjamin Vray
2021-03-15 18:19:44 +00:00
parent 374134a04c
commit 86a1b78f99
5 changed files with 44 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/scss/primary_variables.scss
+31
View File
@@ -376,3 +376,34 @@ $o-theme-font-configs: (
'url': 'Arvo:300,300i,400,400i,700,700i',
),
) !default;
//------------------------------------------------------------------------------
// Mixins
//------------------------------------------------------------------------------
@mixin o-ribbon-right() {
@include o-position-absolute($top: 0, $right: 0);
padding: 0.5rem $ribbon-padding;
// 0.708 is 1 - cos(45deg)
// Transforms are applied right-to-left
// Cannot use matrix because of the use of % values.
transform: translateX(calc(-0.708 * (100% - #{2 * $ribbon-padding}))) rotate(45deg) translateX(calc(100% - #{$ribbon-padding}));
transform-origin: top right;
};
@mixin o-ribbon-left() {
@include o-position-absolute($top: 0, $left: 0);
padding: 0.5rem $ribbon-padding;
transform: translateX(calc(0.708 * (100% - #{2 * $ribbon-padding}) - 100%)) rotate(-45deg) translateX($ribbon-padding);
transform-origin: top right;
};
@mixin o-tag-right() {
@include o-position-absolute($top: 0, $right: 0);
padding: 0.25rem 1rem;
};
@mixin o-tag-left() {
@include o-position-absolute($top: 0, $left: 0);
padding: 0.25rem 1rem;
};
addons/website/static/src/scss/website.scss
+5 -15
View File
@@ -1365,6 +1365,7 @@ header {
}
}
// Ribbons
$ribbon-padding: 100px;
.o_ribbon {
margin: 0;
@@ -1376,30 +1377,19 @@ $ribbon-padding: 100px;
}
.o_ribbon_right {
@include o-position-absolute($top: 0, $right: 0);
padding: 0.5rem $ribbon-padding;
// 0.708 is 1 - cos(45deg)
// Transforms are applied right-to-left
// Cannot use matrix because of the use of % values.
transform: translateX(calc(-0.708 * (100% - #{2 * $ribbon-padding}))) rotate(45deg) translateX(calc(100% - #{$ribbon-padding}));
transform-origin: top right;
@include o-ribbon-right();
}
.o_ribbon_left {
@include o-position-absolute($top: 0, $left: 0);
padding: 0.5rem $ribbon-padding;
transform: translateX(calc(0.708 * (100% - #{2 * $ribbon-padding}) - 100%)) rotate(-45deg) translateX($ribbon-padding);
transform-origin: top right;
@include o-ribbon-left();
}
.o_tag_right {
@include o-position-absolute($top: 0, $right: 0);
padding: 0.25rem 1rem;
@include o-tag-right();
}
.o_tag_left {
@include o-position-absolute($top: 0, $left: 0);
padding: 0.25rem 1rem;
@include o-tag-left();
}
// Cookies Bar
addons/website_sale/i18n/website_sale.pot
+1 -1
View File
@@ -2206,7 +2206,7 @@ msgstr ""
#. module: website_sale
#: model_terms:ir.ui.view,arch_db:website_sale.snippet_options
msgid "Right"
msgid "Right (only on grid view)"
msgstr ""
#. module: website_sale
addons/website_sale/static/src/scss/website_sale.scss
+6
View File
@@ -278,6 +278,12 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
background-color: $white !important;
}
}
.o_ribbon_right {
@include o-ribbon-left();
}
.o_tag_right {
@include o-tag-left();
}
}
}
}
addons/website_sale/views/snippets/snippets.xml
+1 -1
View File
@@ -81,7 +81,7 @@
</we-select>
<we-select string="⌙ Position">
<we-button data-set-ribbon-position="left">Left</we-button>
<we-button data-set-ribbon-position="right">Right</we-button>
<we-button data-set-ribbon-position="right">Right (only on grid view)</we-button>
</we-select>
</div>