fix (modal): center modal without js

This commit is contained in:
MickaelK 2025-04-07 20:25:59 +10:00
parent 396ea667c4
commit b420f2eb1c
2 changed files with 2 additions and 21 deletions

View file

@ -6,6 +6,7 @@
right: 0;
background: #f2f3f5f0;
z-index: 1000;
display: flex;
}
.component_modal > div{
box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.1);
@ -14,6 +15,7 @@
max-width: 320px;
padding: 20px 20px 0 20px;
border-radius: 2px;
margin: auto;
}
.dark-mode .component_modal{

View file

@ -113,27 +113,6 @@ class ModalComponent extends HTMLElement {
})),
));
// feature: center horizontally
effect(rxjs.merge(
rxjs.fromEvent(window, "resize"),
rxjs.of(null),
).pipe(
rxjs.distinct(() => document.body.offsetHeight),
rxjs.map(() => {
let size = targetHeight;
if (size === null) {
const $box = document.querySelector("#modal-box > div");
if ($box instanceof HTMLElement) size = $box.offsetHeight;
}
size = Math.round((document.body.offsetHeight - size) / 2);
if (size < 0) return 0;
if (size > 250) return 250;
return size;
}),
rxjs.map((size) => ["margin", `${size}px auto 0 auto`]),
applyMutation(qs(this, ".component_modal > div"), "style", "setProperty"),
));
return (id) => close$.next(id);
}
}