[FIX] website_quote: set correct fixed sidebar width

The sidebar on the left of the quotation previews was placed with
position fixed in a col-md-3. Position fixed elements have their
width computed according to the window dimensions which is why it
cannot be 100% to fit the col-md-3. To achieve that, the old solution
was to set the width in pixel according to the viewport dimension (and
the size a col-md-3 has in each of this dimension). This was too easily
breakable. Indeed in the avantgarde theme, the .container is set to
smaller dimensions. So the col-md-3 is smaller too and then the fixed
width sidebar overflows.

To achieve the desired behaviour, javascript is needed. In CSS, the
position is set to "relative" and the width to "100%" so that the
sidebar fits the col-md-3 width no matter what. Then on page load and
on window resize, the sidebar is set to position "fixed" and to a
px-based width which equals its current and default 100%-width.

2 files changed, 19 insertions, 16 deletions

diff --git a/addons/website_quote/static/src/css/website_quotation.css b/addons/website_quote/static/src/css/website_quotation.css
index 6d32f06ab96..30ba234d14b 100644
--- a/addons/website_quote/static/src/css/website_quotation.css
+++ b/addons/website_quote/static/src/css/website_quotation.css
@@ -1,17 +1,11 @@
 .o_website_quote .bs-sidebar {
-  position: fixed;
+  position: relative;
+  width: 100%;
   z-index : 1;
   background-color: #f7f5fa;
   border-radius: 5px;
 }
 
-/* mobile preview: the left menu overlaps the quote */
-@media (max-width: 992px) {
-  .o_website_quote .bs-sidebar {
-    position: relative;
-  }
-}
-
 .o_website_quote .bs-sidenav {
    padding-top: 10px;
    padding-bottom: 10px;
@@ -56,14 +50,6 @@
   .o_website_quote .bs-sidebar .nav > .active > ul {
     display: block;
   }
-  .o_website_quote .bs-sidebar {
-    width: 213px;
-  }
-}
-@media (min-width: 1200px) {
-  .o_website_quote .bs-sidebar {
-    width: 263px;
-  }
 }
 @media print {
     body {
diff --git a/addons/website_quote/static/src/js/website_quotation.js b/addons/website_quote/static/src/js/website_quotation.js
index 2ff25986179..798b1ec5a76 100644
--- a/addons/website_quote/static/src/js/website_quotation.js
+++ b/addons/website_quote/static/src/js/website_quotation.js
@@ -2,6 +2,7 @@ odoo.define('website_quote.website_quote', function (require) {
 'use strict';
 
 var ajax = require('web.ajax');
+var config = require('web.config');
 var Widget = require('web.Widget');
 var website = require('website.website');
 
@@ -175,6 +176,22 @@ if(!$('.o_website_quote').length) {
     nav_menu.setElement($('[data-id="quote_sidebar"]'));
     nav_menu.start($('body[data-target=".navspy"]'));
 
+    var $bs_sidebar = $(".o_website_quote .bs-sidebar");
+    $(window).on('resize', _.throttle(adapt_sidebar_position, 200, {leading: false}));
+    adapt_sidebar_position();
+
+    function adapt_sidebar_position() {
+        $bs_sidebar.css({
+            position: "",
+            width: "",
+        });
+        if (config.device.size_class >= config.device.SIZES.MD) {
+            $bs_sidebar.css({
+                position: "fixed",
+                width: $bs_sidebar.outerWidth(),
+            });
+        }
+    }
 });
 
 odoo.define('website_quote.payment_method', function (require) {