mirror of
https://github.com/mickael-kerjean/filestash
synced 2025-12-06 08:22:24 +01:00
fix (modal): center modal without js
This commit is contained in:
parent
396ea667c4
commit
b420f2eb1c
2 changed files with 2 additions and 21 deletions
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue