mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
fix: responsive layout for input fields and tables on mobile devices
This commit is contained in:
AbhiVarde
@@ -39,51 +39,68 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<MultiSelectionTable
|
||||
resource="provider"
|
||||
columns={$columns}
|
||||
onDelete={handleDelete}
|
||||
allowSelection={$canWriteProviders}>
|
||||
{#snippet header(root)}
|
||||
{#each $columns as { id, title }}
|
||||
<Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
|
||||
{/each}
|
||||
{/snippet}
|
||||
<div class="table-scroll-wrapper">
|
||||
<MultiSelectionTable
|
||||
resource="provider"
|
||||
columns={$columns}
|
||||
onDelete={handleDelete}
|
||||
allowSelection={$canWriteProviders}>
|
||||
{#snippet header(root)}
|
||||
{#each $columns as { id, title }}
|
||||
<Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
|
||||
{/each}
|
||||
{/snippet}
|
||||
|
||||
{#snippet children(root)}
|
||||
{@const TableRowComponent = $canWriteProviders ? Table.Row.Link : Table.Row.Base}
|
||||
{#each data.providers.providers as provider (provider.$id)}
|
||||
{@const href = $canWriteProviders
|
||||
? `${base}/project-${page.params.region}-${page.params.project}/messaging/providers/provider-${provider.$id}`
|
||||
: undefined}
|
||||
<TableRowComponent {href} {root} id={provider.$id}>
|
||||
{#each $columns as column}
|
||||
<Table.Cell column={column.id} {root}>
|
||||
{#if column.id === '$id'}
|
||||
{#key $columns}
|
||||
<Id value={provider.$id}>{provider.$id}</Id>
|
||||
{/key}
|
||||
{:else if column.id === 'provider'}
|
||||
<Provider provider={provider.provider} />
|
||||
{:else if column.id === 'type'}
|
||||
<ProviderType type={provider.type} size="xs" />
|
||||
{:else if column.id === 'enabled'}
|
||||
<Badge
|
||||
variant="secondary"
|
||||
type={provider.enabled ? 'success' : undefined}
|
||||
content={provider.enabled ? 'enabled' : 'disabled'}>
|
||||
<svelte:fragment slot="start">
|
||||
{#if provider.enabled}
|
||||
<Icon icon={IconCheckCircle} size="s" />
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</Badge>
|
||||
{:else}
|
||||
{provider[column.id]}
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
{/each}
|
||||
</TableRowComponent>
|
||||
{/each}
|
||||
{/snippet}
|
||||
</MultiSelectionTable>
|
||||
{#snippet children(root)}
|
||||
{@const TableRowComponent = $canWriteProviders ? Table.Row.Link : Table.Row.Base}
|
||||
{#each data.providers.providers as provider (provider.$id)}
|
||||
{@const href = $canWriteProviders
|
||||
? `${base}/project-${page.params.region}-${page.params.project}/messaging/providers/provider-${provider.$id}`
|
||||
: undefined}
|
||||
<TableRowComponent {href} {root} id={provider.$id}>
|
||||
{#each $columns as column}
|
||||
<Table.Cell column={column.id} {root}>
|
||||
{#if column.id === '$id'}
|
||||
{#key $columns}
|
||||
<Id value={provider.$id}>{provider.$id}</Id>
|
||||
{/key}
|
||||
{:else if column.id === 'provider'}
|
||||
<Provider provider={provider.provider} />
|
||||
{:else if column.id === 'type'}
|
||||
<ProviderType type={provider.type} size="xs" />
|
||||
{:else if column.id === 'enabled'}
|
||||
<Badge
|
||||
variant="secondary"
|
||||
type={provider.enabled ? 'success' : undefined}
|
||||
content={provider.enabled ? 'enabled' : 'disabled'}>
|
||||
<svelte:fragment slot="start">
|
||||
{#if provider.enabled}
|
||||
<Icon icon={IconCheckCircle} size="s" />
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</Badge>
|
||||
{:else}
|
||||
{provider[column.id]}
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
{/each}
|
||||
</TableRowComponent>
|
||||
{/each}
|
||||
{/snippet}
|
||||
</MultiSelectionTable>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.table-scroll-wrapper {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
:global([role='table']) {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
minmax(60px, 0.5fr) minmax(200px, 2.5fr) minmax(120px, 1fr) minmax(120px, 1fr)
|
||||
minmax(120px, 1fr) minmax(120px, 1.5fr);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -121,41 +121,43 @@
|
||||
</script>
|
||||
|
||||
{#if data.platforms.platforms.length}
|
||||
<Table.Root columns={4} let:root>
|
||||
<svelte:fragment slot="header" let:root>
|
||||
<Table.Header.Cell {root}>Name</Table.Header.Cell>
|
||||
<Table.Header.Cell {root}>Platform type</Table.Header.Cell>
|
||||
<Table.Header.Cell {root}>Identifier</Table.Header.Cell>
|
||||
<Table.Header.Cell {root}>Last updated</Table.Header.Cell>
|
||||
</svelte:fragment>
|
||||
{#each data.platforms.platforms as platform}
|
||||
<Table.Row.Link href={`${path}/${platform.$id}`} {root}>
|
||||
<Table.Cell {root}>
|
||||
{platform.name}
|
||||
</Table.Cell>
|
||||
<Table.Cell {root}>
|
||||
<Layout.Stack direction="row" gap="s" alignItems="center">
|
||||
<Icon icon={getPlatformInfo(platform.type)} />
|
||||
{PlatformTypes[platform.type]}
|
||||
</Layout.Stack>
|
||||
</Table.Cell>
|
||||
<Table.Cell {root}>
|
||||
{#if platform.type.includes('web') || platform.type === 'web'}
|
||||
{platform.hostname || '—'}
|
||||
{:else}
|
||||
{platform.key || platform.hostname || '—'}
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
<Table.Cell {root}>
|
||||
{#if platform.$updatedAt}
|
||||
<DualTimeView time={platform.$updatedAt} />
|
||||
{:else}
|
||||
never
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
</Table.Row.Link>
|
||||
{/each}
|
||||
</Table.Root>
|
||||
<div class="table-scroll-wrapper">
|
||||
<Table.Root columns={4} let:root>
|
||||
<svelte:fragment slot="header" let:root>
|
||||
<Table.Header.Cell {root}>Name</Table.Header.Cell>
|
||||
<Table.Header.Cell {root}>Platform type</Table.Header.Cell>
|
||||
<Table.Header.Cell {root}>Identifier</Table.Header.Cell>
|
||||
<Table.Header.Cell {root}>Last updated</Table.Header.Cell>
|
||||
</svelte:fragment>
|
||||
{#each data.platforms.platforms as platform}
|
||||
<Table.Row.Link href={`${path}/${platform.$id}`} {root}>
|
||||
<Table.Cell {root}>
|
||||
{platform.name}
|
||||
</Table.Cell>
|
||||
<Table.Cell {root}>
|
||||
<Layout.Stack direction="row" gap="s" alignItems="center">
|
||||
<Icon icon={getPlatformInfo(platform.type)} />
|
||||
{PlatformTypes[platform.type]}
|
||||
</Layout.Stack>
|
||||
</Table.Cell>
|
||||
<Table.Cell {root}>
|
||||
{#if platform.type.includes('web') || platform.type === 'web'}
|
||||
{platform.hostname || '—'}
|
||||
{:else}
|
||||
{platform.key || platform.hostname || '—'}
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
<Table.Cell {root}>
|
||||
{#if platform.$updatedAt}
|
||||
<DualTimeView time={platform.$updatedAt} />
|
||||
{:else}
|
||||
never
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
</Table.Row.Link>
|
||||
{/each}
|
||||
</Table.Root>
|
||||
</div>
|
||||
{:else}
|
||||
<Card.Base padding="none">
|
||||
<Empty
|
||||
@@ -203,3 +205,19 @@
|
||||
</Empty>
|
||||
</Card.Base>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.table-scroll-wrapper {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
:global([role='table']) {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(calc(120px + var(--p-table-cell-padding-inline)), 1fr)
|
||||
minmax(calc(120px + var(--p-table-cell-padding-inline)), 1fr)
|
||||
minmax(calc(180px + var(--p-table-cell-padding-inline)), 2fr)
|
||||
minmax(calc(120px + var(--p-table-cell-padding-inline)), 1fr);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+10
-7
@@ -411,13 +411,15 @@
|
||||
<svelte:fragment slot="aside">
|
||||
<Layout.Stack gap="s">
|
||||
{#key extensions.length}
|
||||
<InputTags
|
||||
id="user-labels"
|
||||
label="Labels"
|
||||
placeholder="Select or type user labels"
|
||||
bind:tags={extensions} />
|
||||
<div style="min-width: 0; width: 100%;">
|
||||
<InputTags
|
||||
id="user-labels"
|
||||
label="Labels"
|
||||
placeholder="Select or type user labels"
|
||||
bind:tags={extensions} />
|
||||
</div>
|
||||
{/key}
|
||||
<Layout.Stack direction="row">
|
||||
<Layout.Stack direction="row" style="flex-wrap: wrap; overflow-x: auto;">
|
||||
{#each suggestedExtensions as ext}
|
||||
<Tag
|
||||
size="s"
|
||||
@@ -463,7 +465,8 @@
|
||||
on:click={() => {
|
||||
showDelete = true;
|
||||
trackEvent(Click.StorageBucketDeleteClick);
|
||||
}}>Delete</Button>
|
||||
}}
|
||||
>Delete</Button>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user