[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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user