[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.
This commit is contained in:
qsm-odoo
2016-08-04 11:04:12 +02:00
parent efdce58913
commit 566e0a2706
2 changed files with 19 additions and 16 deletions
@@ -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 {
@@ -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) {