[IMP] web: improve kanban mobile

Improve the mobile kanban when it's embedded in another view like
the Dashboard app

- Improve swipe: Allow to swipe on empty space
- When it's embedded :
     - The Kanban column height now is fit to the content
     - A empty space is now display if the Kanban column is empty

Task Id: 1904747

3 files changed, 19 insertions, 9 deletions

diff --git a/addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js b/addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js
index 8619448e793..b5aa4945364 100644
--- a/addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js
+++ b/addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js
@@ -111,8 +111,8 @@ KanbanRenderer.include({
      */
     _enableSwipe: function () {
         var self = this;
-        var currentColumn = this.widgets[this.activeColumnIndex];
-        currentColumn.$el.swipe({
+        this.$el.swipe({
+            excludedElements: ".o_kanban_mobile_tabs",
             swipeLeft: function () {
                 self._moveToGroup(self.activeColumnIndex + 1, self.ANIMATE);
             },
@@ -143,7 +143,7 @@ KanbanRenderer.include({
             onSuccess: function () {
                 // update the columns and tabs positions (optionally with an animation)
                 var updateFunc = animate ? 'animate' : 'css';
-                self.$('.o_kanban_mobile_tab').removeClass('o_current');
+                self.$('.o_kanban_mobile_tab, .o_kanban_group').removeClass('o_current');
                 _.each(self.widgets, function (column, index) {
                     var columnID = column.id || column.db_id;
                     var $column = self.$('.o_kanban_group[data-id="' + columnID + '"]');
@@ -157,7 +157,7 @@ KanbanRenderer.include({
                     } else if (index === moveToIndex) {
                         $column[updateFunc]({left: '0%'});
                         $tab[updateFunc]({left: '50%'});
-                        $tab.addClass('o_current');
+                        $tab.add($column).addClass('o_current');
                     } else if (index < moveToIndex) {
                         $column.css({left: '-100%'});
                         $tab[updateFunc]({left: '-100%'});
@@ -176,6 +176,7 @@ KanbanRenderer.include({
      * @private
      */
     _renderGrouped: function (fragment) {
+        var result = this._super.apply(this, arguments);
         var data = [];
         _.each(this.state.data, function (group) {
             if (!group.value) {
@@ -187,11 +188,10 @@ KanbanRenderer.include({
             }
         });
 
-        var $tabs = $(qweb.render('KanbanView.MobileTabs', {
+        $(qweb.render('KanbanView.MobileTabs', {
             data: data,
-        }));
-        $tabs.appendTo(fragment);
-        return this._super.apply(this, arguments);
+        })).prependTo(fragment);
+        return result;
     },
     /**
      * @override
diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss
index b74ae8aaea5..53dc200f398 100644
--- a/addons/web/static/src/scss/kanban_view_mobile.scss
+++ b/addons/web/static/src/scss/kanban_view_mobile.scss
@@ -36,6 +36,16 @@
             margin-left: 0; // override the margin-left: -1px of the desktop mode
             border: none;
 
+            &.o_current {
+                position: inherit;
+                top: 0;
+
+                &.o_kanban_no_records {
+                    // set a default height for clarity when embedded in another view
+                    min-height: $o-kanban-mobile-empty-height;
+                }
+            }
+
             .o_kanban_header {
                 display: none;
             }
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index 2bdc03a132b..5196805625d 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -106,7 +106,7 @@ $o-kanban-inner-hmargin: 5px;
 $o-kanban-progressbar-height: 20px;
 
 $o-kanban-mobile-tabs-height: 40px;
-
+$o-kanban-mobile-empty-height: $o-kanban-image-width;
 // ------- Kanban dashboard variables -------
 
 // Used to manage spacing in complex dropdown menu