[REF] web, *: BS4, update JS media queries

* website_quote, website_sale

4 files changed, 11 insertions, 10 deletions

diff --git a/addons/web/static/src/js/services/config.js b/addons/web/static/src/js/services/config.js
index d05a263ef4e..946f7d39f55 100644
--- a/addons/web/static/src/js/services/config.js
+++ b/addons/web/static/src/js/services/config.js
@@ -41,22 +41,23 @@ var config = {
         /**
          * A frequent use case is to have a different render in 'mobile' mode,
          * meaning when the screen is small.  This flag (boolean) is true when
-         * the size is XXS or XS. It is also updated dynamically.
+         * the size is XS/VSM/SM. It is also updated dynamically.
          *
          * @type Boolean
          */
         isMobile: null,
         /**
-         * Mapping between the numbers 0,1,2,3,4,5 and some descriptions
+         * Mapping between the numbers 0,1,2,3,4,5,6 and some descriptions
          */
-        SIZES: { XXS: 0, XS: 1, SM: 2, MD: 3, LG: 4, XL: 5 },
+        SIZES: { XS: 0, VSM: 1, SM: 2, MD: 3, LG: 4, XL: 5, XXL: 6 },
     },
 };
 
 
 var medias = [
     window.matchMedia('(max-width: 474px)'),
-    window.matchMedia('(min-width: 475px) and (max-width: 767px)'),
+    window.matchMedia('(min-width: 475px) and (max-width: 575px)'),
+    window.matchMedia('(min-width: 576px) and (max-width: 767px)'),
     window.matchMedia('(min-width: 768px) and (max-width: 991px)'),
     window.matchMedia('(min-width: 992px) and (max-width: 1199px)'),
     window.matchMedia('(min-width: 1200px) and (max-width: 1533px)'),
@@ -69,8 +70,8 @@ var medias = [
  * @returns {integer} a number between 0 and 5, included
  */
 function _getSizeClass() {
-    for(var i = 0 ; i < medias.length ; i++) {
-        if(medias[i].matches) {
+    for (var i = 0 ; i < medias.length ; i++) {
+        if (medias[i].matches) {
             return i;
         }
     }
@@ -83,7 +84,7 @@ function _updateSizeProps() {
     var sc = _getSizeClass();
     if (sc !== config.device.size_class) {
         config.device.size_class = sc;
-        config.device.isMobile = config.device.size_class <= config.device.SIZES.SM;
+        config.device.isMobile = config.device.size_class <= config.device.SIZES.MD;
     }
 }
 
diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index 1422392db41..a96742bd0e2 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -35,7 +35,7 @@ var FormRenderer = BasicRenderer.extend({
      * @override
      */
     start: function () {
-        if (config.device.size_class <= config.device.SIZES.XXS) {
+        if (config.device.size_class <= config.device.SIZES.XS) {
             this.$el.addClass('o_xxs_form_view');
         }
         return this._super.apply(this, arguments);
diff --git a/addons/web/static/src/js/views/graph/graph_renderer.js b/addons/web/static/src/js/views/graph/graph_renderer.js
index 1fbd6572a9a..686bbaee842 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -243,7 +243,7 @@ return AbstractRenderer.extend({
 
         svg.transition().duration(100);
 
-        var legend_right = config.device.size_class > config.device.SIZES.XS;
+        var legend_right = config.device.size_class > config.device.SIZES.VSM;
 
         var chart = nv.models.pieChart().labelType('percent');
         chart.options({
diff --git a/addons/web/static/src/js/views/search/search_view.js b/addons/web/static/src/js/views/search/search_view.js
index 9e1f70fec22..2bac31ed27f 100644
--- a/addons/web/static/src/js/views/search/search_view.js
+++ b/addons/web/static/src/js/views/search/search_view.js
@@ -535,7 +535,7 @@ var SearchView = Widget.extend({
      * puts the focus on the search input
      */
     _focusInput: function () {
-        if (!config.device.touch && config.device.size_class >= config.device.SIZES.SM) {
+        if (!config.device.touch && config.device.size_class >= config.device.SIZES.MD) {
             this.$('input').focus();
         }
     },