Place mobile modal above button
This commit is contained in:
10
script.js
10
script.js
@@ -52,8 +52,13 @@ const positionPrivacyFlyover = (trigger) => {
|
||||
const panelHeight = privacyFlyoverPanel.offsetHeight;
|
||||
|
||||
if (isMobile) {
|
||||
privacyFlyover.style.removeProperty("--privacy-flyover-top");
|
||||
privacyFlyover.style.removeProperty("--privacy-flyover-left");
|
||||
const panelWidth = window.innerWidth - 40;
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -66,6 +71,7 @@ const positionPrivacyFlyover = (trigger) => {
|
||||
|
||||
privacyFlyover.style.setProperty("--privacy-flyover-left", `${left}px`);
|
||||
privacyFlyover.style.setProperty("--privacy-flyover-top", `${top}px`);
|
||||
privacyFlyover.style.removeProperty("--privacy-flyover-width");
|
||||
};
|
||||
|
||||
const closeFlyover = () => {
|
||||
|
||||
14
styles.css
14
styles.css
@@ -743,7 +743,7 @@ button {
|
||||
position: absolute;
|
||||
top: var(--privacy-flyover-top, 2rem);
|
||||
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);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
@@ -1092,16 +1092,10 @@ button {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.privacy-flyover {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.privacy-flyover__panel {
|
||||
top: auto;
|
||||
right: 1.25rem;
|
||||
bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
|
||||
left: 1.25rem;
|
||||
width: calc(100vw - 2.5rem);
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
width: var(--privacy-flyover-width, calc(100vw - 2.5rem));
|
||||
max-width: calc(100vw - 2.5rem);
|
||||
max-height: calc(100dvh - 2.5rem - env(safe-area-inset-bottom, 0px));
|
||||
margin: 0;
|
||||
|
||||
Reference in New Issue
Block a user