diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/AppHeader.svelte | 30 | ||||
| -rw-r--r-- | src/components/Avatar.svelte | 25 | ||||
| -rw-r--r-- | src/components/index.js | 1 | ||||
| -rw-r--r-- | src/routes/send/user/[username]/[...amount]/+page.svelte | 10 |
4 files changed, 39 insertions, 27 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 94bd9b1a..59cd70da 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -2,7 +2,7 @@ import OutClick from 'svelte-outclick'; import { newPayment, colorTheme, tempProfileFiles } from '$lib/store'; import { goto } from '$app/navigation'; - import { Icon } from '$comp'; + import { Avatar, Icon } from '$comp'; import { t } from '$lib/translations'; import { page } from '$app/stores'; @@ -31,7 +31,7 @@ } }; - $: background = + $: bg = $tempProfileFiles && $tempProfileFiles.banner ? `url(${$tempProfileFiles.banner})` : subject?.banner @@ -39,7 +39,7 @@ : undefined; </script> -<header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative" style:background> +<header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative bg-cover" style:background-image={bg} > <nav class="flex justify-end items-center space-x-4 p-5"> {#if user} <a href={`/${user.username}/receive`}> @@ -119,27 +119,9 @@ </a> {/if} </nav> - {#if subject?.profile} - <div - class="absolute top-[111px] {avatarPosition} rounded-full border-4 border-white overflow-hidden w-32 h-32" - > - <a href={`/${subject.username}`}> - <img - src={$tempProfileFiles && $tempProfileFiles.profile - ? $tempProfileFiles.profile - : `/api/public/${subject.username}-profile.png`} - class="w-full h-full object-cover object-center overflow-hidden" - alt={subject.username} - /> - </a> - </div> - {:else} - <div - class="absolute top-[111px] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-32 h-32 flex justify-center items-center" - > - <Icon icon="logo-symbol-white" /> - </div> - {/if} + <div class="absolute left-[calc(50vw-64px)] md:left-[calc(15vw-48px)] -bottom-[64px]"> + <Avatar user={subject} /> + </div> </header> <style> diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte new file mode 100644 index 00000000..9b9547da --- /dev/null +++ b/src/components/Avatar.svelte @@ -0,0 +1,25 @@ +<script> + import { colorTheme, tempProfileFiles } from '$lib/store'; + import { Icon } from '$comp'; + + export let avatarPosition; + export let user; +</script> + +<div + class="rounded-full border-4 border-white overflow-hidden w-32 h-32 bg-gradient-to-r {$colorTheme} flex justify-center items-center" +> + <a href={`/${user.username}`}> + {#if user?.profile} + <img + src={$tempProfileFiles && $tempProfileFiles.profile + ? $tempProfileFiles.profile + : `/api/public/${user.username}-profile.png`} + class="w-full h-full object-cover object-center overflow-hidden" + alt={user.username} + /> + {:else} + <Icon icon="logo-symbol-white" /> + {/if} + </a> +</div> diff --git a/src/components/index.js b/src/components/index.js index 59ee6f14..08ec217a 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,3 +1,4 @@ +export { default as Avatar } from './Avatar.svelte'; export { default as Left } from './Left.svelte'; export { default as Numpad } from './Numpad.svelte'; export { default as Spinner } from './Spinner.svelte'; diff --git a/src/routes/send/user/[username]/[...amount]/+page.svelte b/src/routes/send/user/[username]/[...amount]/+page.svelte index 21460342..a50dea53 100644 --- a/src/routes/send/user/[username]/[...amount]/+page.svelte +++ b/src/routes/send/user/[username]/[...amount]/+page.svelte @@ -1,8 +1,8 @@ <script> - import { goto } from "$app/navigation"; + import { goto } from '$app/navigation'; import { selectedRate } from '$lib/store'; import { enhance } from '$app/forms'; - import { Icon, Numpad, Spinner } from '$comp'; + import { Avatar, Icon, Numpad, Spinner } from '$comp'; import { page } from '$app/stores'; import { back, f, s, sats } from '$lib/utils'; export let data; @@ -49,7 +49,11 @@ </p> <h1 class="text-xl md:text-2xl text-secondary mb-2">to</h1> - <p class="text-6xl break-words">{recipient.username}</p> + + <div class="flex p-1 gap-2 justify-center"> + <Avatar user={recipient} /> + <p class="text-6xl break-words my-auto">{recipient.username}</p> + </div> </div> {:else} <Numpad bind:amount={a} bind:amountFiat={af} {currency} bind:fiat /> |