Skip to content

Commit

Permalink
feat: responsive footer (#64)
Browse files Browse the repository at this point in the history 
feat: responsive footer and claim page
  • Loading branch information
@jrasm91
jrasm91 authored Nov 20, 2024
1 parent 6ef8b77 commit 702d1c8
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 62 deletions.
6 changes: 4 additions & 2 deletions apps/buy.immich.app/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@
let { children }: Props = $props();
</script>

<section class="w-screen h-screen overflow-auto grid grid-rows-[auto_60px] lg:h-screen">
{@render children?.()}
<section class="flex flex-col w-screen h-screen overflow-auto">
<div class="grow">
{@render children?.()}
</div>
<Footer />
</section>
91 changes: 38 additions & 53 deletions apps/buy.immich.app/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
import { getCallbackUrl, ImmichLicense } from '$lib/utils/license';
import { Button, Heading, Icon, Logo, Stack, SupporterBadge, Text } from '@immich/ui';
import { mdiAccount, mdiCheckCircleOutline, mdiServer } from '@mdi/js';
const serverFeatures = ['For the whole server', 'Lifetime purchase', 'Supporter status'];
const userFeatures = ['For an individual', 'Lifetime purchase', 'Supporter status'];
</script>

<div class="w-full h-full md:max-w-[800px] p-4 sm:p-8 lg:p-10 m-auto">
Expand All @@ -13,77 +16,59 @@
<Heading size="large" color="primary">Purchase Immich</Heading>
</SupporterBadge>
<section>
<div class="flex gap-6 justify-between flex-wrap lg:flex-nowrap">
<div class="flex gap-4 justify-between flex-wrap lg:flex-nowrap">
<!-- SERVER -->
<div
class="border border-gray-300 dark:border-gray-800 w-full p-4 md:p-8 rounded-2xl bg-gray-100 dark:bg-gray-900 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/20 transition-all"
class="flex flex-col gap-4 border border-gray-300 dark:border-gray-800 w-full p-4 md:p-8 rounded-2xl bg-gray-100 dark:bg-gray-900 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/20 transition-all"
>
<div class="hidden md:block text-immich-primary dark:text-immich-dark-primary">
<div class="hidden md:flex flex-col gap-1 text-primary">
<Icon icon={mdiServer} size="56" />
<p class="font-semibold text-lg mt-1">Server</p>
</div>

<div class="mt-4 dark:text-immich-gray">
<p class="text-6xl font-bold">$100</p>
<p>per server</p>
<Text fontWeight="bold" size="large">Server</Text>
</div>

<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<Text>For the whole server</Text>
</div>

<div class="grid grid-cols-[36px_auto]">
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<Text>Lifetime purchase</Text>
</div>

<div class="grid grid-cols-[36px_auto]">
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<Text>Supporter status</Text>
</div>
</div>
<Stack gap={0}>
<Heading size="giant" class="text-6xl">$100</Heading>
<Text>per server</Text>
</Stack>

<Stack gap={8}>
<Stack gap={1}>
{#each serverFeatures as feature}
<div class="grid grid-cols-[36px_auto] items-center">
<Icon icon={mdiCheckCircleOutline} size="24" class="text-success" />
<Text class="text-immich-gray">{feature}</Text>
</div>
{/each}
</Stack>
<Button href={getCallbackUrl(ImmichLicense.Server)} fullWidth size="large">Select</Button>
</div>
</Stack>
</div>

<!-- INDIVIDUAL -->
<div
class="border border-gray-300 dark:border-gray-800 w-full p-4 md:p-8 rounded-2xl bg-gray-100 dark:bg-gray-900 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/20"
class="flex flex-col gap-4 border border-gray-300 dark:border-gray-800 w-full p-4 md:p-8 rounded-2xl bg-gray-100 dark:bg-gray-900 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/20 transition-all"
>
<div class="hidden md:block text-immich-primary dark:text-immich-dark-primary">
<div class="hidden md:flex flex-col gap-1 text-primary">
<Icon icon={mdiAccount} size="56" />
<p class="font-semibold text-lg mt-1">Individual</p>
<Text fontWeight="bold" size="large">Individual</Text>
</div>

<div class="mt-4 dark:text-immich-gray">
<p class="text-6xl font-bold">$25</p>
<p>per user</p>
</div>

<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<Text>For an individual</Text>
</div>

<div class="grid grid-cols-[36px_auto]">
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<Text>Lifetime purchase</Text>
</div>

<div class="grid grid-cols-[36px_auto]">
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<Text>Supporter status</Text>
</div>
</div>
<Stack gap={0}>
<Heading size="giant" class="text-6xl">$25</Heading>
<Text>per user</Text>
</Stack>

<Stack gap={8}>
<Stack gap={1}>
{#each userFeatures as feature}
<div class="grid grid-cols-[36px_auto] items-center">
<Icon icon={mdiCheckCircleOutline} size="24" class="text-success" />
<Text class="text-immich-gray">{feature}</Text>
</div>
{/each}
</Stack>
<Button href={getCallbackUrl(ImmichLicense.Individual)} fullWidth size="large">Select</Button>
</div>
</Stack>
</div>
</div>
</section>
Expand Down
6 changes: 3 additions & 3 deletions apps/buy.immich.app/claim/[[id]]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@
</section>

{#if response}
<div class="flex gap-2 items-center">
<img src={response.imageUrl} class="h-16" alt="GitHub profile" />
<div class="flex flex-col sm:flex-row gap-4 sm:items-center">
<img src={response.imageUrl} class="h-16 w-16" alt="GitHub profile" />
<div>
<p class="text-2xl">Welcome back <strong>{response.username}</strong>!</p>
<Text size="giant">Welcome back <strong>{response.username}</strong>!</Text>
{#if response.licenses.length > 0}
<Text size="large">
We found <strong>{response.licenses.length}</strong> product key{s(response.licenses.length)}.
Expand Down
6 changes: 4 additions & 2 deletions apps/my.immich.app/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@
let { children }: Props = $props();
</script>

<section class="w-screen h-screen overflow-auto grid grid-rows-[auto_60px] lg:h-screen">
{@render children?.()}
<section class="flex flex-col w-screen h-screen overflow-auto">
<div class="grow">
{@render children?.()}
</div>
<Footer />
</section>
4 changes: 2 additions & 2 deletions src/lib/components/footer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
import { mdiGithub, mdiWeb } from '@mdi/js';
</script>

<div class="flex flex-col place-content-center bg-dark/10">
<div class="flex place-items-center place-content-center gap-4">
<div class="flex flex-col place-content-center bg-dark/10 p-4">
<div class="flex flex-col md:flex-row place-items-center place-content-center gap-4">
<Link href="https://github.com/immich-app/immich" target="_blank" rel="noopener noreferrer">
<HStack gap={1}>
<Icon icon={mdiGithub} />
Expand Down

0 comments on commit 702d1c8

Please sign in to comment.