diff options
| author | Adam Soltys <[email protected]> | 2022-09-07 13:58:00 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2022-09-07 13:58:00 -0700 |
| commit | ec5a14d7d61d5f1797fcfba67dd2d8ef0cca2360 (patch) | |
| tree | 0b138f7fce9b7b6f64bdbb8c0a0103d48f9088b5 /src/components | |
| parent | 7efa00c9a9cf6587e9c24c1c94d3c8969949e360 (diff) | |
| download | coinos-ui-ec5a14d7d61d5f1797fcfba67dd2d8ef0cca2360.tar.gz coinos-ui-ec5a14d7d61d5f1797fcfba67dd2d8ef0cca2360.zip | |
image uploads
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AppHeader.svelte | 25 | ||||
| -rw-r--r-- | src/components/Qr.svelte | 5 |
2 files changed, 20 insertions, 10 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 7b3987d5..35e6f250 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -1,6 +1,4 @@ <script> - // we will want to dynamically use the users avatar on this screen if they have uploaded one - import OutClick from 'svelte-outclick'; import { user, newPayment, colorTheme } from '$lib/store'; import { goto } from '$app/navigation'; @@ -26,9 +24,11 @@ goto(`/${$user.username + '/' + item}`); } }; + + $: background = $user?.banner ? `url(/api/public/${$user.username}-banner.png)` : undefined; </script> -<header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative"> +<header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative" style:background> <nav class="flex justify-end items-center space-x-4 p-5"> {#if $user} <a href={`/${$user.username}/receive`}> @@ -91,11 +91,20 @@ </a> {/if} </nav> - <div - class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24" - > - <Icon icon="logo-symbol-white" style="mx-auto" /> - </div> + {#if $user.profile} + <div class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full overflow-hidden text-center w-24 h-24 my-auto"> + <img + src={`/api/public/${$user.username}-profile.png`} + class="absolute w-full h-full object-cover object-center visible overflow-hidden" + /> + </div> + {:else} + <div + class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24" + > + <Icon icon="logo-symbol-white" style="mx-auto" /> + </div> + {/if} </header> <style> diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte index 52bb7a65..4929137a 100644 --- a/src/components/Qr.svelte +++ b/src/components/Qr.svelte @@ -5,7 +5,8 @@ export let image, text, qr; - onMount(async () => { + $: update(text); + let update = async (text) => { if (!(browser && text)) return; let { default: QRCodeStyling } = await import('qr-code-styling'); @@ -28,7 +29,7 @@ while (qr.firstChild) qr.removeChild(qr.lastChild); qrCode.append(qr); - }); + } </script> <div bind:this={qr} on:click={() => copy(text)} /> |