gitea_admin/fabiennefoehn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Place mobile modal above button

Browse Source
This commit is contained in:
Mathias Gläser
2026-03-25 17:12:50 +01:00
parent 19b66f7754
commit c60a9bd861
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
script.js
View File

@@ -52,8 +52,13 @@ const positionPrivacyFlyover = (trigger) => {
const panelHeight = privacyFlyoverPanel.offsetHeight; const panelHeight = privacyFlyoverPanel.offsetHeight;
if (isMobile) { if (isMobile) {
privacyFlyover.style.removeProperty("--privacy-flyover-top"); const panelWidth = window.innerWidth - 40;
privacyFlyover.style.removeProperty("--privacy-flyover-left"); const left = 20;
const top = Math.max(gap, rect.top - panelHeight - gap);
privacyFlyover.style.setProperty("--privacy-flyover-left", `${left}px`);
privacyFlyover.style.setProperty("--privacy-flyover-top", `${top}px`);
privacyFlyover.style.setProperty("--privacy-flyover-width", `${panelWidth}px`);
return; return;
} }
@@ -66,6 +71,7 @@ const positionPrivacyFlyover = (trigger) => {
privacyFlyover.style.setProperty("--privacy-flyover-left", `${left}px`); privacyFlyover.style.setProperty("--privacy-flyover-left", `${left}px`);
privacyFlyover.style.setProperty("--privacy-flyover-top", `${top}px`); privacyFlyover.style.setProperty("--privacy-flyover-top", `${top}px`);
privacyFlyover.style.removeProperty("--privacy-flyover-width");
}; };
const closeFlyover = () => { const closeFlyover = () => {

14
styles.css
View File

@@ -743,7 +743,7 @@ button {
position: absolute; position: absolute;
top: var(--privacy-flyover-top, 2rem); top: var(--privacy-flyover-top, 2rem);
left: var(--privacy-flyover-left, auto); left: var(--privacy-flyover-left, auto);
width: min(680px, calc(100vw - 2rem)); width: var(--privacy-flyover-width, min(680px, calc(100vw - 2rem)));
max-height: calc(100vh - 2rem); max-height: calc(100vh - 2rem);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@@ -1092,16 +1092,10 @@ button {
font-size: 0.95rem; font-size: 0.95rem;
} }
.privacy-flyover {
padding: 0;
}
.privacy-flyover__panel { .privacy-flyover__panel {
top: auto; right: auto;
right: 1.25rem; bottom: auto;
bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); width: var(--privacy-flyover-width, calc(100vw - 2.5rem));
left: 1.25rem;
width: calc(100vw - 2.5rem);
max-width: calc(100vw - 2.5rem); max-width: calc(100vw - 2.5rem);
max-height: calc(100dvh - 2.5rem - env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 2.5rem - env(safe-area-inset-bottom, 0px));
margin: 0; margin: 0;