From ba650238db4b8bd4d3efae8e27d071212e0d8ed6 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 29 Mar 2024 23:04:08 +0100
Subject: [PATCH] poprawki rozmieszczenia popupu

---
 src/App.vue                    |  1 -
 src/components/PopUp/PopUp.vue | 26 +++++++++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2b80633..3a5e999 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -243,7 +243,6 @@ export default defineComponent({
   grid-template-columns: 100%;
 
   min-height: 100vh;
-  position: relative;
 }
 
 .app_main {
diff --git a/src/components/PopUp/PopUp.vue b/src/components/PopUp/PopUp.vue
index 69beef7..b7b2273 100644
--- a/src/components/PopUp/PopUp.vue
+++ b/src/components/PopUp/PopUp.vue
@@ -25,19 +25,31 @@ export default defineComponent({
       deep: true,
       handler(val: typeof this.popupStore.popupPosition) {
         const previewEl = this.$refs['preview'] as HTMLElement;
+        const clientWidth = document.body.clientWidth;
+        const boxWidth = previewEl.getBoundingClientRect().width;
+
+        let translateX = '0px',
+          translateY = '30px';
+
+        if (val.x <= boxWidth / 2) {
+          previewEl.style.left = '0';
+          translateX = '0px';
+        } else if (val.x >= clientWidth - boxWidth / 2) {
+          previewEl.style.left = '100%';
+          translateX = '-100%';
+        } else {
+          previewEl.style.left = `${val.x}px`;
+          translateX = '-50%';
+        }
 
         previewEl.style.top = `${val.y}px`;
-        previewEl.style.left = `${val.x}px`;
-        previewEl.style.transform = 'translateY(1.5rem)';
 
         this.$nextTick(() => {
           const isOutside =
-            val.y + previewEl.getBoundingClientRect().height > window.innerHeight + window.scrollY;
+            val.y + previewEl.getBoundingClientRect().height >= window.innerHeight + window.scrollY;
 
-          // previewEl.style.transform = `translate(-${~~((val.x / window.innerWidth) * 100)}%, calc(${isOutside ? '-100% - 1.5rem' : '1.5rem'}))`;
-          previewEl.style.transform = `translate(-${~~((val.x / window.innerWidth) * 100)}%, calc(${
-            isOutside ? '-100% - 1.5rem' : '1.5rem'
-          }))`;
+          if (isOutside) translateY = 'calc(-100% - 30px)';
+          previewEl.style.transform = `translate(${translateX}, ${translateY})`;
         });
       }
     }