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

chore: tooltip placing

Browse Source
This commit is contained in:
Spythere
2024-09-08 16:32:11 +02:00
parent b09761de58
commit a3d9e68c8a
3 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tooltip/BaseTooltip.vue
+1 -1
View File
@@ -29,7 +29,7 @@ export default defineComponent({
border-radius: 0.25em; border-radius: 0.25em;
width: 100%; width: 100%;
background-color: #333; background-color: #1f1f1f;
box-shadow: 0 0 5px 2px #aaa; box-shadow: 0 0 5px 2px #aaa;
} }
src/components/Tooltip/Tooltip.vue
+10 -8
View File
@@ -13,6 +13,8 @@ import BaseTooltip from './BaseTooltip.vue';
import SpawnsTooltip from './SpawnsTooltip.vue'; import SpawnsTooltip from './SpawnsTooltip.vue';
import UsersTooltip from './UsersTooltip.vue'; import UsersTooltip from './UsersTooltip.vue';
const BOX_PADDING_PX = 20;
export default defineComponent({ export default defineComponent({
components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip, SpawnsTooltip, UsersTooltip }, components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip, SpawnsTooltip, UsersTooltip },
@@ -33,14 +35,14 @@ export default defineComponent({
const boxWidth = previewEl.getBoundingClientRect().width; const boxWidth = previewEl.getBoundingClientRect().width;
let translateX = '0', let translateX = '0',
translateY = '30px'; translateY = `calc(-100% - ${BOX_PADDING_PX}px)`;
if (val[0] <= boxWidth / 2) { if (val[0] <= boxWidth / 2 + BOX_PADDING_PX) {
previewEl.style.left = '0'; previewEl.style.left = '0';
translateX = '0px'; translateX = BOX_PADDING_PX + 'px';
} else if (val[0] >= clientWidth - boxWidth / 2) { } else if (val[0] >= clientWidth - boxWidth / 2 - BOX_PADDING_PX) {
previewEl.style.left = '100%'; previewEl.style.left = '100%';
translateX = '-100%'; translateX = `calc(-100% - ${BOX_PADDING_PX}px)`;
} else { } else {
previewEl.style.left = `${val[0]}px`; previewEl.style.left = `${val[0]}px`;
translateX = '-50%'; translateX = '-50%';
@@ -49,10 +51,10 @@ export default defineComponent({
previewEl.style.top = `${val[1]}px`; previewEl.style.top = `${val[1]}px`;
const isOutside = const isOutside =
val[1] + previewEl.getBoundingClientRect().height + 30 >= val[1] - previewEl.getBoundingClientRect().height <=
window.innerHeight + window.scrollY; window.scrollY + BOX_PADDING_PX * 2;
if (isOutside) translateY = 'calc(-100% - 30px)'; if (isOutside) translateY = BOX_PADDING_PX + 'px';
previewEl.style.transform = `translate(${translateX}, ${translateY})`; previewEl.style.transform = `translate(${translateX}, ${translateY})`;
}); });
} }
src/components/Tooltip/VehiclePreviewTooltip.vue
+1 -1
View File
@@ -89,7 +89,7 @@ export default defineComponent({
.tooltip-content { .tooltip-content {
width: 300px; width: 300px;
min-height: 200px; min-height: 200px;
background-color: #333; background-color: #1f1f1f;
box-shadow: 0 0 10px 2px #aaa; box-shadow: 0 0 10px 2px #aaa;
padding: 0.5em; padding: 0.5em;