mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Fix viewports
This commit is contained in:
ernstmul
@@ -8,36 +8,35 @@
|
||||
: '';
|
||||
</script>
|
||||
|
||||
<div class="console-container" {style}>
|
||||
<Layout.Stack gap="xl">
|
||||
<slot />
|
||||
</Layout.Stack>
|
||||
<div style:container-type="inline-size">
|
||||
<div class="console-container" {style}>
|
||||
<Layout.Stack gap="xl">
|
||||
<slot />
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1728px (and wider): container size is 1200px-->
|
||||
<!--1440px: container size is 1144px-->
|
||||
<!--1280px: container size is 1000px-->
|
||||
<!--1024px (no side navigation): 944px-->
|
||||
<!--360px (no side navigation): 328px-->
|
||||
|
||||
<style>
|
||||
:global(.console-container) {
|
||||
margin: 1.25rem auto;
|
||||
margin: 1.25rem 1rem;
|
||||
|
||||
@media (min-width: 360px) {
|
||||
width: 328px;
|
||||
@container (min-width: 360px) {
|
||||
margin-inline: 2.5rem;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
width: 944px;
|
||||
@container (min-width: 1024px) {
|
||||
margin: 1.25rem auto;
|
||||
max-width: 944px;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
width: 1000px;
|
||||
@container (min-width: 1280px) {
|
||||
max-width: 1000px;
|
||||
}
|
||||
@media (min-width: 1440px) {
|
||||
width: 1144px;
|
||||
|
||||
@container (min-width: 1440px) {
|
||||
max-width: 1144px;
|
||||
}
|
||||
@media (min-width: 1728px) {
|
||||
width: 1200px;
|
||||
|
||||
@container (min-width: 1728px) {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<script lang="ts">
|
||||
export let adjustContentToCover = false;
|
||||
|
||||
export let size: 'small' | 'medium' | 'large' | 'xl' = null;
|
||||
|
||||
$: style = size
|
||||
@@ -8,8 +6,8 @@
|
||||
: '';
|
||||
</script>
|
||||
|
||||
<div class="top-cover" class:is-adjust-content-to-cover={adjustContentToCover}>
|
||||
<div class="console-container" {style}>
|
||||
<div class="top-cover-console">
|
||||
<div class="cover-container" {style}>
|
||||
<div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20 u-flex-wrap">
|
||||
<slot name="header" />
|
||||
</div>
|
||||
@@ -18,4 +16,33 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.top-cover-console {
|
||||
container-type: inline-size;
|
||||
padding-block-start: var(--base-48, 48px);
|
||||
padding-block-end: var(--base-64, 64px);
|
||||
border-bottom: 1px solid var(--color-border-neutral, #2d2d31);
|
||||
background: var(--color-bgcolor-neutral-primary, #1d1d21);
|
||||
}
|
||||
.cover-container {
|
||||
margin: 0 1rem;
|
||||
|
||||
@container (min-width: 360px) {
|
||||
margin-inline: 2.5rem;
|
||||
}
|
||||
@container (min-width: 1024px) {
|
||||
margin: 0 auto;
|
||||
max-width: 944px;
|
||||
}
|
||||
@container (min-width: 1280px) {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
@container (min-width: 1440px) {
|
||||
max-width: 1144px;
|
||||
}
|
||||
|
||||
@container (min-width: 1728px) {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -117,7 +117,10 @@
|
||||
class="content"
|
||||
class:icons-content={state === 'icons'}
|
||||
class:no-sidebar={!showSideNavigation}>
|
||||
<section class="main-content">
|
||||
<section
|
||||
class="main-content"
|
||||
style:margin-left={!showSideNavigation ? 0 : '10px'}
|
||||
data-test={showSideNavigation}>
|
||||
{#if $activeHeaderAlert?.show}
|
||||
<svelte:component this={$activeHeaderAlert.component} />
|
||||
{/if}
|
||||
|
||||
@@ -42,281 +42,302 @@
|
||||
</script>
|
||||
|
||||
<svelte:window on:resize={updateViewport} on:load={updateViewport} />
|
||||
<div class="console-container">
|
||||
<div class="dashboard-content">
|
||||
{#if !hasPlatforms}
|
||||
<Step.List>
|
||||
<Step.Item state="previous"
|
||||
><div>
|
||||
<h2 class="done">Create project</h2>
|
||||
</div></Step.Item>
|
||||
<Step.Item state="current"
|
||||
><Layout.Stack
|
||||
direction={isSmallViewport ? 'column' : 'row'}
|
||||
gap={isSmallViewport ? 'xl' : 'xxl'}>
|
||||
<Layout.Stack gap="m">
|
||||
<h2>Add a platform</h2>
|
||||
<div class="build-info">
|
||||
<span>
|
||||
Start building with your preferred web, mobile, and native
|
||||
frameworks.
|
||||
</span>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
<div class="grid">
|
||||
<button
|
||||
class="onboarding-card platform-card top-row"
|
||||
on:click={() => addPlatform(0)}>
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? PlatformWebImgSourceDark
|
||||
: PlatformWebImgSource}
|
||||
alt="" />
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="flex-end">
|
||||
<h3>Web</h3>
|
||||
|
||||
<div class="is-only-desktop">
|
||||
<Icon icon={IconArrowRight} color="--neutral-250" />
|
||||
</div></Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</button>
|
||||
<button
|
||||
class="onboarding-card platform-card top-row"
|
||||
on:click={createKey}>
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? PlatformServerImgSourceDark
|
||||
: PlatformServerImgSource}
|
||||
alt="" />
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<h3>Server</h3>
|
||||
<div class="is-only-desktop">
|
||||
<Icon icon={IconArrowRight} color="--neutral-250" />
|
||||
</div></Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</button>
|
||||
<button
|
||||
class="onboarding-card platform-card"
|
||||
on:click={() => addPlatform(3)}>
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? PlatformIosImgSourceDark
|
||||
: PlatformIosImgSource}
|
||||
alt="" />
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<h3>Apple</h3>
|
||||
<div class="is-only-desktop">
|
||||
<Icon icon={IconArrowRight} color="--neutral-250" />
|
||||
</div></Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</button>
|
||||
<button
|
||||
class="onboarding-card platform-card"
|
||||
on:click={() => addPlatform(2)}>
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? PlatformAndroidImgSourceDark
|
||||
: PlatformAndroidImgSource}
|
||||
alt="" />
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<h3>Android</h3>
|
||||
<div class="is-only-desktop">
|
||||
<Icon icon={IconArrowRight} color="--neutral-250" />
|
||||
</div></Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="onboarding-card platform-card"
|
||||
on:click={() => addPlatform(1)}>
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? PlatformFlutterImgSourceDark
|
||||
: PlatformFlutterImgSource}
|
||||
alt="" />
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<h3>Flutter</h3>
|
||||
<div class="is-only-desktop">
|
||||
<Icon icon={IconArrowRight} color="--neutral-250" />
|
||||
</div></Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</button>
|
||||
</div>
|
||||
</Layout.Stack></Step.Item>
|
||||
<Step.Item state="next"
|
||||
><div>
|
||||
<h2 class="done">Build your app</h2>
|
||||
</div></Step.Item>
|
||||
</Step.List>
|
||||
{:else}
|
||||
<Step.List>
|
||||
<Step.Item state="previous"
|
||||
><div>
|
||||
<h2 class="done">Create project</h2>
|
||||
</div></Step.Item>
|
||||
<Step.Item state="previous"
|
||||
><div>
|
||||
<h2 class="done">Add a platform</h2>
|
||||
</div></Step.Item>
|
||||
<Step.Item state="current"
|
||||
><Layout.Stack
|
||||
direction={isSmallViewport ? 'column' : 'row'}
|
||||
gap={isSmallViewport ? 'xl' : 'xxl'}>
|
||||
<Layout.Stack gap="m">
|
||||
<h2>Build your app</h2>
|
||||
<div class="build-info">
|
||||
<span>
|
||||
Continue building your app by setting up services such as Auth,
|
||||
Databases, Storage and Functions.</span>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
<div class="grid">
|
||||
<a
|
||||
class="onboarding-card build-card"
|
||||
href={`${base}/project-${projectId}/databases`}>
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? DatabaseImgSourceDark
|
||||
: DatabaseImgSource}
|
||||
alt="" />
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<h3>Setup your database</h3>
|
||||
<span class="is-only-desktop">
|
||||
<Icon icon={IconArrowRight} color="--neutral-250" />
|
||||
</span></Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</a>
|
||||
<div class="onboarding-card build-card">
|
||||
<div class="card-content card-docs">
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<h3>Discover our docs</h3>
|
||||
<Layout.Stack
|
||||
direction="column"
|
||||
gap="s"
|
||||
justifyContent="flex-end">
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href="https://appwrite.io/docs/references"
|
||||
target="_blank">API references</Link.Anchor>
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href="https://appwrite.io/docs/tutorials"
|
||||
target="_blank">Tutorials</Link.Anchor>
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href="https://appwrite.io/docs/products/storage/quick-start"
|
||||
target="_blank"
|
||||
>Storage quick start
|
||||
</Link.Anchor>
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href="https://appwrite.io/docs/products/functions/quick-start"
|
||||
target="_blank">Functions quick start</Link.Anchor>
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
<div style:container-type="inline-size">
|
||||
<div class="console-container">
|
||||
<div class="dashboard-content">
|
||||
{#if !hasPlatforms}
|
||||
<Step.List>
|
||||
<Step.Item state="previous"
|
||||
><div>
|
||||
<h2 class="done">Create project</h2>
|
||||
</div></Step.Item>
|
||||
<Step.Item state="current"
|
||||
><Layout.Stack
|
||||
direction={isSmallViewport ? 'column' : 'row'}
|
||||
gap={isSmallViewport ? 'xl' : 'xxl'}>
|
||||
<Layout.Stack gap="m">
|
||||
<h2>Add a platform</h2>
|
||||
<div class="build-info">
|
||||
<span>
|
||||
Start building with your preferred web, mobile, and native
|
||||
frameworks.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="onboarding-card card-auth build-card">
|
||||
<div class="card-content">
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<h3>Setup auth</h3>
|
||||
<Layout.Stack
|
||||
direction="column"
|
||||
gap="s"
|
||||
justifyContent="flex-end">
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href={`${base}/project-${projectId}/auth/settings`}
|
||||
>E-mail and password
|
||||
</Link.Anchor>
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href={`${base}/project-${projectId}/auth/settings`}
|
||||
>OAuth 2</Link.Anchor>
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href={`${base}/project-${projectId}/auth/settings`}
|
||||
>View all methods</Link.Anchor>
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? UsersImgSourceDark
|
||||
: UsersImgSource}
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="onboarding-card build-card">
|
||||
<div class="card-content">
|
||||
</Layout.Stack>
|
||||
<div class="grid">
|
||||
<button
|
||||
class="onboarding-card platform-card top-row"
|
||||
on:click={() => addPlatform(0)}>
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? DiscordImgSourceDark
|
||||
: DiscordImgSource}
|
||||
class="discord"
|
||||
? PlatformWebImgSourceDark
|
||||
: PlatformWebImgSource}
|
||||
alt="" />
|
||||
<h3>Discord</h3>
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href="https://appwrite.io/discord"
|
||||
size="l"
|
||||
><Layout.Stack
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
alignItems="flex-end"
|
||||
gap="xxs"
|
||||
><span
|
||||
>Join our Discord for support, tips and product
|
||||
updates</span>
|
||||
justifyContent="space-between"
|
||||
alignItems="flex-end">
|
||||
<h3>Web</h3>
|
||||
|
||||
<div class="is-only-desktop">
|
||||
<Icon
|
||||
icon={IconArrowRight}
|
||||
color="--neutral-250" />
|
||||
</div></Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</button>
|
||||
<button
|
||||
class="onboarding-card platform-card top-row"
|
||||
on:click={createKey}>
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? PlatformServerImgSourceDark
|
||||
: PlatformServerImgSource}
|
||||
alt="" />
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<h3>Server</h3>
|
||||
<div class="is-only-desktop">
|
||||
<Icon
|
||||
icon={IconArrowRight}
|
||||
color="--neutral-250" />
|
||||
</div></Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</button>
|
||||
<button
|
||||
class="onboarding-card platform-card"
|
||||
on:click={() => addPlatform(3)}>
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? PlatformIosImgSourceDark
|
||||
: PlatformIosImgSource}
|
||||
alt="" />
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<h3>Apple</h3>
|
||||
<div class="is-only-desktop">
|
||||
<Icon
|
||||
icon={IconArrowRight}
|
||||
color="--neutral-250" />
|
||||
</div></Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</button>
|
||||
<button
|
||||
class="onboarding-card platform-card"
|
||||
on:click={() => addPlatform(2)}>
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? PlatformAndroidImgSourceDark
|
||||
: PlatformAndroidImgSource}
|
||||
alt="" />
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<h3>Android</h3>
|
||||
<div class="is-only-desktop">
|
||||
<Icon
|
||||
icon={IconArrowRight}
|
||||
color="--neutral-250" />
|
||||
</div></Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="onboarding-card platform-card"
|
||||
on:click={() => addPlatform(1)}>
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? PlatformFlutterImgSourceDark
|
||||
: PlatformFlutterImgSource}
|
||||
alt="" />
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<h3>Flutter</h3>
|
||||
<div class="is-only-desktop">
|
||||
<Icon
|
||||
icon={IconArrowRight}
|
||||
color="--neutral-250" />
|
||||
</div></Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</button>
|
||||
</div>
|
||||
</Layout.Stack></Step.Item>
|
||||
<Step.Item state="next"
|
||||
><div>
|
||||
<h2 class="done">Build your app</h2>
|
||||
</div></Step.Item>
|
||||
</Step.List>
|
||||
{:else}
|
||||
<Step.List>
|
||||
<Step.Item state="previous"
|
||||
><div>
|
||||
<h2 class="done">Create project</h2>
|
||||
</div></Step.Item>
|
||||
<Step.Item state="previous"
|
||||
><div>
|
||||
<h2 class="done">Add a platform</h2>
|
||||
</div></Step.Item>
|
||||
<Step.Item state="current"
|
||||
><Layout.Stack
|
||||
direction={isSmallViewport ? 'column' : 'row'}
|
||||
gap={isSmallViewport ? 'xl' : 'xxl'}>
|
||||
<Layout.Stack gap="m">
|
||||
<h2>Build your app</h2>
|
||||
<div class="build-info">
|
||||
<span>
|
||||
Continue building your app by setting up services such as
|
||||
Auth, Databases, Storage and Functions.</span>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
<div class="grid">
|
||||
<a
|
||||
class="onboarding-card build-card"
|
||||
href={`${base}/project-${projectId}/databases`}>
|
||||
<Layout.Stack direction="column" justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? DatabaseImgSourceDark
|
||||
: DatabaseImgSource}
|
||||
alt="" />
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center">
|
||||
<h3>Setup your database</h3>
|
||||
<span class="is-only-desktop">
|
||||
<Icon
|
||||
icon={IconArrowRight}
|
||||
size="s"
|
||||
color="--neutral-250" />
|
||||
</span></Layout.Stack
|
||||
></Link.Anchor>
|
||||
</span></Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</a>
|
||||
<div class="onboarding-card build-card">
|
||||
<div class="card-content card-docs">
|
||||
<Layout.Stack
|
||||
direction="column"
|
||||
justifyContent="space-between">
|
||||
<h3>Discover our docs</h3>
|
||||
<Layout.Stack
|
||||
direction="column"
|
||||
gap="s"
|
||||
justifyContent="flex-end">
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href="https://appwrite.io/docs/references"
|
||||
target="_blank">API references</Link.Anchor>
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href="https://appwrite.io/docs/tutorials"
|
||||
target="_blank">Tutorials</Link.Anchor>
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href="https://appwrite.io/docs/products/storage/quick-start"
|
||||
target="_blank"
|
||||
>Storage quick start
|
||||
</Link.Anchor>
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href="https://appwrite.io/docs/products/functions/quick-start"
|
||||
target="_blank"
|
||||
>Functions quick start</Link.Anchor>
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
</div>
|
||||
<div class="onboarding-card card-auth build-card">
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="column"
|
||||
justifyContent="space-between">
|
||||
<h3>Setup auth</h3>
|
||||
<Layout.Stack
|
||||
direction="column"
|
||||
gap="s"
|
||||
justifyContent="flex-end">
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href={`${base}/project-${projectId}/auth/settings`}
|
||||
>E-mail and password
|
||||
</Link.Anchor>
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href={`${base}/project-${projectId}/auth/settings`}
|
||||
>OAuth 2</Link.Anchor>
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href={`${base}/project-${projectId}/auth/settings`}
|
||||
>View all methods</Link.Anchor>
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? UsersImgSourceDark
|
||||
: UsersImgSource}
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="onboarding-card build-card">
|
||||
<div class="card-content">
|
||||
<Layout.Stack
|
||||
direction="column"
|
||||
justifyContent="space-between">
|
||||
<img
|
||||
src={$app.themeInUse === 'dark'
|
||||
? DiscordImgSourceDark
|
||||
: DiscordImgSource}
|
||||
class="discord"
|
||||
alt="" />
|
||||
<h3>Discord</h3>
|
||||
<Link.Anchor
|
||||
variant="quiet-muted"
|
||||
href="https://appwrite.io/discord"
|
||||
size="l"
|
||||
><Layout.Stack
|
||||
direction="row"
|
||||
alignItems="flex-end"
|
||||
gap="xxs"
|
||||
><span
|
||||
>Join our Discord for support, tips and
|
||||
product updates</span>
|
||||
<span class="is-only-desktop">
|
||||
<Icon
|
||||
icon={IconArrowRight}
|
||||
size="s"
|
||||
color="--neutral-250" />
|
||||
</span></Layout.Stack
|
||||
></Link.Anchor>
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout.Stack></Step.Item>
|
||||
</Step.List>
|
||||
{/if}
|
||||
</Layout.Stack></Step.Item>
|
||||
</Step.List>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user