forked from
pds.ls/pdsls
atmosphere explorer
fix modal positioning
+17
-13
+2
-1
src/auth/account.tsx
+2
-1
src/auth/account.tsx
···
125
125
setShowingAddAccount(false);
126
126
scopeFlow.cancel();
127
127
}}
128
+
alignTop
128
129
>
129
-
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-18 left-[50%] w-88 -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
130
+
<div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-88 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
130
131
<Show when={!scopeFlow.showScopeSelector() && !showingAddAccount()}>
131
132
<div class="mb-2 px-1 font-semibold">
132
133
<span>Manage accounts</span>
+1
-1
src/components/create/confirm-submit.tsx
+1
-1
src/components/create/confirm-submit.tsx
···
27
27
};
28
28
29
29
return (
30
-
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[24rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
30
+
<div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[24rem] rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
31
31
<div class="flex flex-col gap-3 text-sm">
32
32
<h2 class="font-semibold">{props.isCreate ? "Create" : "Edit"} record</h2>
33
33
<div class="flex flex-col gap-1.5">
+1
-1
src/components/create/file-upload.tsx
+1
-1
src/components/create/file-upload.tsx
···
50
50
};
51
51
52
52
return (
53
-
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[20rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
53
+
<div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[20rem] rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
54
54
<h2 class="mb-2 font-semibold">Upload blob</h2>
55
55
<div class="flex flex-col gap-2 text-sm">
56
56
<div class="flex flex-col gap-1">
+1
-1
src/components/create/handle-input.tsx
+1
-1
src/components/create/handle-input.tsx
···
40
40
};
41
41
42
42
return (
43
-
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[20rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
43
+
<div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[20rem] rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
44
44
<h2 class="mb-2 font-semibold">Insert DID from handle</h2>
45
45
<form ref={handleFormRef} onSubmit={resolveDid} class="flex flex-col gap-2 text-sm">
46
46
<div class="flex flex-col gap-1">
+2
-2
src/components/create/index.tsx
+2
-2
src/components/create/index.tsx
···
235
235
onClose={() => setOpenDialog(false)}
236
236
closeOnClick={false}
237
237
nonBlocking={isMinimized()}
238
+
alignTop
238
239
>
239
240
<div
240
-
style="transform: translateX(-50%) translateZ(0);"
241
241
classList={{
242
-
"dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto absolute top-18 left-1/2 flex flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-all duration-200 dark:border-neutral-700 starting:opacity-0": true,
242
+
"dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto flex flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-all duration-200 dark:border-neutral-700 starting:opacity-0": true,
243
243
"w-[calc(100%-1rem)] max-w-3xl h-[65vh]": !isMaximized(),
244
244
"w-[calc(100%-1rem)] max-w-7xl h-[85vh]": isMaximized(),
245
245
hidden: isMinimized(),
+4
-1
src/components/modal.tsx
+4
-1
src/components/modal.tsx
···
5
5
onClose?: () => void;
6
6
closeOnClick?: boolean;
7
7
nonBlocking?: boolean;
8
+
alignTop?: boolean;
8
9
}
9
10
10
11
export const Modal = (props: ModalProps) => {
···
12
13
<Show when={props.open}>
13
14
<div
14
15
data-modal
15
-
class="fixed inset-0 z-50 h-full max-h-none w-full max-w-none bg-transparent text-neutral-900 dark:text-neutral-200"
16
+
class="fixed inset-0 z-50 flex h-full max-h-none w-full max-w-none justify-center bg-transparent text-neutral-900 dark:text-neutral-200"
16
17
classList={{
17
18
"pointer-events-none": props.nonBlocking,
19
+
"items-start pt-18": props.alignTop,
20
+
"items-center": !props.alignTop,
18
21
}}
19
22
ref={(node) => {
20
23
const handleEscape = (e: KeyboardEvent) => {
+1
-1
src/components/permission-prompt.tsx
+1
-1
src/components/permission-prompt.tsx
···
28
28
29
29
return (
30
30
<Modal open={requestedScope() !== null} onClose={() => setRequestedScope(null)}>
31
-
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
31
+
<div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[calc(100%-2rem)] max-w-md rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
32
32
<h2 class="mb-2 font-semibold">Permission required</h2>
33
33
<p class="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
34
34
You need the "{scopeLabel()}" permission to perform this action.
+2
-2
src/components/search.tsx
+2
-2
src/components/search.tsx
···
354
354
355
355
return (
356
356
<>
357
-
<Modal open={openList()} onClose={() => setOpenList(false)}>
358
-
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-16 left-[50%] w-88 -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 sm:w-104 dark:border-neutral-700 starting:opacity-0">
357
+
<Modal open={openList()} onClose={() => setOpenList(false)} alignTop>
358
+
<div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-88 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 sm:w-104 dark:border-neutral-700 starting:opacity-0">
359
359
<div class="mb-2 flex items-center gap-1 font-semibold">
360
360
<span class="iconify lucide--link"></span>
361
361
<span>Supported URLs</span>
+1
-1
src/views/collection.tsx
+1
-1
src/views/collection.tsx
···
301
301
</Show>
302
302
</div>
303
303
<Modal open={openDelete()} onClose={() => setOpenDelete(false)}>
304
-
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
304
+
<div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
305
305
<h2 class="mb-2 font-semibold">
306
306
{recreate() ? "Recreate" : "Delete"}{" "}
307
307
{records.filter((r) => r.toDelete).length} records?
+1
-1
src/views/pds.tsx
+1
-1
src/views/pds.tsx
···
82
82
<span class="iconify lucide--info text-neutral-600 dark:text-neutral-400"></span>
83
83
</button>
84
84
<Modal open={openInfo()} onClose={() => setOpenInfo(false)}>
85
-
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-max max-w-[90vw] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-white p-3 shadow-md transition-opacity duration-200 sm:max-w-xl dark:border-neutral-700 starting:opacity-0">
85
+
<div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-max max-w-[90vw] rounded-lg border-[0.5px] border-neutral-300 bg-white p-3 shadow-md transition-opacity duration-200 sm:max-w-xl dark:border-neutral-700 starting:opacity-0">
86
86
<div class="mb-2 flex items-center justify-between gap-4">
87
87
<p class="truncate font-semibold">{repo.did}</p>
88
88
<button
+1
-1
src/views/record.tsx
+1
-1
src/views/record.tsx
···
419
419
<span class="iconify lucide--trash-2"></span>
420
420
</PermissionButton>
421
421
<Modal open={openDelete()} onClose={() => setOpenDelete(false)}>
422
-
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
422
+
<div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
423
423
<h2 class="mb-2 font-semibold">Delete this record?</h2>
424
424
<div class="flex justify-end gap-2">
425
425
<Button onClick={() => setOpenDelete(false)}>Cancel</Button>