Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2025-12-09 09:52:54 +01:00
Code Issues Projects Releases Wiki Activity

fix (modal): center modal without js

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/assets/components/modal.css
View file

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

21
public/assets/components/modal.js
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); return (id) => close$.next(id);
} }
} }