diff options
| author | Adam Soltys <[email protected]> | 2023-08-23 11:07:01 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2023-08-23 11:07:01 -0700 |
| commit | 557f72abb9555d30963c24a4cb7dc83de443cada (patch) | |
| tree | 3cb5025381104c327b7b1cd869eb1430d3e38392 | |
| parent | 1d55903cce0d1914ec21ff31d8ae2b4dcb4fa64d (diff) | |
| download | coinos-ui-557f72abb9555d30963c24a4cb7dc83de443cada.tar.gz coinos-ui-557f72abb9555d30963c24a4cb7dc83de443cada.zip | |
display lightning address qr
| -rw-r--r-- | src/routes/(app)/[username]/settings/[...tab]/_account.svelte | 44 |
1 files changed, 30 insertions, 14 deletions
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte index 8c67a0f1..bda48562 100644 --- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte +++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte @@ -64,23 +64,39 @@ $: url = `${$page.url.host}/${user.username}`; $: full = `${$page.url.protocol}//${url}`; + $: addr = `${user.username}@${$page.url.host}`; </script> -<div class="relative"> - <div> - <label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label> - <input type="text" name="username" bind:value={user.username} /> - </div> - <div - class="absolute right-[2px] top-[30px] text-gray-600 rounded-r-2xl p-4 h-[54px] my-auto border-l " - > - @coinos.io +<div> + <label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label> + <div class="flex mb-2"> + <input + type="text" + name="username" + bind:value={user.username} + class="border-r-0 rounded-r-none w-auto min-w-0" + /> + <div class="text-gray-600 p-4 my-auto bg-gray-100 border border-r-0 pl-1">@{$page.url.host}</div> + <div class="text-gray-600 border-l-0 bg-gray-100 rounded-r-2xl p-4 my-auto border w-16" > + <a href={`/qr/${encodeURIComponent(addr)}`}> + <Icon icon="qr" style="invert" /> + </a> + </div> </div> - <div class="my-2 flex gap-2"> - <div class="ml-auto text-gray-400">{url}</div> - <a href={`/qr/${encodeURIComponent(full)}`}> - <Icon icon="qr" style="invert" /> - </a> + + <div class="flex mb-2"> + <div class="text-gray-600 rounded-l-2xl p-4 my-auto border bg-gray-100 pr-1">{$page.url.host}/</div> + <input + type="text" + name="username" + bind:value={user.username} + class="grow border-l-0 rounded-l-none border-r-0 rounded-r-none w-auto min-w-0" + /> + <div class="text-gray-600 rounded-r-2xl p-4 my-auto border bg-gray-100 w-16"> + <a href={`/qr/${encodeURIComponent(full)}`}> + <Icon icon="qr" style="invert" /> + </a> + </div> </div> </div> |