From b16d3bc576c87a820b56b24aed1d692292424f01 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Wed, 23 Mar 2022 13:27:15 +0100
Subject: [PATCH] [IMP] website: adapt configurator css to backend assets

Before, the configurator was using the frontend assets. When converting
it to a backend client action, it lost some styles. Some rules are added
to the configurator scss file to keep the structure that is had before.

See merge commit for more information.

task-2687506
---
 .../configurator/configurator.scss            | 41 +++++++++++++++++++
 .../configurator/configurator.xml             | 12 +++---
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/addons/website/static/src/client_actions/configurator/configurator.scss b/addons/website/static/src/client_actions/configurator/configurator.scss
index a3749ad4f03..d5f4f89e603 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.scss
+++ b/addons/website/static/src/client_actions/configurator/configurator.scss
@@ -1,5 +1,6 @@
 .o_configurator_container {
     @include o-position-absolute(0, 0, 0, 0);
+    background-color: $white;
 
     .o_configurator_screen {
 
@@ -110,6 +111,7 @@
                     border: none;
                     border-bottom: 3px solid theme-color(primary);
                     color: theme-color(primary);
+                    background-color: inherit;
 
                     &:focus {
                         color: inherit;
@@ -121,6 +123,7 @@
                     content: attr(data-value) '|';
                     display: inline-block;
                     overflow: hidden;
+                    opacity: 0;
                 }
             }
 
@@ -154,6 +157,7 @@
                 @include border-bottom-radius($border-radius);
                 font-size: inherit;
                 min-width: 100%;
+                overflow-y: auto;
             }
 
             .dropdown-item, .fa-angle-down, .ui-menu-item a, .ui-menu-item a.ui-state-active {
@@ -195,6 +199,31 @@
         }
 
         &.o_palette_selection_screen {
+            @include media-breakpoint-down(md) {
+                .o_detect_logo {
+                    width: 100% !important;
+                }
+
+                .o_content_container {
+                    height: 100% !important;
+                    flex-direction: column !important;
+                }
+
+                .o_palettes_separator {
+                    width: 100% !important;
+                }
+
+                .o_palettes_container {
+                    width: 100% !important;
+                }
+            }
+
+            @include media-breakpoint-down(sm) {
+                .o_palette_card_container {
+                    width: 50% !important;
+                }
+            }
+
             .palette_card {
                 cursor: pointer;
                 box-shadow: 0 0 0 1px gray('200');
@@ -238,6 +267,18 @@
         }
 
         &.o_feature_selection_screen {
+            @include media-breakpoint-down(md) {
+                .o_feature_card_container {
+                    width: 50% !important;
+                }
+            }
+
+            @include media-breakpoint-down(sm) {
+                .o_feature_card_container {
+                    width: 100% !important;
+                }
+            }
+
             .card {
                 cursor: pointer;
 
diff --git a/addons/website/static/src/client_actions/configurator/configurator.xml b/addons/website/static/src/client_actions/configurator/configurator.xml
index 8f03d25ca0a..e548b70a602 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.xml
+++ b/addons/website/static/src/client_actions/configurator/configurator.xml
@@ -93,8 +93,8 @@
             <img class="ml-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
         </div>
         <div class="o_configurator_screen_content container palette_selection d-flex flex-grow-1 h-100">
-            <div class="d-flex flex-column flex-lg-row w-100 h-100 h-lg-auto align-self-md-center o_configurator_show">
-                <div class="w-100 w-lg-25 order-lg-3 my-4 my-md-0 d-flex flex-column">
+            <div class="o_content_container d-flex flex-row w-100 h-auto align-self-md-center o_configurator_show">
+                <div class="o_detect_logo w-25 order-lg-3 my-4 my-md-0 d-flex flex-column">
                     <div class="h4 text-center">
                         <b>Detect</b> from Logo</div>
                     <div class="d-flex flex-column flex-grow-1 py-4">
@@ -122,17 +122,17 @@
                         </div>
                     </div>
                 </div>
-                <div class="position-relative d-flex justify-content-center order-lg-2 w-100 w-lg-0 py-3 py-lg-0 px-lg-5 mb-4 mb-lg-0">
+                <div class="o_palettes_separator position-relative d-flex justify-content-center order-lg-2 w-0 py-3 py-lg-0 px-lg-5 mb-4 mb-lg-0">
                     <div class="border-top w-100"></div>
                     <b class="palette_selection_or bg-white text-muted w-lg-100 text-center px-3 py-lg-3">OR</b>
                     <div class="border-left d-none d-lg-inline h-100 mx-auto w-0"></div>
                 </div>
-                <div class="w-100 w-lg-auto flex-grow-1 o_configurator_show_fast">
+                <div class="o_palettes_container w-auto flex-grow-1 o_configurator_show_fast">
                     <div class="h4 text-center">
                         <b>Choose</b> a pre-made Palette</div>
                     <div class="d-flex flex-wrap align-items-end">
                         <t t-foreach="state.getPalettes()" t-as="palette" t-key="palette_index">
-                            <div class="w-50 w-md-25 px-2 pt-3">
+                            <div class="o_palette_card_container w-25 px-2 pt-3">
                                 <div t-attf-class="palette_card rounded-pill overflow-hidden d-flex {{state.getSelectedPaletteName() == palette.name ? 'selected' : ''}}"
                                      t-on-click="() => this.selectPalette(palette.name)" t-attf-style="background-color: {{palette.color3}}">
                                     <div class="color_sample w-100" t-attf-style="background-color: {{palette.color1}}"/>
@@ -162,7 +162,7 @@
                     <div class="w-100 page_feature_selection d-flex flex-wrap">
                         <t t-foreach="state.getFeatures()" t-as="feature" t-key="feature_index">
                             <t t-set='isInstalled' t-value="feature.module_state == 'installed'"/>
-                            <div class="p-2 w-100 w-md-50 w-lg-25" t-if="feature.type != 'empty'">
+                            <div class="o_feature_card_container p-2 w-25" t-if="feature.type != 'empty'">
                                 <div t-attf-class="card h-100 {{isInstalled ? 'card_installed' : (feature.selected ? 'border-success' : '')}}" t-on-click="() => state.toggleFeature(feature.id)">
                                     <div class="card-body py-2">
                                         <t t-if="isInstalled">