diff --git a/bin/frontend/controls/orderProcess/Login.js b/bin/frontend/controls/orderProcess/Login.js
index 914e1bc3a19f368a71d95eaba4f0867ab8b87813..1442cac378664a3a8b15a1302cd29168d75c489c 100644
--- a/bin/frontend/controls/orderProcess/Login.js
+++ b/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
/**
diff --git a/locale.xml b/locale.xml
index 65d9f957014a835716984d0107d3e6f9cf76a04e..2bb2ffdc0f55c9c8b250089980c7ce6ac65a5e65 100644
--- a/locale.xml
+++ b/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>
diff --git a/src/QUI/ERP/Order/Controls/OrderProcess.Nobody.html b/src/QUI/ERP/Order/Controls/OrderProcess.Nobody.html
index 776080138f9e9acdff76dca04a4ba70f1d8121f5..7a171b8c45196384d05288647976815b4cffea80 100644
--- a/src/QUI/ERP/Order/Controls/OrderProcess.Nobody.html
+++ b/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>
diff --git a/src/QUI/ERP/Order/Controls/OrderProcess.css b/src/QUI/ERP/Order/Controls/OrderProcess.css
index 1bb50f0bb20f5df7a62bd2c7def5e57196a67ec0..56f18f8d952391bf7c8dde77a0ff4d24573c65aa 100644
--- a/src/QUI/ERP/Order/Controls/OrderProcess.css
+++ b/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;
+ }
}