toast rework + fix bugs

2023-10-04 17:20:21 +02:00
parent 3d53d9e7c8
commit 64d46693ea
24 changed files with 713 additions and 1464 deletions
@@ -0,0 +1,102 @@
+<template>
+	<card-component class="modal-card">
+		<div class="body">
+			<div class="header">
+				<img alt="logo" class="logo" src="/assets/img/vampir.png" />
+			</div>
+			<div class="subheader toast-header">
+				{{ props.header }}<br />
+				{{ props.subheader }}
+			</div>
+			<div class="amount-number">
+				<div class="token-amount number-mobile">{{ props.value }}</div>
+				<div class="token-name">$Blood</div>
+			</div>
+			<div class="info toast-body">
+				{{ props.info }}
+			</div>
+		</div>
+		<div class="btn btn-immortal" @click="closeToast">Okay</div>
+	</card-component>
+</template>
+<script setup>
+import { getCurrentInstance } from "vue";
+
+import CardComponent from "@/components/CardComponent.vue";
+import { useToast } from "vue-toastification";
+
+const props = defineProps({
+	value: String,
+	header: String,
+	subheader: String,
+	info: String,
+});
+
+// element.classList.add("toast-open");
+const toast = useToast();
+
+const instance = getCurrentInstance();
+instance.parent.parent.vnode.el.classList.add("toast-open");
+const id = instance.attrs["toast-id"];
+function closeToast() {
+	instance.parent.parent.vnode.el.classList.remove("toast-open");
+	toast.dismiss(id);
+}
+console.log("instance", instance.attrs["toast-id"]);
+</script>
+<style lang="sass">
+.Vue-Toastification__container
+    &.toast-open
+        background-color: rgb(15, 15, 15, 0.7)
+        height: 100vh
+        width: 100vw
+        position: fixed
+        left: 0
+        bottom: 0
+        z-index: 10
+        @media (min-width: 992px)
+            background-color: unset
+        &.top-center
+            @media (min-width: 600px)
+                left: unset
+                margin-left: unset
+    .Vue-Toastification__toast
+        max-width: unset
+        min-width: unset
+        max-height: unset
+        min-height: unset
+        font-family: unset
+        margin-bottom: unset
+        box-shadow: unset
+        padding: unset
+        &.modal-overlay
+            background-color: unset
+            .modal-card
+                width: 342px
+                text-align: center
+                position: absolute
+                top: 50%
+                left: 50%
+                transform: translate(-50%, -50%)
+                border: 2px solid var(--dark-purple, #4B0082)
+                background: var(--midnight-black, #0F0F0F)
+                z-index: 100
+                gap: 16px
+                @media (min-width: 992px)
+                    top: 142px
+                    right: 24px
+                    left: unset
+                    transform: unset
+                .body
+                    display: flex
+                    flex-direction: column
+                    gap: 8px
+                    .amount-number
+                        display: flex
+                        justify-content: center
+                        align-items: end
+                        gap: 8px
+                    img
+                        width: 74px
+                        height: 74px
+</style>