diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/invoice/[amount].svelte | 278 |
1 files changed, 171 insertions, 107 deletions
diff --git a/src/routes/invoice/[amount].svelte b/src/routes/invoice/[amount].svelte index 2cf16e37..d1dea907 100644 --- a/src/routes/invoice/[amount].svelte +++ b/src/routes/invoice/[amount].svelte @@ -74,6 +74,9 @@ type: 'svg', data: text, image: '/images/invoice.svg', + backgroundOptions: { + color: 'rgba(0, 0, 0, 0)' + }, dotsOptions: { type: 'rounded' }, @@ -85,132 +88,189 @@ qrCode.append(document.getElementById('qr')); } }); -</script> -{#if $user} - <button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={() => goto('/receive')}> - <Icon icon="arrow-left" style="w-10" /> - </button> + let showMobileTip = false; - <div class="flex justify-center items-center mb-20 mt-[20px] px-3"> - <div - class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24" - > - {#if $invoiceAmount && $invoiceAmountFiat && $rate && text} - <!-- tipping section --> - <div class="text-center space-y-5"> - <h1 class="text-4xl font-semibold">Add a tip?</h1> + const handleBackButton = () => { + if (showMobileTip) { + tipPercent = 0; + customInput.value = ''; + customTipAmount = 0; + tipAmount = 0; + showMobileTip = false; + } else { + goto('/receive'); + } + }; - <div> - <span class="font-semibold mr-1">{tipAmountFormatted}</span><span - class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span - > - <span class="block text-secondary text-sm">{tipPercent}%</span> - </div> + let customInput; +</script> - <input - id="slider" - type="range" - min="0" - max="100" - value={tipPercent} - class="px-2" - on:input={(e) => { - customTipAmount = ''; - tipPercent = e.target.value; - }} - /> +{#if $user} + <div class:full-shadow={showMobileTip}> + <button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}> + <Icon icon="arrow-left" style="w-10" /> + </button> - <div> - {#each tipAmounts as amount} - <button - class="bg-primary w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent === - amount.slice(0, 2) || - ((tipPercent === 0 || tipPercent === '0') && amount === 'None') - ? '!bg-black text-white' - : ''}" - on:click={() => handleTipButtonClick(amount)}>{amount}</button - > - {/each} + <div class="flex justify-center items-center mb-20 md:mt-[20px] px-3"> + <div + class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24" + > + {#if $invoiceAmount && $invoiceAmountFiat && $rate && text} + <!-- tipping section --> + <div + class="absolute {showMobileTip + ? 'bottom-0' + : '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5" + > + <h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1> - <div class="relative"> - <span - class="absolute top-[20px] left-5 font-semibold {!customTipAmount - ? 'opacity-50' - : 'opacity-100'}">$</span - > - <input - type="number" - min="0" - on:input={(e) => handleCustomTipAmount(e)} - class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto" - placeholder="Other" - /> - <button - class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount - ? 'opacity-50' - : 'opacity-100'}" - disabled={!customTipAmount}>Done</button + <div> + <span class="font-semibold mr-1">{tipAmountFormatted}</span><span + class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span > + <span class="block text-secondary text-sm">{tipPercent}%</span> </div> - </div> - </div> - <div - class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl" - id="section-divider" - /> + <input + id="slider" + type="range" + min="0" + max="100" + value={tipPercent} + class="px-2" + on:input={(e) => { + customTipAmount = ''; + tipPercent = e.target.value; + }} + /> - <!-- invoice section --> - <div class="text-center space-y-5"> - <span class="text-secondary" - >Scan to pay <span class="text-black font-semibold">insert name here</span></span - > + <div> + {#each tipAmounts as amount} + <button + class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent === + amount.slice(0, 2) || + ((tipPercent === 0 || tipPercent === '0') && amount === 'None') + ? '!bg-black text-white' + : ''}" + on:click={() => handleTipButtonClick(amount)}>{amount}</button + > + {/each} + + <div class="relative"> + <span + class="absolute top-[20px] left-5 font-semibold {!customTipAmount + ? 'opacity-50' + : 'opacity-100'}">$</span + > + <input + bind:this={customInput} + type="number" + min="0" + on:input={(e) => handleCustomTipAmount(e)} + class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto" + placeholder="Other" + /> + <button + class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip + ? !customTipAmount && !tipAmount + ? 'opacity-50' + : 'opacity-100' + : !customTipAmount + ? 'opacity-50' + : 'opacity-100'}" + disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount} + >Done</button + > + </div> + </div> + </div> <div - id="qr" - class="border border-lightgrey rounded-3xl lg:p-5 flex justify-center items-center" + class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl" + id="section-divider" /> - <div class="px-5 space-y-3"> - <div class="flex justify-between"> - <span class="font-semibold text-sm">Invoice</span> - <span class="font-semibold text-sm" - >{invoiceAmountFiatFormatted} - <span class="text-secondary font-normal">{`(${invoiceAmountFormatted} SATS)`}</span - ></span + <!-- invoice section --> + <div class="text-center space-y-5"> + <button + class="block md:hidden bg-black {showMobileTip + ? 'text-white/50' + : 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center" + on:click={() => (showMobileTip = true)} + disabled={showMobileTip} + > + <svg + width="24" + height="24" + class="mr-1" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg" > - </div> + <path + d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + /> + </svg> Add a tip + </button> - <div class="flex justify-between"> - <span class="font-semibold text-sm">Tip</span> - <span class="font-semibold text-sm" - >{tipAmountFormatted} - <span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span - > - </div> + <span class="text-secondary block" + >Scan to pay <span class="text-black font-semibold">{$user.username}</span></span + > - <div class="flex justify-between"> - <span class="font-bold">Total</span> - <span class="font-bold" - >{totalAmountFormatted} - <span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span - > + <div + id="qr" + class="border {showMobileTip + ? 'border-gray-400' + : 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center" + /> + + <div class="px-5 space-y-3"> + <div class="flex justify-between"> + <span class="font-semibold text-sm">Invoice</span> + <span class="font-semibold text-sm" + >{invoiceAmountFiatFormatted} + <span class="text-secondary font-normal" + >{`(${invoiceAmountFormatted} SATS)`}</span + ></span + > + </div> + + <div class="flex justify-between"> + <span class="font-semibold text-sm">Tip</span> + <span class="font-semibold text-sm" + >{tipAmountFormatted} + <span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span + > + </div> + + <div class="flex justify-between"> + <span class="font-bold">Total</span> + <span class="font-bold" + >{totalAmountFormatted} + <span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span + ></span + > + </div> </div> </div> - </div> - {:else} - <div - class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl" - /> - <div - class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl" - id="section-divider" - /> - <div - class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl" - /> - {/if} + {:else} + <div + class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl" + /> + <div + class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl" + id="section-divider" + /> + <div + class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl" + /> + {/if} + </div> </div> </div> {/if} @@ -255,4 +315,8 @@ input[type='number'] { -moz-appearance: textfield; } + + .full-shadow { + box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.25); + } </style> |