Skip to content
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

feat: responsive footer #64

Merged
merged 1 commit into from
Nov 20, 2024
Merged

feat: responsive footer #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 4 additions & 2 deletions apps/buy.immich.app/+layout.svelte
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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