[REF] point_of_sale: product configurator UX for radio input

The product configurator modal was too wide and the items were not correctly aligned. This commit changes the general aspect of the radio input and add responsiveness.

task-2492631

addons/point_of_sale/static/src/css/pos.css

@@ -2475,8 +2475,8 @@ td {
     transform: translate(-50%, -50%);
 }
 
-.pos .modal-dialog .popup-lg{
-    max-width: 80%;
+.pos .modal-dialog .popup-med{
+    max-width: 700px;
     max-height: 600px;
     height: auto;
 }
@@ -2494,7 +2494,7 @@ td {
     margin: 16px;
 }
 
-.pos .popup-lg .body {
+.pos .popup-med .body {
     max-height: 400px;
     overflow-y: auto;
 }
@@ -3010,16 +3010,7 @@ td {
 
 .pos .product_configurator_attributes .attribute {
     margin-bottom: 1em;
-    display: inline-block;
-    width: 45%;
     padding-left: 0.5em;
-    vertical-align: top;
-}
-
-@media screen and (max-width: 768px) {
-    .pos .product_configurator_attributes .attribute {
-        width: 95%;
-    }
 }
 
 .pos .product_configurator_attributes .attribute_name {
@@ -3038,17 +3029,31 @@ td {
     line-height: 1.5;
 }
 
+.pos .product_configurator_attributes .configurator_radio .table {
+    display: grid;
+    grid-template-columns: max-content max-content 1fr;
+    grid-template-rows: max-content;
+}
+
+.pos .product_configurator_attributes .configurator_radio .table div {
+    margin: 5px 0;
+}
+
+.pos .product_configurator_attributes .configurator_radio .attribute-name-cell {
+    grid-column: 1;
+    word-break: break-word;
+    max-width: 300px;
+}
+
+.pos .product_configurator_attributes .configurator_radio .price-extra-cell {
+    grid-column: 2;
+}
+
 .pos .product_configurator_attributes .configurator_radio input[type='radio'] {
     box-shadow: none;
     margin-right: 0.5em;
 }
 
-.pos .product_configurator_attributes .configurator_radio .radio_attribute_label {
-    font-weight: normal;
-    display: inline-block;
-    width: 80%;
-}
-
 .pos .product_configurator_attributes .configurator_radio .price_extra {
     margin-left: 0.5em;
     padding: 0.2em 0.4em;
@@ -3058,7 +3063,9 @@ td {
 }
 
 .pos .product_configurator_attributes .configurator_radio .custom_value {
-    margin: 0.3em 1.3em;
+    margin-left: 0.5em;
+    height: 1.3em;
+
 }
 
 /** Selector attribute **/
@@ -3111,6 +3118,21 @@ td {
     margin: 18px;
 }
 
+@media screen and (max-width: 768px) {
+    .pos .product_configurator_attributes .attribute {
+        width: 95%;
+    }
+
+    .pos .product_configurator_attributes .configurator_radio .attribute-name-cell {
+        max-width: 190px;
+    }
+
+    .pos .product_configurator_attributes .configurator_radio .custom-value-cell {
+        grid-column: 1 / 3;
+        justify-self: center;
+    }
+}
+
 /* TICKET SCREEN */
 
 .ticket-screen {

addons/point_of_sale/static/src/xml/Popups/ProductConfiguratorPopup.xml

@@ -3,7 +3,7 @@
 
     <t t-name="ProductConfiguratorPopup" owl="1">
         <div role="dialog" class="modal-dialog">
-            <div class="popup popup-text popup-lg product-configurator-popup">
+            <div class="popup popup-text popup-med product-configurator-popup">
                 <header class="title">
                     <t t-esc="props.product.display_name" />
                 </header>
@@ -31,22 +31,28 @@
 
     <t t-name="RadioProductAttribute" owl="1">
         <div class="configurator_radio">
-            <div t-foreach="values" t-as="value">
-                <input type="radio" t-model="state.selected_value" t-att-name="attribute.id"
-                    t-attf-id="{{ attribute.id }}_{{ value.id }}" t-att-value="value.id"/>
-
-                <label t-attf-for="{{ attribute.id }}_{{ value.id }}">
-                    <div class="radio_attribute_label">
-                        <t t-esc="value.name"/>
-                        <span t-if="value.price_extra" class="price_extra">
-                            + <t t-esc="env.pos.format_currency(value.price_extra)"/>
-                        </span>
+            <div class="table">
+                <t t-foreach="values" t-as="value">
+                    <div class="attribute-name-cell">
+                        <input type="radio" t-model="state.selected_value" t-att-name="attribute.id"
+                                   t-attf-id="{{ attribute.id }}_{{ value.id }}" t-att-value="value.id"/>
+                        <label t-attf-for="{{ attribute.id }}_{{ value.id }}">
+                                <t t-esc="value.name"/>
+                        </label>
                     </div>
-
-                    <t t-if="value.id == state.selected_value &amp;&amp; value.is_custom">
-                        <input class="custom_value" type="text" t-model="state.custom_value"/>
-                    </t>
-                </label>
+                    <div t-if="value.price_extra" class="price-extra-cell">
+                        <label t-attf-for="{{ attribute.id }}_{{ value.id }}">
+                            <span class="price_extra">
+                                + <t t-esc="env.pos.format_currency(value.price_extra)"/>
+                            </span>
+                        </label>
+                    </div>
+                    <div t-if="value.id == state.selected_value &amp;&amp; value.is_custom" class="custom-value-cell">
+                        <label t-attf-for="{{ attribute.id }}_{{ value.id }}">
+                            <input class="custom_value" type="text" t-model="state.custom_value"/>
+                        </label>
+                    </div>
+                </t>
             </div>
         </div>
     </t>

addons/point_of_sale/static/tests/tours/helpers/ProductConfiguratorTourMethods.js

@@ -8,7 +8,7 @@ odoo.define('point_of_sale.tour.ProductConfiguratorTourMethods', function (requi
             return [
                 {
                     content: `picking radio attribute with name ${name}`,
-                    trigger: `.product-configurator-popup .radio_attribute_label:contains('${name}')`,
+                    trigger: `.product-configurator-popup .attribute-name-cell label:contains('${name}')`,
                 },
             ];
         }