self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-24 08:52:28 +02:00
Code Issues Releases Activity

refactor(web): supporter badge (#11656)

Browse Source 
* refactor(web): supporter badge

* add style lang
This commit is contained in:
Michel Heusschen 2024-08-08 20:02:44 +02:00 committed by GitHub
parent 4a42a72bd3
commit 96481aae5d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 51 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/app.css
View File

@ -142,46 +142,4 @@ input:focus-visible {
.scrollbar-stable {
scrollbar-gutter: stable both-edges;
}
/* Supporter Effect */
.supporter-effect {
position: relative;
border: 0px solid transparent;
background-clip: padding-box;
animation: gradient 10s ease infinite;
z-index: 1;
}
.supporter-effect:hover:after {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: linear-gradient(
to right,
rgba(16, 132, 254, 0.25),
rgba(229, 125, 175, 0.25),
rgba(254, 36, 29, 0.25),
rgba(255, 183, 0, 0.25),
rgba(22, 193, 68, 0.25)
);
content: '';
border-radius: 8px;
animation: gradient 10s ease infinite;
background-size: 400% 400%;
z-index: -1;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
}

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

@ -16,6 +16,7 @@
import { handleError } from '$lib/utils/handle-error';
import { preferences } from '$lib/stores/user.store';
import { getButtonVisibility } from '$lib/utils/purchase-utils';
import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
let showMessage = false;
let isOpen = false;
@ -83,14 +84,7 @@
class="w-full"
type="button"
>
<div
class="flex gap-1 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-200/50 p-2 border supporter-effect rounded-lg transition-all"
>
<div class="h-6 w-6">
<ImmichLogo noText />
</div>
<p class="dark:text-gray-100">{$t('purchase_account_info')}</p>
</div>
<SupporterBadge />
</button>
{:else if !$isPurchased && showBuyButton}
<button

47
web/src/lib/components/shared-components/side-bar/supporter-badge.svelte Normal file
View File

@ -0,0 +1,47 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import ImmichLogo from '../immich-logo.svelte';
export let centered = false;
export let logoSize: 'sm' | 'lg' = 'sm';
</script>
<div
class="flex gap-1 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-200/50 p-2 rounded-lg bg-clip-padding border border-transparent relative supporter-effect"
class:place-content-center={centered}
>
<ImmichLogo class={logoSize === 'sm' ? 'size-6' : 'size-8'} noText />
<p class="dark:text-gray-100">{$t('purchase_account_info')}</p>
</div>
<style lang="postcss">
.supporter-effect::after {
@apply absolute inset-0 rounded-lg opacity-0 transition-opacity content-[''];
}
.supporter-effect:hover::after {
@apply opacity-100;
background: linear-gradient(
to right,
rgba(16, 132, 254, 0.25),
rgba(229, 125, 175, 0.25),
rgba(254, 36, 29, 0.25),
rgba(255, 183, 0, 0.25),
rgba(22, 193, 68, 0.25)
);
animation: gradient 10s ease infinite;
background-size: 400% 400%;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>

11
web/src/routes/(user)/buy/+page.svelte
View File

@ -9,7 +9,7 @@
import Icon from '$lib/components/elements/icon.svelte';
import { mdiAlertCircleOutline } from '@mdi/js';
import { purchaseStore } from '$lib/stores/purchase.store';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
export let data: PageData;
let showLicenseActivated = false;
@ -30,14 +30,7 @@
{/if}
{#if $isPurchased}
<div
class="flex gap-1 mt-2 place-items-center place-content-center dark:bg-immich-dark-primary/10 bg-gray-200/50 p-2 border rounded-lg dark:text-white supporter-effect"
>
<div class="h-8 w-8">
<ImmichLogo noText />
</div>
<p>{$t('purchase_account_info')}</p>
</div>
<SupporterBadge logoSize="lg" centered />
{/if}
{#if showLicenseActivated || data.isActivated === true}