fix: image preview element styling issue

This commit is contained in:
Timothy J. Baek 2024-08-03 14:42:06 +02:00
parent 6657f28694
commit 774defd184

View File

@ -7,6 +7,8 @@
let mounted = false;
let previewElement = null;
const downloadImage = (url, filename) => {
fetch(url)
.then((response) => response.blob())
@ -34,14 +36,14 @@
mounted = true;
});
$: if (mounted) {
if (show) {
window.addEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'hidden';
} else {
window.removeEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'unset';
}
$: if (show && previewElement) {
document.body.appendChild(previewElement);
window.addEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'hidden';
} else if (previewElement) {
window.removeEventListener('keydown', handleKeyDown);
document.body.removeChild(previewElement);
document.body.style.overflow = 'unset';
}
</script>
@ -49,7 +51,8 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
bind:this={previewElement}
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
>
<div class=" absolute left-0 w-full flex justify-between">
<div>