From b04c670ba0407e1bc72e71f6180052fc037f1dcd Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Fri, 25 Sep 2020 07:09:25 +0000
Subject: [PATCH] [IMP] web: improve Export Data UI on mobile

This commit improves the UI of the Export Data action's modal on mobile
screens:
* open it full-screen
* 2 main panels are one after the other (side-by-side on desktop)

Task ID: 1879566
---
 addons/web/static/src/js/widgets/data_export.js |  1 +
 addons/web/static/src/scss/data_export.scss     | 17 ++++++++++++++---
 addons/web/static/src/xml/base.xml              |  6 +++---
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/addons/web/static/src/js/widgets/data_export.js b/addons/web/static/src/js/widgets/data_export.js
index 87900f9f0aa..61b2cffe862 100644
--- a/addons/web/static/src/js/widgets/data_export.js
+++ b/addons/web/static/src/js/widgets/data_export.js
@@ -41,6 +41,7 @@ var DataExport = Dialog.extend({
                 {text: _t("Export"), click: this._onExportData, classes: 'btn-primary'},
                 {text: _t("Close"), close: true},
             ],
+            fullscreen: config.device.isMobile,
         };
         this._super(parent, options);
         this.records = {};
diff --git a/addons/web/static/src/scss/data_export.scss b/addons/web/static/src/scss/data_export.scss
index f52bcf10383..d78d8341017 100644
--- a/addons/web/static/src/scss/data_export.scss
+++ b/addons/web/static/src/scss/data_export.scss
@@ -1,10 +1,8 @@
 .o_web_client .o_export {
-    padding: 20px;
     .o-export-panel {
         height: 100%;
     }
     .o_left_panel {
-        padding-right: 10px;
         flex-flow: column nowrap;
         height: 100%;
         .o_left_field_panel {
@@ -30,7 +28,6 @@
     }
 
     .o_right_panel {
-        padding-left: 10px;
         flex-flow: column nowrap;
         height: 100%;
         .o_save_list {
@@ -50,4 +47,18 @@
             }
         }
     }
+
+    @include media-breakpoint-down(sm) {
+        .ui-sortable-handle {
+            display: none;
+        }
+
+        .o_right_field_panel .o_export_field {
+            padding-left: map-get($spacers, 1);
+        }
+
+        .o_left_panel, .o_right_panel {
+            height: 50%;
+        }
+    }
 }
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 01d4942710e..7b4ae80f146 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1566,8 +1566,8 @@
 </div>
 
 <div t-name="ExportDialog" class="o_export">
-    <div class="row o-export-panel no-gutters">
-        <div class="col-6 d-flex o_left_panel">
+    <div class="row o-export-panel">
+        <div class="col-12 col-md-6 d-flex o_left_panel">
             <div class="form-check o_import_compat">
                 <input class="form-check-input" id="o-update-data" type="checkbox"/>
                 <label class="form-check-label" for="o-update-data">
@@ -1582,7 +1582,7 @@
             </div>
             <div class="border o_left_field_panel"/>
         </div>
-        <div class="col-6 d-flex o_right_panel">
+        <div class="col-12 col-md-6 d-flex o_right_panel mt-3 mt-md-0">
             <div class="o_export_format">
                 <strong>Export Format:</strong>
             </div>