coracle/flotilla
1
3
Fork 9
Code Issues 32 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

Re work modal scrolling

Browse Source
This commit is contained in:
Jon Staab
2026-01-30 14:14:12 -08:00
parent 4169db33e6
commit 38c0a9d403
75 changed files with 2340 additions and 2030 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/SpaceInvite.svelte
+50 -46
View File
@@ -9,6 +9,8 @@
import Field from "@lib/components/Field.svelte"
import Button from "@lib/components/Button.svelte"
import Icon from "@lib/components/Icon.svelte"
import Modal from "@lib/components/Modal.svelte"
import ModalBody from "@lib/components/ModalBody.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte"
import QRCode from "@app/components/QRCode.svelte"
@@ -52,52 +54,54 @@
})
</script>
<div class="col-4">
<ModalHeader>
{#snippet title()}
<div>Create an Invite</div>
{/snippet}
{#snippet info()}
<div>
Get a link that you can use to invite people to
<span class="text-primary">{displayRelayUrl(url)}</span>
</div>
{/snippet}
</ModalHeader>
<div>
{#if loading}
<p class="center">
<Spinner {loading}>Requesting an invite link...</Spinner>
</p>
{:else if $authError}
<p class="center">Oops! It looks like you're not a member of this relay.</p>
{:else}
<div class="flex flex-col items-center gap-6">
<QRCode code={invite} />
<Field>
{#snippet input()}
<label class="input input-bordered flex w-full items-center gap-2">
<Icon icon={LinkRound} />
<input bind:value={invite} class="grow" type="text" />
<Button onclick={copyInvite}>
<Icon icon={Copy} />
</Button>
</label>
{/snippet}
{#snippet info()}
<p>
This invite link can be used by clicking "Add Space" and pasting it there.
{#if !claim}
This space did not issue a claim for this link, so additional steps might be
required.
{/if}
</p>
{/snippet}
</Field>
</div>
{/if}
</div>
<Modal>
<ModalBody>
<ModalHeader>
{#snippet title()}
<div>Create an Invite</div>
{/snippet}
{#snippet info()}
<div>
Get a link that you can use to invite people to
<span class="text-primary">{displayRelayUrl(url)}</span>
</div>
{/snippet}
</ModalHeader>
<div>
{#if loading}
<p class="center">
<Spinner {loading}>Requesting an invite link...</Spinner>
</p>
{:else if $authError}
<p class="center">Oops! It looks like you're not a member of this relay.</p>
{:else}
<div class="flex flex-col items-center gap-6">
<QRCode code={invite} />
<Field>
{#snippet input()}
<label class="input input-bordered flex w-full items-center gap-2">
<Icon icon={LinkRound} />
<input bind:value={invite} class="grow" type="text" />
<Button onclick={copyInvite}>
<Icon icon={Copy} />
</Button>
</label>
{/snippet}
{#snippet info()}
<p>
This invite link can be used by clicking "Add Space" and pasting it there.
{#if !claim}
This space did not issue a claim for this link, so additional steps might be
required.
{/if}
</p>
{/snippet}
</Field>
</div>
{/if}
</div>
</ModalBody>
<ModalFooter>
<Button class="btn btn-primary flex-grow" onclick={back}>Done</Button>
</ModalFooter>
</div>
</Modal>