[FIX] onboarding: Fix/Update onboarding to v2.0

Specification
=============

- Fix lots of bug due to the BS4 migration
- Improve steps
- Validate some steps (Like the company configuration) in all the
  onboarding bars if done in one onboarding bar.
- Only animate the confetti one time if a step is done, instead of
  on each view loading

For more information, see: https://www.odoo.com/web#id=1869513&action=333&active_id=965&model=project.task&view_type=form&menu_id=4720

3 files changed, 33 insertions, 23 deletions

diff --git a/addons/web/static/src/js/views/abstract_controller.js b/addons/web/static/src/js/views/abstract_controller.js
index ef95ea72696..aed09c363cc 100644
--- a/addons/web/static/src/js/views/abstract_controller.js
+++ b/addons/web/static/src/js/views/abstract_controller.js
@@ -283,22 +283,22 @@ var AbstractController = AbstractAction.extend(ControlPanelMixin, {
         });
     },
    /**
-     * Renders the html provided by the route specified by the
-     * bannerRoute attribute on the controller (banner_route in the template).
-     * Renders it before the view output and add a css class 'o_has_banner' to it.
-     * There can be only one banner displayed at a time.
-     *
-     * If the banner contains stylesheet links, they are moved to <head>
-     * (and will only be fetched once).
-     *
-     * Route example:
-     * @http.route('/module/hello', auth='user', type='json')
-     * def hello(self):
-     *     return {'html': '<h1>hello, world</h1>'}
-     *
-     * @private
-     * @returns {Deferred}
-     */
+    * Renders the html provided by the route specified by the
+    * bannerRoute attribute on the controller (banner_route in the template).
+    * Renders it before the view output and add a css class 'o_has_banner' to it.
+    * There can be only one banner displayed at a time.
+    *
+    * If the banner contains stylesheet links or js files, they are moved to <head>
+    * (and will only be fetched once).
+    *
+    * Route example:
+    * @http.route('/module/hello', auth='user', type='json')
+    * def hello(self):
+    *     return {'html': '<h1>hello, world</h1>'}
+    *
+    * @private
+    * @returns {Deferred}
+    */
     _renderBanner: function () {
         if (this.bannerRoute !== undefined) {
             var self = this;
@@ -315,13 +315,16 @@ var AbstractController = AbstractAction.extend(ControlPanelMixin, {
                     if (self._$banner && self._$banner.remove) {
                         self._$banner.remove();
                     }
-                    // Stylesheets are moved to <head> and we wait for them to be loaded
-                    // to prevent displaying unstyled content.
+                    // Css and js are moved to <head>
                     var defs = [];
                     $('link[rel="stylesheet"]', $banner).each(function (i, link) {
                         defs.push(ajax.loadCSS(link.href));
                         link.remove();
                     });
+                    $('script[type="text/javascript"]', $banner).each(function (i, js) {
+                        defs.push(ajax.loadJS(js.src));
+                        js.remove();
+                    });
                     return $.when.apply($, defs).then(function () {
                         $banner.prependTo(self.$el);
                         self._$banner = $banner;
diff --git a/addons/web/static/src/scss/banner.scss b/addons/web/static/src/scss/banner.scss
index b119d9ab273..d7237203897 100644
--- a/addons/web/static/src/scss/banner.scss
+++ b/addons/web/static/src/scss/banner.scss
@@ -1,5 +1,8 @@
 .o_has_banner {
     .o_view_nocontent {
         top: 30%;
+        @media screen and (max-height:  map-get($grid-breakpoints, 'md')) {
+            position: relative;
+        }
     }
 }
diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss
index 65c75b4d406..755572ceb25 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -607,17 +607,15 @@
     &.o_company_document_layout {
         .image_selection_container {
             div {
-                width: 50%;
+                display: inline-block;
                 img {
                     margin-left: 0 !important;
                 }
             }
         }
-        td {
-            padding: 0 45px 0 0;
-        }
         img[name="logo"] {
-            max-height: 300px;
+            max-height: 100px;
+            max-width: 300px;
         }
     }
 }
@@ -648,6 +646,12 @@
             width: 100%;
         }
     }
+    .o_onboarding_payment_acquirer_wizard {
+        a[type="action"] {
+            color: $link-color;
+            cursor: pointer;
+        }
+    }
 }
 
 @media print {