Merge branch 'next' into 'master'

Next

See merge request !41

README.md

@@ -53,33 +53,25 @@ Developers
 
 - onQuiqqerOrderSuccessful [Order]
 - onQuiqqerOrderCreated [Order]
-
 - onQuiqqerOrderDeleteBegin [Order]
 - onQuiqqerOrderDelete [$orderId, $orderData]
-
 - onQuiqqerOrderCopyBegin [Order]
 - onQuiqqerOrderCopy [Order]
-
 - onQuiqqerOrderUpdateBegin [Order]
 - onQuiqqerOrderUpdate [Order]
-
 - quiqqerOrderOrderProcessCheckoutOutput [AbstractOrderingStep, &text]
-
 - onQuiqqerOrderPaidStatusChanged [Order, currentPaidStatus, previousPaidStatus]
 - onQuiqqerOrderProcessStatusChange [Order, QUI\ERP\Order\ProcessingStatus\Status]
-
 - quiqqerOrderCustomerDataSave [QUI\ERP\Order\Controls\OrderProcess\CustomerData]
 - quiqqerOrderCustomerDataSaveEnd [QUI\ERP\Order\Controls\OrderProcess\CustomerData]
-
 - quiqqerOrderBasketRemovePos [QUI\ERP\Order\Basket\Basket, pos]
 - quiqqerOrderBasketToOrder [QUI\ERP\Order\Basket\BasketOrder, $Order, QUI\ERP\Products\Product\ProductList]
-
 - onQuiqqerOrderProcessSendBegin [QUI\ERP\Order\OrderProcess]
 - onQuiqqerOrderProcessSendCreateOrder [QUI\ERP\Order\OrderProcess]
 - onQuiqqerOrderProcessSend [QUI\ERP\Order\OrderProcess]
-
 - onQuiqqerOrderCustomerChange [Order]
 - onQuiqqerOrderCustomerCustomerSet [Order]
+- onQuiqqerBasketImport [Basket Instance, ProductList]
 
 ### Order Events
 
@@ -91,12 +83,9 @@ Developers
 
 - onQuiqqer::order::orderProcessBasketBegin [Collector, Basket]
 - onQuiqqer::order::orderProcessBasketEnd [Collector, Basket]
-
 - onQuiqqer::order::orderProcessCustomerDataBegin [Collector, User, Address]
 - onQuiqqer::order::orderProcessCustomerData [Collector, User, Address]
 - onQuiqqer::order::orderProcessCustomerEnd [Collector, User, Address]
-
 - onQuiqqer::order::orderProcessCheckoutBegin [Collector, User, Order]
 - onQuiqqer::order::orderProcessCheckoutEnd [Collector, User, Order]
-
 - onQuiqqer::order::orderProcessFinish [Collector, User, Order]

bin/frontend/controls/OrderProcess.js

@@ -1104,10 +1104,10 @@ define('package/quiqqer/order/bin/frontend/controls/OrderProcess', [
             let leftPos = 0;
 
             if (typeof startDirection === 'undefined' || startDirection === -1) {
-                leftPos = -100;
+                leftPos = -10;
             } else {
                 if (startDirection === 1) {
-                    leftPos = 100;
+                    leftPos = 10;
                 }
             }
 
@@ -1155,12 +1155,10 @@ define('package/quiqqer/order/bin/frontend/controls/OrderProcess', [
                 html: StepContent.get('html'),
                 'class': 'quiqqer-order-ordering-step-next',
                 styles: {
-                    'float': 'left',
                     left: leftPos,
                     opacity: 0,
                     position: 'relative',
                     top: 0,
-                    width: '100%'
                 }
             });
 
@@ -1247,16 +1245,15 @@ define('package/quiqqer/order/bin/frontend/controls/OrderProcess', [
             let leftPos = 0;
 
             if (typeof moveDirection === 'undefined' || moveDirection === -1) {
-                leftPos = -100;
+                leftPos = -10;
             } else {
                 if (moveDirection === 1) {
-                    leftPos = 100;
+                    leftPos = 10;
                 }
             }
 
             this.$StepContainer.setStyles({
                 height: this.$StepContainer.getSize().y,
-                overflow: 'hidden',
                 width: '100%'
             });
 
@@ -1275,7 +1272,7 @@ define('package/quiqqer/order/bin/frontend/controls/OrderProcess', [
                 left: leftPos,
                 opacity: 0
             }, {
-                duration: 500
+                duration: 250
             }).then(function() {
                 const styles = Container.getElements('style');
 

bin/frontend/controls/orderProcess/CustomerData.js

@@ -53,7 +53,7 @@ define('package/quiqqer/order/bin/frontend/controls/orderProcess/CustomerData',
             this.EditButton.addEvent('click', this.openAddressEdit);
             this.EditButton.set('disabled', false);
 
-            this.$Close = this.getElm().getElements('.quiqqer-order-customerData-edit-close');
+            this.$Close = this.getElm().getElement('.quiqqer-order-customerData-edit-close');
             this.$Close.addEvent('click', this.closeAddressEdit);
 
             var EditContainer = this.getElm().getElement('.quiqqer-order-customerData-edit');
@@ -212,14 +212,22 @@ define('package/quiqqer/order/bin/frontend/controls/orderProcess/CustomerData',
 
             var self             = this,
                 Elm              = this.getElm(),
-                Container        = Elm.getElement('.quiqqer-order-customerData'),
+                Container        = Elm.getElement('.quiqqer-order-customerData__container'),
                 DisplayContainer = Elm.getElement('.quiqqer-order-customerData-display'),
-                EditContainer    = Elm.getElement('.quiqqer-order-customerData-edit'),
-                Header           = Elm.getElement('.quiqqer-order-customerData header');
+                EditWrapper      = Elm.getElement('.quiqqer-order-customerData__edit-wrapper'),
+                Edit    = Elm.getElement('.quiqqer-order-customerData-edit');
+
+            Container.style.height = Container.offsetHeight + 'px';
 
             var BusinessType = Elm.getElement('[name="businessType"]');
             var OrderProcess = self.$getOrderProcess();
 
+            if (BusinessType) {
+                self.$onBusinessTypeChange({
+                    target: BusinessType
+                });
+            }
+
             if (OrderProcess) {
                 OrderProcess.resize();
             }
@@ -231,33 +239,32 @@ define('package/quiqqer/order/bin/frontend/controls/orderProcess/CustomerData',
             return this.$fx(DisplayContainer, {
                 opacity: 0
             }).then(function () {
+                DisplayContainer.style.display = 'none';
+
                 return self.$fx(Container, {
-                    height: EditContainer.getComputedSize().height + Header.getSize().y
+                    height: Edit.getComputedSize().height
                 });
             }).then(function () {
-                DisplayContainer.setStyle('display', 'none');
-                EditContainer.setStyle('opacity', 0);
-                EditContainer.setStyle('display', 'inline');
-
                 // save event
-                EditContainer.getElement('[type="submit"]').addEvent('click', function (event) {
+                Edit.getElement('[type="submit"]').addEvent('click', function (event) {
                     event.stop();
                     self.save().catch(function () {
                         // nothing
                     });
                 });
 
-                return self.$fx(EditContainer, {
+                EditWrapper.style.height = null;
+
+                self.$Close.style.display = null;
+                moofx(self.$Close).animate({
+                    opacity   : 1,
+                    visibility: null
+                });
+
+                return self.$fx(Edit, {
                     opacity: 1
                 });
             }).then(function () {
-                if (BusinessType) {
-                    self.$onBusinessTypeChange({
-                        target: BusinessType
-                    });
-                }
-
-                EditContainer.setStyle('display', 'inline');
                 Container.setStyle('height', null);
 
                 if (OrderProcess) {
@@ -279,36 +286,48 @@ define('package/quiqqer/order/bin/frontend/controls/orderProcess/CustomerData',
 
             var self             = this,
                 Elm              = this.getElm(),
-                Container        = Elm.getElement('.quiqqer-order-customerData'),
+                Container        = Elm.getElement('.quiqqer-order-customerData__container'),
                 DisplayContainer = Elm.getElement('.quiqqer-order-customerData-display'),
-                EditContainer    = Elm.getElement('.quiqqer-order-customerData-edit'),
-                Header           = Elm.getElement('.quiqqer-order-customerData header');
+                EditWrapper      = Elm.getElement('.quiqqer-order-customerData__edit-wrapper'),
+                Edit    = Elm.getElement('.quiqqer-order-customerData-edit');
+
+            moofx(this.$Close).animate({
+                opacity   : 0,
+                visibility: 'hidden'
+            }, {
+                callback: function() {
+                    self.$Close.style.display = 'none';
+                }
+            });
 
             var OrderProcess = self.$getOrderProcess();
 
-            return this.$fx(EditContainer, {
+            Container.style.height = Container.offsetHeight + 'px';
+
+            return this.$fx(Edit, {
                 opacity: 0
             }).then(function () {
+
+                DisplayContainer.style.opacity = 0;
+                DisplayContainer.style.display = null;
+
                 return self.$fx(Container, {
-                    height: DisplayContainer.getComputedSize().height + Header.getSize().y
+                    height: DisplayContainer.getComputedSize().height
                 });
             }).then(function () {
-                EditContainer.setStyles({
-                    display: 'none',
-                    opacity: null
-                });
+                EditWrapper.style.height = 0;
 
                 moofx(self.EditButton).animate({
                     opacity   : 1,
                     visibility: null
                 });
 
-                DisplayContainer.setStyle('opacity', 0);
-                DisplayContainer.setStyle('display', null);
 
                 return self.$fx(DisplayContainer, {
                     opacity: 1
                 }).then(function () {
+                    Container.setStyle('height', null);
+
                     if (OrderProcess) {
                         OrderProcess.resize();
                     }
@@ -375,22 +394,12 @@ define('package/quiqqer/order/bin/frontend/controls/orderProcess/CustomerData',
             }
 
             var businessType = Target.value;
-            var Company = this.getElm().getElement('.quiqqer-order-customerData-edit-company');
-            var VatId = this.getElm().getElement('.quiqqer-order-customerData-edit-vatId');
+            const Container = this.getElm().querySelector('.bt2-labelContainer'),
+                  Inner = this.getElm().querySelector('.bt2-labelContainer__inner');
 
-            var styles = {
-                display : 'inline-block',
-                height  : Company.getSize().y,
-                overflow: 'hidden',
-                opacity : 0,
-                position: 'relative'
-            };
 
-            VatId.getElement('input').setStyle('display', null);
-            Company.getElement('input').setStyle('display', null);
-
-            Company.setStyles(styles);
-            VatId.setStyles(styles);
+            var Company = this.getElm().getElement('.quiqqer-order-customerData-edit-company');
+            var VatId = this.getElm().getElement('.quiqqer-order-customerData-edit-vatId');
 
             function show() {
                 if (VatId.getElement('input').value !== '') {
@@ -398,37 +407,21 @@ define('package/quiqqer/order/bin/frontend/controls/orderProcess/CustomerData',
                     VatId.getElement('input').title = QUILocale.get(lg, 'customer.data.vat.chaning.not.allowed');
                 }
 
-                moofx([
-                    VatId,
-                    Company
-                ]).animate({
-                    height      : Company.getScrollSize().y,
-                    marginBottom: 10,
-                    opacity     : 1
+                moofx(Container).animate({
+                    height: Inner.offsetHeight,
+                    opacity: 1
                 }, {
-                    duration: 250
+                    callback: function() {
+//                        Container.style.height = null;
+                    }
                 });
             }
 
             function hide() {
-                moofx([
-                    VatId,
-                    Company
-                ]).animate({
-                    height : 0,
-                    margin : 0,
-                    padding: 0,
+                moofx(Container).animate({
+                    height: 0,
                     opacity: 0
-                }, {
-                    duration: 250,
-                    callback: function () {
-                        VatId.getElement('input').setStyle('display', 'none');
-                        Company.getElement('input').setStyle('display', 'none');
-
-                        VatId.setStyle('display', 'none');
-                        Company.setStyle('display', 'none');
-                    }
-                });
+                })
             }
 
             if (businessType === 'b2c') {

bin/types/shoppingCart.css

@@ -7,6 +7,15 @@
     margin-right: auto;
 }
 
+.quiqqer-order-basket-articles {
+    width: 100%;
+}
+
+.quiqqer-order-basket-total {
+    margin-top: 20px;
+    margin-left: auto;
+}
+
 .quiqqer-order-shoppingCart-nobody {
     display: flex;
     width: 100%;

src/QUI/ERP/Order/Basket/Basket.php

@@ -70,7 +70,7 @@ public function __construct($basketId, $User = false)
             return;
         }
 
-        $this->List            = new ProductList();
+        $this->List = new ProductList();
         $this->List->duplicate = true;
         $this->List->setUser($User);
 
@@ -89,7 +89,7 @@ public function __construct($basketId, $User = false)
             try {
                 if ($Exception instanceof ExceptionBasketNotFound) {
                     $Basket = Factory::getInstance()->createBasket($User);
-                    $data   = Handler::getInstance()->getBasketData($Basket->getId(), $User);
+                    $data = Handler::getInstance()->getBasketData($Basket->getId(), $User);
                 }
             } catch (QUI\Exception $Exception) {
                 throw new Exception(
@@ -99,7 +99,7 @@ public function __construct($basketId, $User = false)
             }
         }
 
-        $this->id   = $basketId;
+        $this->id = $basketId;
         $this->User = $User;
         $this->hash = $data['hash'];
 
@@ -215,6 +215,12 @@ public function import(array $products = [])
         }
 
         $this->save();
+
+
+        QUI::getEvents()->fireEvent(
+            'quiqqerBasketImport',
+            [$this, $this->List]
+        );
     }
 
     /**
@@ -227,7 +233,7 @@ public function save()
         }
 
         // save only product ids with custom fields, we need not more
-        $result   = [];
+        $result = [];
         $products = $this->List->getProducts();
 
         foreach ($products as $Product) {
@@ -240,11 +246,11 @@ public function save()
             }
 
             $productData = [
-                'id'          => $Product->getId(),
-                'title'       => $Product->getTitle(),
+                'id' => $Product->getId(),
+                'title' => $Product->getTitle(),
                 'description' => $Product->getDescription(),
-                'quantity'    => $Product->getQuantity(),
-                'fields'      => []
+                'quantity' => $Product->getQuantity(),
+                'fields' => []
             ];
 
             /* @var $Field QUI\ERP\Products\Field\UniqueField */
@@ -262,10 +268,10 @@ public function save()
                 QUI\ERP\Order\Handler::getInstance()->tableBasket(),
                 [
                     'products' => json_encode($result),
-                    'hash'     => $this->hash
+                    'hash' => $this->hash
                 ],
                 [
-                    'id'  => $this->getId(),
+                    'id' => $this->getId(),
                     'uid' => $this->User->getId()
                 ]
             );
@@ -283,7 +289,7 @@ public function toArray(): array
     {
         $Products = $this->getProducts();
         $products = $Products->getProducts();
-        $result   = [];
+        $result = [];
 
         /* @var $Product Product */
         foreach ($products as $Product) {
@@ -303,9 +309,9 @@ public function toArray(): array
             }
 
             $result[] = [
-                'id'       => $Product->getId(),
+                'id' => $Product->getId(),
                 'quantity' => $Product->getQuantity(),
-                'fields'   => $fields
+                'fields' => $fields
             ];
         }
 
@@ -325,8 +331,8 @@ public function toArray(): array
 
 
         return [
-            'id'           => $this->getId(),
-            'products'     => $result,
+            'id' => $this->getId(),
+            'products' => $result,
             'calculations' => $calculations
         ];
     }
@@ -439,7 +445,7 @@ public function toOrder($Order)
         // update the data
         $products = $Products->getProducts();
 
-        $InvoiceAddress  = $Order->getInvoiceAddress();
+        $InvoiceAddress = $Order->getInvoiceAddress();
         $DeliveryAddress = $Order->getDeliveryAddress();
 
         $Order->clear();
@@ -486,7 +492,7 @@ public function toOrder($Order)
     protected function createNewOrder(): QUI\ERP\Order\OrderInProcess
     {
         $Orders = QUI\ERP\Order\Handler::getInstance();
-        $User   = QUI::getUserBySession();
+        $User = QUI::getUserBySession();
 
         // create a new order
         try {

src/QUI/ERP/Order/Basket/BasketGuest.php

@@ -29,7 +29,7 @@ class BasketGuest
      */
     public function __construct()
     {
-        $this->List            = new ProductList();
+        $this->List = new ProductList();
         $this->List->duplicate = true;
         $this->List->setCurrency(QUI\ERP\Defaults::getUserCurrency());
     }
@@ -131,6 +131,11 @@ public function import($products = [])
         } catch (QUI\Exception $Exception) {
             QUI\System\Log::writeDebugException($Exception);
         }
+
+        QUI::getEvents()->fireEvent(
+            'quiqqerBasketImport',
+            [$this, $this->List]
+        );
     }
 
     /**
@@ -150,7 +155,7 @@ public function toArray(): array
     {
         $Products = $this->getProducts();
         $products = $Products->getProducts();
-        $result   = [];
+        $result = [];
 
         /* @var $Product Product */
         foreach ($products as $Product) {
@@ -170,9 +175,9 @@ public function toArray(): array
             }
 
             $result[] = [
-                'id'       => $Product->getId(),
+                'id' => $Product->getId(),
                 'quantity' => $Product->getQuantity(),
-                'fields'   => $fields
+                'fields' => $fields
             ];
         }
 
@@ -191,7 +196,7 @@ public function toArray(): array
         }
 
         return [
-            'products'     => $result,
+            'products' => $result,
             'calculations' => $calculations
         ];
     }

src/QUI/ERP/Order/Basket/BasketOrder.php

@@ -307,6 +307,11 @@ public function import(array $products = [])
         } catch (\Exception $Exception) {
             QUI\System\Log::addDebug($Exception->getMessage());
         }
+
+        QUI::getEvents()->fireEvent(
+            'quiqqerBasketImport',
+            [$this, $this->List]
+        );
     }
 
     /**

src/QUI/ERP/Order/Controls/OrderProcess.css

 .quiqqer-order-ordering {
+    --_order-listEntry-padding: var(--order-listEntry-padding, 1rem);
+    --_order-listEntry-bg: var(--order-listEntry-bg, transparent);
+    --_order-listEntry-bg--hover: var(--order-listEntry-bg--hover, #f8f8f8);
+    --_order-listEntry-radius: var(--order-listEntry-radius, 0.25rem);
+    --_order-listEntry-gap: var(--order-listEntry-gap, 2rem);
+    --_order-listEntry-spacing: var(--order-listEntry-spacing, 0.5rem);
+
     display: block;
     width: 100%;
 }
@@ -31,46 +38,45 @@
 }
 
 .quiqqer-order-ordering-error {
-    background-color: rgb(255, 249, 242);
-    border: 1px solid #D8D8D8;
-    clear: both;
-    color: rgb(211, 0, 0);
-    display: block;
-    margin-bottom: 20px;
-    padding: 10px;
-    width: 100%;
+
 }
 
 /** processing / time line
  ============================================*/
-
 .quiqqer-order-ordering-timeline {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    clear: both;
-    display: block;
-    float: left;
-    margin: 0 0 40px !important;
+    margin-bottom: 2rem;
+}
+
+.quiqqer-order-ordering-timeline-container > ul {
     padding: 0;
-    width: 100%;
+    display: flex;
 }
 
 .quiqqer-order-ordering-timeline a {
     text-decoration: none;
+    display: inline-block;
+    line-height: 1.3;
 }
 
 .quiqqer-order-ordering-timeline li {
-    float: left;
+    cursor: pointer;
+    padding: 0;
     height: 100px;
     list-style-type: none;
     position: relative;
     text-align: center;
-    width: 16.666%;
+    flex: 1;
 }
 
 .quiqqer-order-ordering-timeline li.active {
     background: transparent;
 }
 
+.quiqqer-order-ordering-timeline li .title {
+    z-index: 3;
+    position: relative;
+}
+
 .quiqqer-order-ordering-timeline li .fa {
     background: #fff;
     color: #bebebe;
@@ -133,10 +139,6 @@
     color: #75b947;
 }
 
-.quiqqer-order-ordering-timeline {
-    width: 100%;
-}
-
 .quiqqer-order-ordering-timeline.disabled,
 .quiqqer-order-ordering-timeline.disabled li,
 .quiqqer-order-ordering-timeline.disabled a {
@@ -149,43 +151,10 @@
     opacity: 0.75;
 }
 
-/** current step
- ============================================*/
-
-.quiqqer-order-ordering-step {
-    clear: both;
-    display: block;
-    margin-bottom: 20px;
-    overflow-x: hidden;
-    position: relative;
-    width: 100%;
-}
-
-/** step
- ============================================*/
-
-.quiqqer-order-ordering-buttons {
-    clear: both;
-    display: block;
-    float: left;
-    margin-top: 0;
-    width: 100%;
-}
-
-.quiqqer-order-ordering-buttons a {
-    float: left;
-    text-decoration: none;
-}
-
-.quiqqer-order-ordering-buttons-next {
-    float: right;
-}
-
 @media (max-width: 768px) {
     .quiqqer-order-ordering-timeline {
-        margin: 0 0 20px !important;
+        margin-bottom: 1rem;
         overflow: auto;
-        padding: 10px 0 0;
         white-space: nowrap;
     }
 
@@ -193,18 +162,14 @@
         float: left;
         height: 70px;
         overflow: hidden;
-        width: initial;
-    }
-
-    .quiqqer-order-ordering-timeline-container ul {
-        padding-left: 0;
+        min-width: 100%;
     }
 
     .quiqqer-order-ordering-timeline li {
         display: inline-block;
         float: none;
         height: 70px;
-        width: 175px !important;
+        width: 150px ;
     }
 
     .quiqqer-order-ordering-timeline-container li .title {
@@ -217,6 +182,44 @@
     }
 }
 
+/** current step
+ ============================================*/
+
+.quiqqer-order-ordering-step {
+    display: block;
+    margin-bottom: 20px;
+    position: relative;
+}
+
+/** step
+ ============================================*/
+
+.quiqqer-order-ordering-buttons {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.quiqqer-order-ordering-buttons-backToShop,
+.quiqqer-order-ordering-buttons-previous {
+    margin-right: auto;
+}
+
+.quiqqer-order-basket-articles {
+    width: 100%;
+}
+
+.quiqqer-order-basket-total {
+    margin-top: 20px;
+    margin-left: auto;
+}
+
+@media screen and (max-width: 767px) {
+    .quiqqer-order-ordering-buttons {
+        flex-direction: column;
+    }
+}
+
 /** nobody login / registration
  ============================================*/
 .quiqqer-order-ordering-nobody {

src/QUI/ERP/Order/Controls/OrderProcess.html

@@ -30,7 +30,7 @@
                 {assign var=cssProcessingClass value=" disabled"}
                 {/if}
 
-                <li style="width: {$listWidth}%;"
+                <li {*style="width: {$listWidth}%;"*}
                     class="{$cssClass}{$cssProcessingClass}"
                     data-step="{$Step->getName()}"
                     data-icon="{$Step->getIcon()}"
@@ -56,7 +56,7 @@
     </div>
 
     {if $error}
-    <div class="quiqqer-order-ordering-error">
+    <div class="quiqqer-order-ordering-error content-message-attention">
         {$error}
     </div>
     {/if}
@@ -106,11 +106,11 @@
 
 
         {if $payableToOrder}
-        <button name="step" value="payableToOrder" class="btn-success quiqqer-order-ordering-buttons-next">
+        <button name="step" value="payableToOrder" class="btn btn-success quiqqer-order-ordering-buttons-next">
             {locale group="quiqqer/order" var="ordering.btn.pay.to.order"}
         </button>
         {else if $next}
-        <button name="step" value="{$next}" class="btn-success quiqqer-order-ordering-buttons-next">
+        <button name="step" value="{$next}" class="btn btn-success quiqqer-order-ordering-buttons-next">
             {locale group="quiqqer/order" var="ordering.btn.next"}
         </button>
         {/if}

src/QUI/ERP/Order/Controls/OrderProcess/Basket.css

@@ -5,7 +5,7 @@
 
 .quiqqer-order-ordering-step .articles-sum {
     position: relative;
-    top: -1px;
+    float: initial;
 }
 
 .quiqqer-order-btn-submit {

src/QUI/ERP/Order/Controls/OrderProcess/Checkout.css

+.quiqqer-order-step-checkout-invoiceAddress,
+.quiqqer-order-step-checkout-deliveryAddress,
+.quiqqer-order-step-checkout-payments,
+.quiqqer-order-step-checkout-article {
+    margin: 2rem 0;
+}
 
 .quiqqer-order-step-checkout header {
-    margin-bottom: 20px;
+    margin-bottom: 1rem;
 }
 
-.quiqqer-order-step-checkout-invoiceAddress,
-.quiqqer-order-step-checkout-article {
-    clear: both;
-    display: inline-block;
-    margin-bottom: 20px;
-    position: relative;
-    width: 100%;
+.quiqqer-order-step-checkout-payments {
+    display: grid;
+    gap: 1rem 2rem;
+    grid-template-areas:
+            "header header"
+            "payment shipping";
+    grid-template-columns: 1fr 1fr;
 }
 
-.quiqqer-order-step-checkout-invoiceAddress {
-    margin-top: 20px;
+.quiqqer-order-step-checkout-payments > h2 {
+    grid-area: header;
 }
 
 .quiqqer-order-step-checkout-shipping {
-    margin-top: 30px;
+    grid-area: shipping;
 }
 
-.quiqqer-order-step-checkout-shipping,
 .quiqqer-order-step-checkout-payments-payment {
-    display: block;
-    float: left;
-    width: 50%;
+    grid-area: payment;
 }
 
 .quiqqer-order-step-checkout-shipping img,
@@ -33,32 +36,11 @@
     max-width: 100%;
 }
 
-.quiqqer-order-step-checkout-payments-payment span {
-    float: left;
-}
-
 .quiqqer-order-step-checkout-shipping-title,
 .quiqqer-order-step-checkout-payments-payment-title {
-    clear: both;
-    float: left;
     font-weight: bold;
-    margin-top: 10px;
-}
-
-.quiqqer-order-step-checkout-payments-payment-description {
-    clear: both;
-}
-
-.quiqqer-order-step-checkout-payments-payment-description p {
-    margin: 5px 0 0 0;
-    padding: 0;
-}
-
-.quiqqer-order-customerData-display-customerNo span,
-.quiqqer-order-customerData-display-eMail span,
-.quiqqer-order-customerData-display-tel span {
-    float: left;
-    width: 50%;
+    margin-top: 0.5rem;
+    display: block;
 }
 
 .quiqqer-order-step-checkout-notice a {

src/QUI/ERP/Order/Controls/OrderProcess/Checkout.html

@@ -56,9 +56,9 @@ Order=$Order
             <span class="quiqqer-order-step-checkout-payments-payment-title">
                 {$Payment->getTitle()}
             </span>
-            <span class="quiqqer-order-step-checkout-payments-payment-description">
+            <div class="quiqqer-order-step-checkout-payments-payment-description">
                 {$Payment->getDescription()}
-            </span>
+            </div>
         </div>
 
         {if isset($Shipping) && $Shipping}
@@ -70,6 +70,9 @@ Order=$Order
             <span class="quiqqer-order-step-checkout-shipping-title">
                 {$Shipping->getTitle()}
             </span>
+            <div class="quiqqer-order-step-checkout-payments-payment-description">
+                {$Shipping->getDescription()}
+            </div>
         </div>
         {/if}
     </div>

src/QUI/ERP/Order/Controls/OrderProcess/CustomerData.css

-
 .quiqqer-order-customerData-container {
-    float: left;
-    flex-wrap: wrap;
-    width: 100%;
+    display: flex;
+    gap: 1rem 2rem;
 }
 
 .quiqqer-order-customerData,
 .quiqqer-order-customerData-comment {
-    clear: both;
-    float: left;
-    max-width: 600px;
-    width: 100%;
+    flex: 1;
 }
 
 .quiqqer-order-customerData-comment label {
     clear: both;
-    float: left;
     margin-bottom: 20px;
     width: 100%;
 }
 
+@media screen and (max-width: 767px) {
+    .quiqqer-order-customerData-container {
+        flex-direction: column;
+    }
+}
+
+/* customer data */
+:is(.quiqqer-order-customerData-display-customerNo, .quiqqer-order-customerData-display-eMail, .quiqqer-order-customerData-display-tel){
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 0.25rem;
+}
+
+:is(.quiqqer-order-customerData-display-customerNo, .quiqqer-order-customerData-display-eMail, .quiqqer-order-customerData-display-tel) > .text-muted {
+    width: 12rem;
+}
+
+@media screen and (max-width: 767px) {
+    :is(.quiqqer-order-customerData-display-customerNo, .quiqqer-order-customerData-display-eMail, .quiqqer-order-customerData-display-tel) > .text-muted {
+        width: initial;
+        margin-right: 0.5em;
+    }
+}
+
 /** address data
  ========================================== */
 
 .quiqqer-order-customerData header {
-    float: left;
     width: 100%;
 }
 
@@ -39,32 +56,43 @@
 
 
 .quiqqer-order-customerData label {
-    clear: both;
-    float: left;
     margin-bottom: 10px;
     width: 100%;
+    display: flex;
 }
 
 .quiqqer-order-customerData label span {
-    float: left;
-    width: 50%;
+    width: 40%;
+    flex-grow: 1;
 }
 
 .quiqqer-order-customerData label input,
 .quiqqer-order-customerData label select,
 .quiqqer-order-customerData label textarea,
 .quiqqer-order-customerData .qui-select {
-    float: left;
-    width: 60%
+    width: 60%;
+    flex-grow: 1;
+}
+
+@media screen and (max-width: 500px) {
+    .quiqqer-order-customerData label {
+        flex-direction: column;
+    }
+
+    .quiqqer-order-customerData label span,
+    .quiqqer-order-customerData label input,
+    .quiqqer-order-customerData label select,
+    .quiqqer-order-customerData label textarea,
+    .quiqqer-order-customerData .qui-select {
+        width: 100%;
+    }
 }
 
 .quiqqer-order-customerData label [name="street"] {
-    float: left;
     width: 45%;
 }
 
 .quiqqer-order-customerData label [name="street_number"] {
-    float: left;
     margin-left: 10px;
     width: calc(15% - 10px);
 }
@@ -84,48 +112,32 @@
 }
 
 .quiqqer-order-customerData-edit {
-    display: none;
-    float: left;
     position: relative;
-    width: 100%;
+    overflow: auto;
 }
 
-.quiqqer-order-customerData-edit-close {
-    cursor: pointer;
-    font-size: 24px;
-    line-height: 40px;
-    position: absolute;
-    right: 0;
+button.quiqqer-order-customerData-edit-close {
     text-align: center;
-    top: -50px;
-    width: 40px;
+}
+
+button.quiqqer-order-customerData-edit-close > .fa {
+    margin: 0;
 }
 
 .quiqqer-order-customerData-edit [name="save-edit"] {
-    float: left;
     margin-left: 40%;
     width: 60%;
 }
 
 .quiqqer-order-customerData-display {
-    clear: both;
-    float: left;
-    max-width: 400px;
-    padding-right: 50px;
     position: relative;
-    width: 100%;
 }
 
 .quiqqer-order-customerData-display label {
-    float: left;
     margin-bottom: 0;
     width: 100%;
 }
 
-.quiqqer-order-customerData-edit label span {
-    width: 40%;
-}
-
 address {
     font-style: normal;
 }
@@ -139,10 +151,7 @@ address .fa {
 }
 
 .quiqqer-order-customerData-display-address {
-    clear: both;
-    float: left;
-    margin-top: 10px;
-    width: 100%;
+    margin-top: 20px;
 }
 
 .quiqqer-order-customerData-display-address-label {
@@ -151,18 +160,10 @@ address .fa {
     padding-bottom: 5px;
 }
 
-.quiqqer-order-customerData-display-address address {
-    margin-bottom: 10px;
-}
-
 .quiqqer-order-customerData-edit-vatId {
     position: relative;
 }
 
-.quiqqer-order-customerData-edit-salutation {
-    margin-top: 20px;
-}
-
 .quiqqer-order-customerData-tax-validation-loader {
     font-size: 20px;
     line-height: 40px;
@@ -179,13 +180,16 @@ address .fa {
 
 .quiqqer-order-customerData [name="open-edit"] {
     margin-left: auto;
-    /*display: none;*/
 }
 
 @media screen and (max-width: 500px) {
     .quiqqer-order-customerData [name="open-edit"] .quiqqer-order-customerData-edit-text {
         display: none;
     }
+
+    .quiqqer-order-customerData [name="open-edit"] .quiqqer-order-customerData-edit-icon {
+        margin: 0;
+    }
 }
 
 .quiqqer-order-customerData-edit [type="submit"] {
@@ -205,11 +209,6 @@ address .fa {
 
 /** comment
  ========================================== */
-
-.quiqqer-order-customerData-comment {
-    margin-top: 40px;
-}
-
 .quiqqer-order-customerData-comment label span {
     display: block;
     padding: 10px 0;