self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-03-11 15:09:45 +02:00
Code Issues Releases Activity

fix: purchase modal and button on small screens

Browse Source
This commit is contained in:
ben-basten 2025-03-10 23:20:31 -04:00
parent 7d8f6726de
commit 3097a25e4f
No known key found for this signature in database
GPG Key ID: B4564F0C64C40FC3
4 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/components/shared-components/purchasing/individual-purchase-option-card.svelte
View File

@ -8,7 +8,9 @@
</script>
<!-- Individual Purchase Option -->
<div class="border border-gray-300 dark:border-gray-800 w-[375px] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900">
<div
class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900"
>
<div class="text-immich-primary dark:text-immich-dark-primary">
<Icon path={mdiAccount} size="56" />
<p class="font-semibold text-lg mt-1">{$t('purchase_individual_title')}</p>

2
web/src/lib/components/shared-components/purchasing/purchase-content.svelte
View File

@ -57,7 +57,7 @@
</div>
{/if}
<div class="flex gap-6 mt-4 justify-between">
<div class="flex flex-col sm:flex-row gap-6 mt-4 justify-between">
<ServerPurchaseOptionCard />
<UserPurchaseOptionCard />
</div>

4
web/src/lib/components/shared-components/purchasing/server-purchase-option-card.svelte
View File

@ -8,7 +8,9 @@
</script>
<!-- SERVER Purchase Options -->
<div class="border border-gray-300 dark:border-gray-800 w-[375px] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900">
<div
class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900"
>
<div class="text-immich-primary dark:text-immich-dark-primary">
<Icon path={mdiServer} size="56" />
<p class="font-semibold text-lg mt-1">{$t('purchase_server_title')}</p>

4
web/src/lib/components/shared-components/side-bar/purchase-info.svelte
View File

@ -110,7 +110,7 @@
<div>
<Icon
path={mdiInformationOutline}
class="flex text-immich-primary dark:text-immich-dark-primary font-medium"
class="hidden md:flex text-immich-primary dark:text-immich-dark-primary font-medium"
size="18"
/>
</div>
@ -122,7 +122,7 @@
<Portal target="body">
{#if showMessage}
<div
class="w-[500px] absolute bottom-[75px] left-[255px] bg-gray-50 dark:border-gray-800 border border-gray-200 dark:bg-immich-dark-gray dark:text-white text-black rounded-3xl z-10 shadow-2xl px-8 py-6"
class="hidden md:block w-[500px] absolute bottom-[75px] left-[255px] bg-gray-50 dark:border-gray-800 border border-gray-200 dark:bg-immich-dark-gray dark:text-white text-black rounded-3xl z-10 shadow-2xl px-8 py-6"
transition:fade={{ duration: 150 }}
onmouseover={() => (hoverMessage = true)}
onmouseleave={() => (hoverMessage = false)}