mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
fix: wizard spacing issues
This commit is contained in:
tglide
@@ -12,7 +12,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<header class="form-header">
|
||||
<header class="form-header" class:hide-divider={!$$slots.subtitle}>
|
||||
<Heading tag="h1" size="6">
|
||||
<slot name="title" />
|
||||
</Heading>
|
||||
@@ -24,3 +24,10 @@
|
||||
</header>
|
||||
|
||||
<slot />
|
||||
|
||||
<style>
|
||||
.hide-divider {
|
||||
padding-block-end: 0;
|
||||
border-block-end: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,7 +12,15 @@
|
||||
<WizardStep>
|
||||
<svelte:fragment slot="title">Get the SDK</svelte:fragment>
|
||||
<p>First, add this to your root level build.gradle file:</p>
|
||||
<Code label="Groovy" labelIcon="android" language="kotlin" code={example1} withCopy />
|
||||
<div class="u-margin-block-start-16">
|
||||
<Code
|
||||
label="Groovy"
|
||||
labelIcon="android"
|
||||
language="kotlin"
|
||||
code={example1}
|
||||
withCopy
|
||||
noMargin />
|
||||
</div>
|
||||
<p class="common-section">And add this to your project's build.gradle file:</p>
|
||||
<Code label="Groovy" labelIcon="android" language="kotlin" code={example2} withCopy />
|
||||
</WizardStep>
|
||||
|
||||
@@ -16,12 +16,12 @@ let client = Client()
|
||||
<svelte:fragment slot="title">Let's get coding</svelte:fragment>
|
||||
|
||||
<h2 class="heading-level-7">Init your SDK</h2>
|
||||
<p>
|
||||
<p class="u-margin-block-start-8">
|
||||
Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
|
||||
can be found in your project settings page.
|
||||
</p>
|
||||
<Code label="Apple SDK" labelIcon="apple" language="swift" {code} withCopy withLineNumbers />
|
||||
<p>
|
||||
<p class="u-margin-block-start-24">
|
||||
Before sending any API calls to your new Appwrite project, make sure your device or emulator
|
||||
has network access to your Appwrite project's hostname or IP address.
|
||||
</p>
|
||||
|
||||
+39
-40
@@ -110,46 +110,45 @@
|
||||
|
||||
<WizardStep {beforeSubmit}>
|
||||
<svelte:fragment slot="title">Register your Flutter app</svelte:fragment>
|
||||
<svelte:fragment slot="subtitle">
|
||||
<div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap">
|
||||
<Pill
|
||||
button
|
||||
on:click={() => (platform = Platform.Android)}
|
||||
selected={platform === Platform.Android}>
|
||||
Android
|
||||
</Pill>
|
||||
<Pill
|
||||
button
|
||||
on:click={() => (platform = Platform.Ios)}
|
||||
selected={platform === Platform.Ios}>
|
||||
iOS
|
||||
</Pill>
|
||||
<Pill
|
||||
button
|
||||
on:click={() => (platform = Platform.Linux)}
|
||||
selected={platform === Platform.Linux}>
|
||||
Linux
|
||||
</Pill>
|
||||
<Pill
|
||||
button
|
||||
on:click={() => (platform = Platform.Macos)}
|
||||
selected={platform === Platform.Macos}>
|
||||
Mac OS
|
||||
</Pill>
|
||||
<Pill
|
||||
button
|
||||
on:click={() => (platform = Platform.Windows)}
|
||||
selected={platform === Platform.Windows}>
|
||||
Windows
|
||||
</Pill>
|
||||
<Pill
|
||||
button
|
||||
on:click={() => (platform = Platform.Web)}
|
||||
selected={platform === Platform.Web}>
|
||||
Web
|
||||
</Pill>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
|
||||
<div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap">
|
||||
<Pill
|
||||
button
|
||||
on:click={() => (platform = Platform.Android)}
|
||||
selected={platform === Platform.Android}>
|
||||
Android
|
||||
</Pill>
|
||||
<Pill
|
||||
button
|
||||
on:click={() => (platform = Platform.Ios)}
|
||||
selected={platform === Platform.Ios}>
|
||||
iOS
|
||||
</Pill>
|
||||
<Pill
|
||||
button
|
||||
on:click={() => (platform = Platform.Linux)}
|
||||
selected={platform === Platform.Linux}>
|
||||
Linux
|
||||
</Pill>
|
||||
<Pill
|
||||
button
|
||||
on:click={() => (platform = Platform.Macos)}
|
||||
selected={platform === Platform.Macos}>
|
||||
Mac OS
|
||||
</Pill>
|
||||
<Pill
|
||||
button
|
||||
on:click={() => (platform = Platform.Windows)}
|
||||
selected={platform === Platform.Windows}>
|
||||
Windows
|
||||
</Pill>
|
||||
<Pill
|
||||
button
|
||||
on:click={() => (platform = Platform.Web)}
|
||||
selected={platform === Platform.Web}>
|
||||
Web
|
||||
</Pill>
|
||||
</div>
|
||||
|
||||
<FormList isCommonSection>
|
||||
<InputText
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<svelte:fragment slot="title">Get the SDK</svelte:fragment>
|
||||
|
||||
<p>Add Appwrite SDK to your package's pubspec.yaml file. You can view an example here.</p>
|
||||
<Code label="YAML" language="yml" code={example1} withCopy />
|
||||
<Code label="YAML" language="yml" code={example1} withCopy noMargin />
|
||||
<p class="common-section">
|
||||
You can also install the SDK using the Dart package manager from your terminal:
|
||||
</p>
|
||||
|
||||
@@ -22,40 +22,49 @@
|
||||
|
||||
<WizardStep>
|
||||
<svelte:fragment slot="title">Get the SDK</svelte:fragment>
|
||||
<svelte:fragment slot="subtitle">
|
||||
Choose your preferred method of installation
|
||||
<div class="u-flex u-gap-16 u-margin-block-start-8">
|
||||
<Pill button on:click={() => (method = Method.NPM)} selected={method === Method.NPM}>
|
||||
NPM
|
||||
</Pill>
|
||||
<Pill button on:click={() => (method = Method.CDN)} selected={method === Method.CDN}>
|
||||
CDN
|
||||
</Pill>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
{#if method === Method.NPM}
|
||||
<p>
|
||||
Use <a href="https://npmjs.org" target="_blank" rel="noopener noreferrer" class="link"
|
||||
>NPM (node package manager)</a> from your command line to add Appwrite SDK to your project.
|
||||
</p>
|
||||
<Code label="Bash" language="sh" code="npm install appwrite" withCopy />
|
||||
<p class="common-section">
|
||||
When you're using a bundler (like <a
|
||||
href="https://vitejs.dev"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="link">Vite</a>
|
||||
or
|
||||
<a href="https://rollupjs.org" target="_blank" rel="noopener noreferrer" class="link"
|
||||
>Rollup</a
|
||||
>), import the Appwrite module when you need it:
|
||||
</p>
|
||||
<Code label="Web SDK" labelIcon="code" language="js" code={example1} withCopy />
|
||||
{:else if method === Method.CDN}
|
||||
<p>
|
||||
To install with a CDN (content delivery network) add the following scripts to the bottom
|
||||
of your tag, but before you use any Appwrite services:
|
||||
</p>
|
||||
<Code label="HTML" language="html" code={example2} withCopy />
|
||||
{/if}
|
||||
|
||||
<p>Choose your preferred method of installation</p>
|
||||
<div class="u-flex u-gap-16 u-margin-block-start-8">
|
||||
<Pill button on:click={() => (method = Method.NPM)} selected={method === Method.NPM}>
|
||||
NPM
|
||||
</Pill>
|
||||
<Pill button on:click={() => (method = Method.CDN)} selected={method === Method.CDN}>
|
||||
CDN
|
||||
</Pill>
|
||||
</div>
|
||||
|
||||
<div class="u-margin-block-start-32">
|
||||
{#if method === Method.NPM}
|
||||
<p>
|
||||
Use
|
||||
<a href="https://npmjs.org" target="_blank" rel="noopener noreferrer" class="link"
|
||||
>NPM (node package manager)</a> from your command line to add Appwrite SDK to your
|
||||
project.
|
||||
</p>
|
||||
<div class="u-margin-block-start-16">
|
||||
<Code label="Bash" language="sh" code="npm install appwrite" withCopy noMargin />
|
||||
</div>
|
||||
<p class="common-section">
|
||||
When you're using a bundler (like <a
|
||||
href="https://vitejs.dev"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="link">Vite</a>
|
||||
or
|
||||
<a
|
||||
href="https://rollupjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="link">Rollup</a
|
||||
>), import the Appwrite module when you need it:
|
||||
</p>
|
||||
<Code label="Web SDK" labelIcon="code" language="js" code={example1} withCopy />
|
||||
{:else if method === Method.CDN}
|
||||
<p>
|
||||
To install with a CDN (content delivery network) add the following scripts to the
|
||||
bottom of your tag, but before you use any Appwrite services:
|
||||
</p>
|
||||
<Code label="HTML" language="html" code={example2} withCopy />
|
||||
{/if}
|
||||
</div>
|
||||
</WizardStep>
|
||||
|
||||
Reference in New Issue
Block a user