src/css/responsive.scss

@@ -1,5 +1,11 @@
 @mixin mobile {
-  @media screen and (max-width: 1023px) {
+    @media screen and (max-width: 768px) {
-    @content;
+        @content;
-  }
+    }
+}
+
+@mixin tablet {
+    @media screen and (min-width: 769px) and (max-width: 1024px) {
+        @content;
+    }
 }

src/pages/Ecomerce/CheckoutView.vue

@@ -16,10 +16,11 @@ const route = useRoute();
 const router = useRouter();
 const { notify } = useNotify();
 const appStore = useAppStore();
-const { localeDates } = storeToRefs(appStore);
+const { localeDates, isMobile } = storeToRefs(appStore);
 
 const stepperRef = ref(null);
 
+const showNavigationButtons = ref(true);
 const loading = ref(false);
 const today = ref(null);
 const addresses = ref([]);
@@ -210,6 +211,13 @@ const getWarehouses = async () => {
     }
 };
 
+const hideNavigationButtons = () => {
+    showNavigationButtons.value = false;
+    setTimeout(() => {
+        showNavigationButtons.value = true;
+    }, 350);
+};
+
 const onNextStep = async stepIndex => {
     const currentStep = steps[orderForm.value.method][stepIndex];
     if (currentStep.onBeforeNextStep) {
@@ -220,6 +228,8 @@ const onNextStep = async stepIndex => {
         return;
     }
 
+    hideNavigationButtons();
+
     currentStep.stepDone = true;
     await stepperRef.value.next();
 
@@ -230,6 +240,7 @@ const onNextStep = async stepIndex => {
 };
 
 const onPreviousStep = async stepIndex => {
+    hideNavigationButtons();
     await stepperRef.value.previous();
 
     const previousStep = steps[orderForm.value.method][stepIndex - 1];
@@ -301,15 +312,16 @@ onMounted(async () => {
 </script>
 
 <template>
-    <QPage class="vn-w-sm">
+    <QPage class="page-container">
         <QStepper
             v-if="steps[orderForm.method] && steps[orderForm.method].length"
             v-model="currentStep"
             ref="stepperRef"
             animated
             keep-alive
+            :flat="isMobile"
             contracted
-            class="default-radius"
+            class="default-radius stepper-container"
         >
             <QStep
                 v-for="(step, stepIndex) in steps[orderForm.method]"
@@ -317,6 +329,7 @@ onMounted(async () => {
                 :name="step.name"
                 :done="step.stepDone"
                 done-color="accent"
+                class="step-container full-height"
             >
                 <!-- Method step -->
                 <div
@@ -436,33 +449,88 @@ onMounted(async () => {
                         <span>{{ confirmPlaceText }}</span>
                     </div>
                 </div>
-                <QStepperNavigation class="flex justify-between">
+                <QBtn
-                    <QBtn
+                    v-if="showNavigationButtons"
-                        flat
+                    color="primary"
-                        color="primary"
+                    @click="onPreviousStep(stepIndex)"
-                        @click="onPreviousStep(stepIndex)"
+                    :disabled="currentStep === 'method'"
-                        :label="step.backButtonLabel || t('back')"
+                    icon="arrow_back"
-                        class="q-ml-sm"
+                    dense
-                        :class="{ invisible: currentStep === 'method' }"
+                    class="left-navigation-button"
-                    />
+                >
-                    <QBtn
+                    <QTooltip>
-                        @click="onNextStep(stepIndex)"
+                        {{ t(`${step.backButtonLabel || 'back'}`) }}
-                        color="primary"
+                    </QTooltip>
-                        :label="step.nextButtonLabel || t('next')"
+                </QBtn>
-                    />
+                <QBtn
-                </QStepperNavigation>
+                    v-if="showNavigationButtons"
+                    @click="onNextStep(stepIndex)"
+                    :color="currentStep === 'confirm' ? 'accent ' : 'primary'"
+                    :icon="
+                        currentStep === 'confirm' ? 'check' : 'arrow_forward'
+                    "
+                    dense
+                    class="right-navigation-button"
+                >
+                    <QTooltip>
+                        {{ t(`${step.nextButtonLabel || 'next'}`) }}
+                    </QTooltip>
+                </QBtn>
             </QStep>
         </QStepper>
     </QPage>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
+@import 'src/css/responsive';
+
 .step-title {
     min-width: 100%;
     margin-bottom: 16px;
     text-align: center;
     font-weight: bold;
 }
+
+.page-container {
+    max-width: 544px;
+    margin: auto;
+    @include mobile {
+        max-height: calc(100svh - 64px);
+        padding: 0 !important;
+    }
+}
+
+.stepper-container > * {
+    @include mobile {
+        max-height: calc(100svh - 136px);
+    }
+}
+
+.step-container {
+    @include mobile {
+        .q-stepper__step-content {
+            height: calc(100svh - 64px);
+        }
+    }
+}
+
+.left-navigation-button {
+    position: absolute;
+    left: 5px;
+    top: 50%;
+    @include mobile {
+        top: 35%;
+    }
+}
+
+.right-navigation-button {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    @include mobile {
+        top: 35%;
+    }
+}
 </style>
 
 <i18n lang="yaml">

src/stores/app.js

@@ -68,7 +68,7 @@ export const useAppStore = defineStore('hedera', {
         },
 
         async init() {
-            this.router.push({ name: 'login' });
+            // this.router.push({ name: 'login' });
             this.getBasketOrderId();
             this.getLocaleDates();
         },
@@ -151,6 +151,10 @@ export const useAppStore = defineStore('hedera', {
         isMobile() {
             const $q = useQuasar();
             return $q?.screen?.width <= 768;
+        },
+        isTablet() {
+            const $q = useQuasar();
+            return $q?.screen?.width <= 1024;
         }
     }
 });

src/stores/user.js

@@ -37,6 +37,10 @@ export const useUserStore = defineStore('user', {
     actions: {
         async init() {
             this.isGuest = localStorage.getItem('hederaGuest') || false;
+            const autoLoginStatus = await this.tryAutoLogin();
+            if (!autoLoginStatus) {
+                this.router.push({ name: 'login' });
+            }
             await this.fetchUser();
             await this.supplantInit();
             this.updateSiteLocale();
@@ -48,6 +52,21 @@ export const useUserStore = defineStore('user', {
                 localStorage.getItem('vnToken');
         },
 
+        async tryAutoLogin() {
+            const guest = localStorage.getItem('hederaGuest');
+
+            if (this.isGuest || guest) {
+                localStorage.setItem('hederaGuest', true);
+                return true;
+            }
+
+            if (!this.token) this.getToken();
+
+            if (this.token) return true;
+
+            return false;
+        },
+
         async login(user, password, remember) {
             const params = { user, password };
             const res = await api.post('Accounts/login', params);