Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix sizing platform cards

Browse Source
This commit is contained in:
ernstmul
2025-01-28 12:56:30 +01:00
parent 8b6303f697
commit fbc6839850
5 changed files with 85 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(console)/project-[project]/overview/assets/platform-server-dark.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 114 KiB

After

Width:  |  Height:  |  Size: 115 KiB

src/routes/(console)/project-[project]/overview/assets/platform-server.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 139 KiB

After

Width:  |  Height:  |  Size: 139 KiB

src/routes/(console)/project-[project]/overview/assets/platform-web-dark.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 136 KiB

src/routes/(console)/project-[project]/overview/assets/platform-web.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 145 KiB

After

Width:  |  Height:  |  Size: 146 KiB

src/routes/(console)/project-[project]/overview/onboard.svelte
+85 -79
View File
@@ -96,97 +96,107 @@
<button
class="onboarding-card platform-card top-row"
on:click={() => addPlatform(0)}>
<img
src={$app.themeInUse == 'dark'
? PlatformWebImgSourceDark
: PlatformWebImgSource}
alt="" />
<div class="card-content">
<Layout.Stack
direction="row"
justifyContent="space-between"
alignItems="center">
<h3>Web</h3>
<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>
<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}>
<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 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)}>
<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 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)}>
<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 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)}>
<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 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>
@@ -522,10 +532,6 @@
height: 100%;
display: flex;
flex-direction: column;
h3 {
margin-block-end: var(--space-4);
}
}
.card-docs {