Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 05:18:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

poprawki rozmieszczenia popupu

Browse Source
This commit is contained in:
Spythere
2024-03-29 23:04:08 +01:00
parent d5ec9919e2
commit ba650238db
2 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
-1
View File
@@ -243,7 +243,6 @@ export default defineComponent({
grid-template-columns: 100%; grid-template-columns: 100%;
min-height: 100vh; min-height: 100vh;
position: relative;
} }
.app_main { .app_main {
src/components/PopUp/PopUp.vue
+19 -7
View File
@@ -25,19 +25,31 @@ export default defineComponent({
deep: true, deep: true,
handler(val: typeof this.popupStore.popupPosition) { handler(val: typeof this.popupStore.popupPosition) {
const previewEl = this.$refs['preview'] as HTMLElement; 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.top = `${val.y}px`;
previewEl.style.left = `${val.x}px`;
previewEl.style.transform = 'translateY(1.5rem)';
this.$nextTick(() => { this.$nextTick(() => {
const isOutside = 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'}))`; if (isOutside) translateY = 'calc(-100% - 30px)';
previewEl.style.transform = `translate(-${~~((val.x / window.innerWidth) * 100)}%, calc(${ previewEl.style.transform = `translate(${translateX}, ${translateY})`;
isOutside ? '-100% - 1.5rem' : '1.5rem'
}))`;
}); });
} }
} }