this repo has no description
Fix modals
+13
-8
+13
-8
public/main.tsx
+13
-8
public/main.tsx
···
7
7
import { choiceOptions, choiceOptionIndices } from './base';
8
8
import { exportImage } from './exporter';
9
9
import { compress, decompress } from 'qfs-compression';
10
+
import { createPortal } from 'preact/compat';
10
11
11
12
const root = document.querySelector('#root');
12
13
···
465
466
/>;
466
467
}
467
468
468
-
function Modal({ children, open, onClose }: { children: import('preact').ComponentChildren; open: boolean; onClose: () => void; }) {
469
-
return <Portal into="body">
470
-
<div class={`modal${open ? ' is-active' : ''}`}>
469
+
function Modal({ children, open, onClose, container }: { children: import('preact').ComponentChildren; open: boolean; onClose: () => void; container: HTMLElement; }) {
470
+
if (!container) return null;
471
+
472
+
return createPortal(
473
+
<div class={`modal${open ? ' is-active' : ''}`}>
471
474
<div class="modal-background" />
472
475
<div class="modal-content">{children}</div>
473
-
<button class="modal-close is-large" aria-label="close" />
474
-
</div>
475
-
</Portal>;
476
+
<button class="modal-close is-large" aria-label="close" onClick={onClose} />
477
+
</div>,
478
+
container
479
+
);
476
480
}
477
481
478
482
const changelog = [
479
483
{ version: '14 - February 13th 2026', changes: [
480
484
'Use Preact for rendering',
481
485
'Upgrade to Bulma 1.0.4',
486
+
'Port to TypeScript',
482
487
]},
483
488
{ version: '13 - November 14th 2022', changes: [
484
489
'Remove Futanari options in favor of an easier to understand selection of sexual characteristics irrespective of gender',
···
638
643
<KinksSection />
639
644
</section>
640
645
641
-
<Modal open={exportImageOpen} onClose={() => setExportImageOpen(false)}>
646
+
<Modal open={exportImageOpen} onClose={() => setExportImageOpen(false)} container={document.body}>
642
647
<div class="box">
643
648
<h1 class="title">Exported! Copy the image to your clipboard or save it now.</h1>
644
649
<div id="export-modal-content">{exportModalContent}</div>
645
650
</div>
646
651
</Modal>
647
652
648
-
<Modal open={changelogOpen} onClose={() => setChangelogOpen(false)}>
653
+
<Modal open={changelogOpen} onClose={() => setChangelogOpen(false)} container={document.body}>
649
654
<div class="box content">
650
655
<h1>Changelog</h1>
651
656
{changelog.map(entry => (