fix: optimize order process for nobody user on mobile devices

Related: order-guestorder#6

bin/frontend/controls/orderProcess/Login.js

@@ -59,6 +59,12 @@ define('package/quiqqer/order/bin/frontend/controls/orderProcess/Login', [
                 });
             });
 
+            if (QUI.getWindowSize().x < 767) {
+                this.initTabsForMobile();
+
+                return;
+            }
+
             this.initTabs();
         },
 
@@ -335,6 +341,95 @@ define('package/quiqqer/order/bin/frontend/controls/orderProcess/Login', [
 
         // endregion
 
+        // region tabs for mobile
+
+        /**
+         * Initializes the tabs for mobile devices.
+         *
+         * Handles the click events on the tabs and the back buttons, and toggles the visibility of the tabs and their content.
+         *
+         * @return {void}
+         */
+        initTabsForMobile: function () {
+            const Elm = this.getElm();
+            const self = this;
+
+            this.Tabs = Elm.querySelector('.quiqqer-order-ordering-nobody__tabs');
+            this.Nav = Elm.querySelector('.quiqqer-order-ordering-nobody-tabNav');
+            this.navEntries = Elm.querySelectorAll('.quiqqer-order-ordering-nobody-tabNav__entry');
+            this.Main = Elm.querySelector('.quiqqer-order-ordering-nobody-tabs-main__list');
+            this.mainEntries = Elm.querySelectorAll('.quiqqer-order-ordering-nobody-tabs-main__item');
+            const backBtns = Elm.querySelectorAll('.quiqqer-order-ordering-nobody-tabs-main__btnBack');
+
+            /**
+             * Handles the click event on the tabs for mobile devices.
+             *
+             * @param {object} event - The click event object.
+             * @return {void}
+             */
+            const clickEvent = function (event) {
+                event.stop();
+
+                if (self.clicked) {
+                    return;
+                }
+
+                self.clicked = true;
+
+                let NavItem = event.target;
+
+                if (NavItem.nodeName !== 'LI') {
+                    NavItem = NavItem.getParent('li');
+                }
+
+                let target = NavItem.getElement('a').getAttribute("href");
+
+                if (target.indexOf('#') === 0) {
+                    target = target.substring(1);
+                }
+
+                if (!target) {
+                    self.clicked = false;
+                    return;
+                }
+
+                self.Nav.style.display = 'none';
+
+                self.mainEntries.forEach((MainEntry) => {
+                    if (MainEntry.getAttribute('id') === target) {
+                        MainEntry.style.display = 'block';
+                    } else {
+                        MainEntry.style.display = 'none';
+                    }
+                })
+
+                self.clicked = false;
+            };
+
+            /**
+             * Handles the back button click event on the tabs for mobile devices.
+             *
+             * @return {void}
+             */
+            const backClickEvent = function () {
+                self.mainEntries.forEach((MainEntry) => {
+                    MainEntry.style.display = 'none';
+                });
+
+                self.Nav.style.display = null;
+            }
+
+            this.navEntries.forEach((NavEntry) => {
+                NavEntry.addEvent('click', clickEvent);
+            });
+
+            backBtns.forEach((Btn) => {
+                Btn.addEvent('click', backClickEvent);
+            });
+        },
+
+        // endregion
+
         // region drag to scroll
 
         /**

locale.xml

@@ -384,20 +384,20 @@
         </locale>
 
         <locale name="ordering.nobody.nav.login.title">
-            <de><![CDATA[Anmelden]]></de>
-            <en><![CDATA[Log in]]></en>
+            <de><![CDATA[Bereits Kunde]]></de>
+            <en><![CDATA[Already a customer]]></en>
         </locale>
         <locale name="ordering.nobody.nav.login.desc">
-            <de><![CDATA[Ich bin bereits Kunde]]></de>
-            <en><![CDATA[I am already a customer]]></en>
+            <de><![CDATA[Ich habe ein Kundenkonto]]></de>
+            <en><![CDATA[I have already a customer account]]></en>
         </locale>
         <locale name="ordering.nobody.nav.signup.title">
-            <de><![CDATA[Registrieren]]></de>
-            <en><![CDATA[Sign up]]></en>
+            <de><![CDATA[Konto erstellen]]></de>
+            <en><![CDATA[Create an account]]></en>
         </locale>
         <locale name="ordering.nobody.nav.signup.desc">
-            <de><![CDATA[Ich möchte Kundenkonto anlegen]]></de>
-            <en><![CDATA[I would like to create a customer account]]></en>
+            <de><![CDATA[Ich möchte mich registrieren]]></de>
+            <en><![CDATA[I would like to sign up]]></en>
         </locale>
         <locale name="ordering.nobody.nav.guest.title">
             <de><![CDATA[Als Gast bestellen]]></de>
@@ -407,6 +407,10 @@
             <de><![CDATA[Ich möchte kein Kundenkonto anlegen]]></de>
             <en><![CDATA[I do not want to create a customer account]]></en>
         </locale>
+        <locale name="ordering.nobody.mainContent.btn.back">
+            <de><![CDATA[Zurück]]></de>
+            <en><![CDATA[Back]]></en>
+        </locale>
 
         <locale name="ordering.nobody.login.text.prefix" html="true">
             <de><![CDATA[ ]]></de>

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

@@ -93,6 +93,11 @@
                                 {$text}
                             </div>
                         {/if}
+
+                        <span class="quiqqer-order-ordering-nobody-tabs-main__btnBack">
+                            <span class="fa fa-angle-left"></span>
+                            {locale group='quiqqer/order' var='ordering.nobody.mainContent.btn.back'}
+                        </span>
                     </li>
     
                     <li class="quiqqer-order-ordering-nobody-tabs-main__item {if $activeEntry == 'signup'}active{/if}"
@@ -114,6 +119,11 @@
                                 {$text}
                             </div>
                         {/if}
+
+                        <span class="quiqqer-order-ordering-nobody-tabs-main__btnBack">
+                            <span class="fa fa-angle-left"></span>
+                            {locale group='quiqqer/order' var='ordering.nobody.mainContent.btn.back'}
+                        </span>
                     </li>
     
                     {if $GuestOrder}
@@ -136,6 +146,11 @@
                                     {$text}
                                 </div>
                             {/if}
+
+                            <span class="quiqqer-order-ordering-nobody-tabs-main__btnBack">
+                            <span class="fa fa-angle-left"></span>
+                            {locale group='quiqqer/order' var='ordering.nobody.mainContent.btn.back'}
+                        </span>
                         </li>
                     {/if}
                 </ul>

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

@@ -380,23 +380,34 @@
         display: block;
     }
 
-    .quiqqer-order-ordering-nobody-tabs__aside {
-        margin-bottom: 3rem;
-    }
-
     .quiqqer-order-ordering-nobody-tabs__aside,
-    .quiqqer-order-ordering-nobody-tabs__main    {
+    .quiqqer-order-ordering-nobody-tabs__main {
         width: 100%
     }
 
     .quiqqer-order-ordering-nobody-tabNav {
-        /*display: flex;*/
-        padding-block: 1rem;
-        overflow: auto;
-        white-space: nowrap;
+
     }
 
-    .quiqqer-order-ordering-nobody-tabNav__desc {
+    .quiqqer-order-ordering-nobody-tabs-main__item {
         display: none;
     }
+
+    .quiqqer-order-ordering form {
+        height: initial;
+    }
+
+    .quiqqer-order-ordering-nobody-tabNav__entry > :where(a) {
+        background: #f8f8f8;
+    }
+
+    /* back btn */
+    .quiqqer-order-ordering-nobody-tabs-main__btnBack {
+        display: inline-block;
+        margin-top: 1rem;
+    }
+
+    .quiqqer-order-ordering-nobody-tabs-main__btnBack > .fa {
+        margin-right: 0.5em;
+    }
 }