Merge pull request #2363 from appwrite/fix-dat-747

This commit is contained in:
Darshan
2025-09-12 19:24:49 +05:30
committed by GitHub
2 changed files with 65 additions and 25 deletions
@@ -359,6 +359,21 @@
bottom: 35%;
position: fixed;
@media (max-width: 768px) and (max-height: 768px) {
left: unset;
bottom: 12.5% !important;
}
@media (max-width: 768px) and (max-height: 1024px) {
left: unset;
bottom: 15% !important;
}
@media (max-width: 1024px) and (max-height: 1024px) {
left: unset;
bottom: 15%;
}
@media (max-width: 1024px) {
left: unset;
bottom: 30%;
@@ -3,6 +3,8 @@
import { Button, Form } from '$lib/elements/forms';
import { Badge, Divider, Layout, Sheet, Tag, Typography } from '@appwrite.io/pink-svelte';
import { Copy } from '$lib/components';
import { writable } from 'svelte/store';
import { isTabletViewport } from '$lib/stores/viewport';
let {
show = $bindable(false),
@@ -38,6 +40,9 @@
footer?: Snippet | null;
} = $props();
let form: Form;
let submitting = writable(false);
let copyText = $state(undefined);
</script>
@@ -74,6 +79,8 @@
<Layout.Stack direction="column" justifyContent="space-evenly">
<Form
bind:this={form}
bind:isSubmitting={submitting}
onSubmit={async () => {
try {
const keepOpen = await submit?.onClick?.();
@@ -87,32 +94,38 @@
<Layout.Stack gap="xl" class="sheet-content">
{@render children?.()}
</Layout.Stack>
{#if submit}
<div class="sheet-footer">
<Layout.Stack gap="l">
<Divider />
<div class="sheet-footer-actions">
<Layout.Stack
gap="m"
direction="row"
justifyContent="flex-end"
alignItems="center">
{#if footer}
{@render footer?.()}
{/if}
<Button size="s" secondary on:click={() => (show = false)}
>Cancel</Button>
<Button size="s" submit disabled={submit.disabled}>
{submit.text}
</Button>
</Layout.Stack>
</div>
</Layout.Stack>
</div>
{/if}
</Form>
{#if submit}
<div class="sheet-footer">
<Layout.Stack gap="l">
<Divider />
<div class="sheet-footer-actions">
<Layout.Stack
gap="m"
direction="row"
justifyContent="flex-end"
alignItems="center">
{#if footer}
{@render footer?.()}
{/if}
<Button size="s" secondary on:click={() => (show = false)}
>Cancel</Button>
<Button
size="s"
submit
disabled={submit.disabled || $submitting}
forceShowLoader={$submitting && $isTabletViewport}
submissionLoader={$submitting && $isTabletViewport}
on:click={() => form?.triggerSubmit()}>
{submit.text}
</Button>
</Layout.Stack>
</div>
</Layout.Stack>
</div>
{/if}
</Layout.Stack>
</Sheet>
</div>
@@ -131,6 +144,14 @@
& :global(.sheet-content) {
// overflow-y: auto;
padding-bottom: 5rem;
@media (max-width: 768px) {
/*
* different mobile browsers handle bottom spaces differently,
* therefore, having extra bottom space doesn't hurt anyone imo!
*/
padding-bottom: 15rem;
}
}
}
@@ -141,6 +162,10 @@
position: absolute;
background: var(--bgcolor-neutral-primary);
@media (max-width: 768px) {
position: fixed;
}
& .sheet-footer-actions {
padding-inline: var(--space-8);
padding-block-end: var(--space-6);