From c98d360726c9733904ef18f49f6a3684f24bb0ee Mon Sep 17 00:00:00 2001 From: snt Date: Sun, 29 Mar 2026 17:48:13 +0200 Subject: [PATCH 1/2] Keep active multimedia player visible in product list --- website_sale_product_library/__manifest__.py | 1 + .../static/src/js/multimedia_hover_player.js | 40 +++++++++++++++++++ .../static/src/scss/custom.scss | 4 +- 3 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 website_sale_product_library/static/src/js/multimedia_hover_player.js diff --git a/website_sale_product_library/__manifest__.py b/website_sale_product_library/__manifest__.py index 1219a10..e7afb7f 100644 --- a/website_sale_product_library/__manifest__.py +++ b/website_sale_product_library/__manifest__.py @@ -21,6 +21,7 @@ Modifica la tienda online con los campos de product_library. "data": ["views/website_sale_views.xml"], "assets": { "web.assets_frontend": [ + "website_sale_product_library/static/src/js/multimedia_hover_player.js", "website_sale_product_library/static/src/scss/custom.scss", ], }, diff --git a/website_sale_product_library/static/src/js/multimedia_hover_player.js b/website_sale_product_library/static/src/js/multimedia_hover_player.js new file mode 100644 index 0000000..a2a0647 --- /dev/null +++ b/website_sale_product_library/static/src/js/multimedia_hover_player.js @@ -0,0 +1,40 @@ +/** @odoo-module */ + +(function () { + const ACTIVE_CLASS = 'o_multimedia_player_active'; + + function getProductCard(el) { + return el && el.closest('.oe_product_cart'); + } + + function activateCard(card) { + if (!card) { + return; + } + + const cards = document.querySelectorAll('.oe_product_cart.' + ACTIVE_CLASS); + cards.forEach((c) => { + if (c !== card) { + c.classList.remove(ACTIVE_CLASS); + } + }); + + card.classList.add(ACTIVE_CLASS); + } + + document.addEventListener('click', (ev) => { + const player = ev.target.closest('.o_multimedia_hover_player'); + if (!player) { + return; + } + activateCard(getProductCard(player)); + }); + + document.addEventListener('focusin', (ev) => { + const iframe = ev.target.closest('.o_multimedia_hover_player iframe'); + if (!iframe) { + return; + } + activateCard(getProductCard(iframe)); + }); +})(); diff --git a/website_sale_product_library/static/src/scss/custom.scss b/website_sale_product_library/static/src/scss/custom.scss index 985ea53..8334aa0 100644 --- a/website_sale_product_library/static/src/scss/custom.scss +++ b/website_sale_product_library/static/src/scss/custom.scss @@ -18,7 +18,9 @@ } .oe_product_cart:hover .o_multimedia_hover_player, -.o_multimedia_hover_player:hover { +.o_multimedia_hover_player:hover, +.oe_product_cart.o_multimedia_player_active .o_multimedia_hover_player, +.o_multimedia_hover_player:focus-within { max-height: 60px; opacity: 1; pointer-events: auto; From 574ceeb6197e1303995ffaa6f2161caad245189c Mon Sep 17 00:00:00 2001 From: snt Date: Sun, 29 Mar 2026 17:58:07 +0200 Subject: [PATCH 2/2] [IMP] website_description_internal: estilo comercial con paleta por defecto de Odoo --- .../static/src/scss/custom.scss | 94 +++++++++++++++++-- 1 file changed, 87 insertions(+), 7 deletions(-) diff --git a/website_description_internal/static/src/scss/custom.scss b/website_description_internal/static/src/scss/custom.scss index 9fcd26c..a2f5128 100644 --- a/website_description_internal/static/src/scss/custom.scss +++ b/website_description_internal/static/src/scss/custom.scss @@ -1,9 +1,89 @@ .custom_website_description { - font-size: 18px; - color: #333; - line-height: 1.5; - padding: 15px; - background-color: #efefff; - border: 1px solid #99c; - border-radius: 12px; + --odoo-primary: var(--o-color-1, #875a7b); + --odoo-text: var(--o-cc1-text, #212529); + --odoo-bg: var(--o-cc1-bg, #ffffff); + + max-width: 1100px; + margin: 0 auto; + font-size: clamp(16px, 1.05vw, 18px); + color: var(--odoo-text); + line-height: 1.72; + letter-spacing: 0.01em; + padding: 28px; + background-color: var(--odoo-bg); + border: 1px solid rgba(135, 90, 123, 0.25); + border-top: 4px solid var(--odoo-primary); + border-radius: 14px; + box-shadow: 0 10px 26px rgba(135, 90, 123, 0.12); + column-count: 2; + column-gap: 36px; + column-fill: balance; + text-wrap: pretty; + hyphens: auto; +} + +.custom_website_description p, +.custom_website_description ul, +.custom_website_description ol { + margin-top: 0; + margin-bottom: 0.9em; +} + +.custom_website_description ul, +.custom_website_description ol { + padding-left: 1.2em; +} + +.custom_website_description h1, +.custom_website_description h2, +.custom_website_description h3, +.custom_website_description h4, +.custom_website_description h5, +.custom_website_description h6 { + color: var(--odoo-primary); + line-height: 1.3; + margin: 0 0 0.55em; + break-after: avoid; +} + +.custom_website_description ul li::marker, +.custom_website_description ol li::marker { + color: var(--odoo-primary); +} + +.custom_website_description a { + color: var(--odoo-primary); + text-decoration-thickness: 0.08em; + text-underline-offset: 0.12em; +} + +.custom_website_description blockquote { + border-left: 4px solid var(--odoo-primary); + margin: 0.9em 0; + padding: 0.25em 0 0.25em 1em; + color: var(--odoo-text); + background-color: rgba(135, 90, 123, 0.06); +} + +.custom_website_description p, +.custom_website_description li, +.custom_website_description h1, +.custom_website_description h2, +.custom_website_description h3, +.custom_website_description h4, +.custom_website_description h5, +.custom_website_description h6, +.custom_website_description blockquote, +.custom_website_description img, +.custom_website_description table { + break-inside: avoid; +} + +@media (max-width: 991.98px) { + .custom_website_description { + column-count: 1; + column-gap: 0; + padding: 20px; + line-height: 1.66; + } }