DatseMultimediaSites
/
Sharkey
mirror of https://activitypub.software/TransFem-org/Sharkey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

merge: keep popup elements on screen (!744) 

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/744

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>
Approved-by: Hazelnoot <acomputerdog@gmail.com>
This commit is contained in:
dakkar 2024-11-22 10:40:55 +00:00
parent fadcabeaa6 68e5b5a84a
commit 9bf18546fc
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/components/MkUserPopup.vue
View File

@ -119,7 +119,7 @@ onMounted(() => {
}
const rect = props.source.getBoundingClientRect();
const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.scrollX;
const x = Math.max(1, ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.scrollX);
const y = rect.top + props.source.offsetHeight + window.scrollY;
top.value = y;

14
packages/frontend/src/scripts/popup-position.ts
View File

@ -15,6 +15,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
const contentWidth = el.offsetWidth;
const contentHeight = el.offsetHeight;
const HORIZONTAL_MARGIN = 1;
let rect: DOMRect;
if (props.anchorElement) {
@ -36,9 +38,11 @@ export function calcPopupPosition(el: HTMLElement, props: {
left -= (el.offsetWidth / 2);
if (left + contentWidth - window.scrollX > window.innerWidth) {
left = window.innerWidth - contentWidth + window.scrollX - 1;
left = window.innerWidth - contentWidth + window.scrollX - HORIZONTAL_MARGIN;
}
left = Math.max(HORIZONTAL_MARGIN, left);
return [left, top];
};
@ -57,9 +61,11 @@ export function calcPopupPosition(el: HTMLElement, props: {
left -= (el.offsetWidth / 2);
if (left + contentWidth - window.scrollX > window.innerWidth) {
left = window.innerWidth - contentWidth + window.scrollX - 1;
left = window.innerWidth - contentWidth + window.scrollX - HORIZONTAL_MARGIN;
}
left = Math.max(HORIZONTAL_MARGIN, left);
return [left, top];
};
@ -75,6 +81,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
top = props.y;
}
left = Math.max(HORIZONTAL_MARGIN, left);
top -= (el.offsetHeight / 2);
if (top + contentHeight - window.scrollY > window.innerHeight) {
@ -106,6 +114,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
top -= (el.offsetHeight / 2);
}
left = Math.max(HORIZONTAL_MARGIN, left);
if (top + contentHeight - window.scrollY > window.innerHeight) {
top = window.innerHeight - contentHeight + window.scrollY - 1;
}