hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add rule to only show warn modal when window width is under 500px

Browse Source
This commit is contained in:
RcleydsonR 2023-02-13 14:44:40 -03:00
parent 3346b96f18
commit c65a885309
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/CustomModal/CustomModal.vue
View File

@ -71,8 +71,8 @@ if (props.isRedirectModal) {
display: flex !important; display: flex !important;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100%;
width: 100vw; width: 100%;
} }
.modal { .modal {

22
src/components/QrCodeComponent.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { pix } from "@/utils/QrCodePix"; import { pix } from "@/utils/QrCodePix";
import { ref } from "vue"; import { onMounted, onUnmounted, ref } from "vue";
import { debounce } from "@/utils/debounce"; import { debounce } from "@/utils/debounce";
import CustomButton from "@/components/CustomButton/CustomButton.vue"; import CustomButton from "@/components/CustomButton/CustomButton.vue";
import CustomModal from "@/components//CustomModal/CustomModal.vue"; import CustomModal from "@/components//CustomModal/CustomModal.vue";
@ -12,11 +12,12 @@ const props = defineProps({
tokenValue: Number, tokenValue: Number,
}); });
const windowSize = ref<number>(window.innerWidth);
const qrCode = ref<string>(""); const qrCode = ref<string>("");
const qrCodePayload = ref<string>(""); const qrCodePayload = ref<string>("");
const isPixValid = ref<boolean>(false); const isPixValid = ref<boolean>(false);
const isCodeInputEmpty = ref<boolean>(true); const isCodeInputEmpty = ref<boolean>(true);
const showModal = ref<boolean>(true); const showWarnModal = ref<boolean>(true);
const e2eId = ref<string>(""); const e2eId = ref<string>("");
// Emits // Emits
@ -68,6 +69,19 @@ const validatePix = async (): Promise<void> => {
isPixValid.value = false; isPixValid.value = false;
} }
}; };
onMounted(() => {
window.addEventListener(
"resize",
() => (windowSize.value = window.innerWidth)
);
});
onUnmounted(() => {
window.removeEventListener(
"resize",
() => (windowSize.value = window.innerWidth)
);
});
</script> </script>
<template> <template>
@ -155,8 +169,8 @@ const validatePix = async (): Promise<void> => {
/> />
</div> </div>
<CustomModal <CustomModal
v-if="showModal" v-if="showWarnModal && windowSize < 500"
@close-modal="showModal = false" @close-modal="showWarnModal = false"
:isRedirectModal="false" :isRedirectModal="false"
/> />
</div> </div>