fix: use correct selector cards to avoid that blatant, unneeded bottom padding/empty-spacing-taking element.

This commit is contained in:
Darshan
2025-05-31 12:48:11 +05:30
parent 85fffc4b5e
commit ff2c5f269c
3 changed files with 29 additions and 37 deletions
@@ -4,6 +4,7 @@
import { createPlatform } from './wizard/store';
import { Dependencies } from '$lib/constants';
import {
Card as Pink2Card,
Code,
Layout,
Icon,
@@ -26,7 +27,6 @@
import { PlatformType } from '@appwrite.io/console';
import { isCloud } from '$lib/system';
import { app } from '$lib/stores/app';
import { LabelCard } from '$lib/components';
let showExitModal = false;
let isPlatformCreated = false;
@@ -106,20 +106,17 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
<Form onSubmit={createApplePlatform}>
<Layout.Stack gap="xxl">
<!-- Step One -->
<Layout.Stack gap="l" direction="row">
<Layout.Grid gap="l" rowGap="l" columns={4} columnsXS={2}>
{#each Object.entries(platforms) as [key, value]}
<div class="u-width-full-line">
<!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
<LabelCard
name={key}
bind:group={platform}
variant="primary"
{value}
title={key}
disabled={isPlatformCreated} />
</div>
<Pink2Card.Selector
{value}
id={key}
title={key}
imageRadius="s"
name="framework"
bind:group={platform} />
{/each}
</Layout.Stack>
</Layout.Grid>
<!-- Step Two -->
{#if !isPlatformCreated}
@@ -4,6 +4,7 @@
import { createPlatform } from './wizard/store';
import { Dependencies } from '$lib/constants';
import {
Card as Pink2Card,
Code,
Layout,
Icon,
@@ -25,7 +26,6 @@
import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
import { PlatformType } from '@appwrite.io/console';
import { isCloud } from '$lib/system';
import { LabelCard } from '$lib/components';
let showExitModal = false;
let isPlatformCreated = false;
@@ -163,19 +163,17 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
<Form onSubmit={createFlutterPlatform}>
<Layout.Stack gap="xxl">
<!-- Step One -->
<Layout.Stack gap="l" direction="row">
<Layout.Grid gap="l" rowGap="l" columns={3} columnsXS={2} columnsXXS={1}>
{#each Object.entries(platforms) as [key, value]}
<div class="u-width-full-line">
<!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
<LabelCard
name={key}
bind:group={platform}
variant="primary"
{value}
title={key} />
</div>
<Pink2Card.Selector
{value}
id={key}
title={key}
imageRadius="s"
name="framework"
bind:group={platform} />
{/each}
</Layout.Stack>
</Layout.Grid>
<!-- Step Two -->
{#if !isPlatformCreated}
@@ -4,6 +4,7 @@
import { createPlatform } from './wizard/store';
import { Dependencies } from '$lib/constants';
import {
Card as Pink2Card,
Code,
Layout,
Icon,
@@ -25,7 +26,6 @@
import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
import { PlatformType } from '@appwrite.io/console';
import { isCloud } from '$lib/system';
import { LabelCard } from '$lib/components';
let showExitModal = false;
let isPlatformCreated = false;
@@ -133,18 +133,15 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.para
<Form onSubmit={createReactNativePlatform}>
<Layout.Stack gap="xxl">
<!-- Step One -->
<Layout.Stack gap="l" direction="row">
<Layout.Stack gap="l">
{#each Object.entries(platforms) as [key, value]}
<div class="u-width-full-line">
<!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
<LabelCard
name={key}
bind:group={platform}
variant="primary"
{value}
title={key}
disabled={isPlatformCreated} />
</div>
<Pink2Card.Selector
{value}
id={key}
title={key}
imageRadius="s"
name="framework"
bind:group={platform} />
{/each}
</Layout.Stack>