diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Account.svelte | 9 | ||||
| -rw-r--r-- | src/components/AppHeader.svelte | 25 | ||||
| -rw-r--r-- | src/components/Invoice.svelte | 2 | ||||
| -rw-r--r-- | src/components/Items.svelte | 51 | ||||
| -rw-r--r-- | src/components/LandingHeader.svelte | 6 | ||||
| -rw-r--r-- | src/components/LocationsMap.svelte | 12 | ||||
| -rw-r--r-- | src/components/Request.svelte | 2 |
7 files changed, 73 insertions, 34 deletions
diff --git a/src/components/Account.svelte b/src/components/Account.svelte index a9b3d6ba..eb1b0bac 100644 --- a/src/components/Account.svelte +++ b/src/components/Account.svelte @@ -5,10 +5,10 @@ export let user, rate, account; let { seed, balance, id } = account; - $: type = seed ? "Savings":"Cash"; + $: type = seed ? "Savings" : "Cash"; </script> -<a href={`/${user.username}/${id}/payments`.replace(/undefined\//, "")}> +<a href={`/payments`} class="block"> <div class="border rounded-xl shadow p-4 space-y-5"> <div class="flex justify-center lg:justify-start"> <Balance {balance} {user} {rate} /> @@ -30,10 +30,7 @@ </button> </a> - <a - href={`/${user.username}/${id}/receive`.replace(/undefined\//, "")} - class="contents" - > + <a href={`/invoice`} class="contents"> <button class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow" > diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 3b0303a8..b777e0b5 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -7,11 +7,7 @@ import { loading, t } from "$lib/translations"; import { page } from "$app/stores"; - export let data; - - let { subject, user } = data; - $: update(data); - let update = (data) => ({ subject, user } = data); + export let user, subject; let menuButtons; $: if (user) @@ -19,14 +15,14 @@ { key: "nav.settings", icon: "settings", - href: `/${user.username}/settings`, + href: `/settings`, }, { key: "nav.support", icon: "support", href: `/support` }, - { key: "nav.map", icon: "map", href: `/${user.username}/map` }, + { key: "nav.map", icon: "map", href: `/map` }, { key: "nav.messages", icon: "message", - href: `/${user.username}/messages`, + href: `/messages`, }, { key: "nav.merch", icon: "shop", href: `https://coinosmerch.com` }, { key: "nav.signOut", icon: "logout", href: `/logout` }, @@ -60,19 +56,19 @@ ><Icon icon="home" style="mx-auto w-6 sm:w-8" /> </button> </a> - <a href={`/${user.username}/receive`}> + <a href={`/invoice`}> <button class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page - .url.pathname === `/${user.username}/receive` + .url.pathname.includes('invoice') ? 'opacity-100' : 'opacity-70 hover:opacity-80'}" ><Icon icon="receive" style="mx-auto w-6 sm:w-8" /> </button> </a> - <a href={`/${user.username}/payments`}> + <a href={`/payments`}> <button class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page - .url.pathname === `/${user.username}/payments` + .url.pathname === `/payments` ? 'opacity-100' : 'opacity-70 hover:opacity-80'} relative" ><Icon icon="clock" style="mx-auto w-6 sm:w-8" /> @@ -102,9 +98,8 @@ <div class="relative"> <OutClick on:outclick={() => (showMenu = false)}> <button - class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page - .url.pathname === `/${user.username}` || - $page.url.pathname === `/${user.username}/settings` || + class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 { + $page.url.pathname === `/settings` || $page.url.pathname === `/support` ? 'opacity-100' : `opacity-70 hover:opacity-80 ${ diff --git a/src/components/Invoice.svelte b/src/components/Invoice.svelte index ba436649..563a2fee 100644 --- a/src/components/Invoice.svelte +++ b/src/components/Invoice.svelte @@ -27,7 +27,7 @@ </div> </div> <div class="mx-auto my-auto flex gap-2"> - <a href={`/${invoice.user.username}/invoice/${$invoice.id}/tip`}> + <a href={`/invoice/${$invoice.id}/tip`}> <button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-32" > diff --git a/src/components/Items.svelte b/src/components/Items.svelte index f449215c..f991e114 100644 --- a/src/components/Items.svelte +++ b/src/components/Items.svelte @@ -1,4 +1,5 @@ <script> + import { t } from "$lib/translations"; import { btc, f, sat, post } from "$lib/utils"; import { browser } from "$app/environment"; import { goto, invalidate } from "$app/navigation"; @@ -14,7 +15,7 @@ import DeleteItem from "$comp/DeleteItem.svelte"; import Icon from "$comp/Icon.svelte"; - export let subject, user, items, total, rate, currency; + export let subject, user, items, rate, currency; let flipDurationMs = 200; let dropTargetStyle = {}; @@ -27,6 +28,8 @@ deleting = item; }; + $: total = items.reduce((a, b) => a + b.price * b.quantity, 0); + function handleConsider(e) { const { items: newItems, @@ -77,15 +80,15 @@ rate, }; - let { id } = await post(`/${subject.username}/invoice`, { + let { id } = await post(`/invoice`, { invoice, user: { username: subject.username }, }); if (invoice.memoPrompt) { - return goto(`/${subject.username}/invoice/${id}/memo`); + return goto(`/invoice/${id}/memo`); } - goto(`/${subject.username}/invoice/${id}`); + goto(`/invoice/${id}`); }; let reset = () => @@ -135,7 +138,7 @@ {#if user?.username === subject.username} <div class="flex gap-2 justify-center absolute top-2 right-2"> <button type="button" on:click|stopPropagation={() => {}}> - <a href={`/${user.username}/items/${i.id}`}> + <a href={`/items/${i.id}`}> <button class="bg-black rounded-full w-12 h-12 bg-opacity-40 hover:bg-opacity-100" > @@ -157,7 +160,7 @@ on:touchstart={startDrag} on:keydown={handleKeyDown} > - <a href={`/${user.username}/items/${i.id}`}> + <a href={`/items/${i.id}`}> <button class="bg-black rounded-full w-12 h-12 bg-opacity-40 hover:bg-opacity-100" > @@ -207,3 +210,39 @@ </button> {/each} </div> + +<div + class="fixed inset-x-0 mx-auto flex bottom-16" + class:static={!items.length} +> + {#if total > 0} + <button + class="rounded-2xl py-5 px-6 font-bold hover:bg-neutral-700 flex bg-black text-white mx-auto" + on:click={checkout} + > + <div class="mx-auto flex"> + <div class="my-auto text-2xl"> + {$t("user.dashboard.checkout")} + {f(total, currency)} + <span class="text-base"> + {sat(btc(total, rate), currency)} + </span> + </div> + </div> + </button> + {/if} +</div> + +<style> + .custom-shadow-item { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + visibility: visible; + background: #333; + opacity: 0.5; + margin: 0; + } +</style> diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte index d1094a1d..92de7bcd 100644 --- a/src/components/LandingHeader.svelte +++ b/src/components/LandingHeader.svelte @@ -19,10 +19,10 @@ </script> <header - class="w-full lg:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90" + class="w-full md:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90" bind:this={header} > - <nav class="block xl:flex flex-wrap justify-between items-center"> + <nav class="block md:flex justify-between items-center"> <div class="flex justify-start md:justify-center items-center md:space-x-10" > @@ -34,7 +34,7 @@ <!-- desktop nav --> <div - class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold" + class="hidden space-x-10 md:flex justify-center items-center font-bold" > {#if $page.url.pathname === "/"} <button class="hover:opacity-80" on:click={() => scroll(howItWorks)} diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte index 79ea4bf3..bd51b125 100644 --- a/src/components/LocationsMap.svelte +++ b/src/components/LocationsMap.svelte @@ -3,7 +3,7 @@ import { browser } from "$app/environment"; import Icon from "$comp/Icon.svelte"; import Popup from "$comp/Popup.svelte"; - import { shuffleArray } from "$lib/utils"; + import { back, shuffleArray } from "$lib/utils"; import "maplibre-gl/dist/maplibre-gl.css"; @@ -220,8 +220,16 @@ class="mx-auto h-full w-full z-0" bind:this={mapContainer} /> + <div class="absolute flex top-2 left-2 gap-2"> + <button + class="rounded-full border-2 border-black bg-white w-10 h-10" + on:click={back} + > + <Icon icon="arrow-left" style="w-4 m-auto" /> + </button> + </div> <div class="relative"> - <div class="flex absolute flex top-2 right-2 gap-2"> + <div class="absolute flex top-2 right-2 gap-2"> <button class="rounded-full border-2 border-black bg-white w-10 h-10" on:click={toggle} diff --git a/src/components/Request.svelte b/src/components/Request.svelte index c085f9e2..297b7438 100644 --- a/src/components/Request.svelte +++ b/src/components/Request.svelte @@ -26,7 +26,7 @@ </div> </div> <div class="mx-auto my-auto flex gap-2"> - <a href={`/${user.username}/receive/${$request.id}`}> + <a href={`/receive/${$request.id}`}> <button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-32" > |