Skip to content

Refactor: wizard spacings #320

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TorstenDittmann merged 2 commits into from
Feb 24, 2023
Merged

Refactor: wizard spacings #320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8fff4ed
fix: wizard spacing issues
TGlide Feb 23, 2023
f6ff291
fix: more spacings
TGlide Feb 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/lib/layout/wizardStep.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -24,3 +24,10 @@
</header>

<slot />

<style>
.hide-divider {
padding-block-end: 0;
border-block-end: none;
}
</style>
10 changes: 9 additions & 1 deletion src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 2 additions & 2 deletions src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
79 changes: 39 additions & 40 deletions src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@
<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 />
<div class="u-margin-block-start-16">
<Code label="YAML" language="yml" code={example1} withCopy noMargin />
</div>
<p class="common-section">
You can also install the SDK using the Dart package manager from your terminal:
</p>
Expand Down
11 changes: 10 additions & 1 deletion src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,16 @@ client
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="Flutter SDK" labelIcon="flutter" language="dart" {code} withCopy withLineNumbers />
<div class="u-margin-block-start-16">
<Code
label="Flutter SDK"
labelIcon="flutter"
language="dart"
{code}
withCopy
withLineNumbers
noMargin />
</div>
<p class="common-section">
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.
Expand Down
81 changes: 45 additions & 36 deletions src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>