UX changes

Clicking on cryptocurrency QR codes open the images in a new tab

Changed the `details` selector `summary` in `src/app.css` to fix unintended behavior
This commit is contained in:
supercolbat 2023-08-05 08:02:48 -05:00
parent 5814f14c71
commit b8efde379d
No known key found for this signature in database
GPG Key ID: 4C9B319E75DD8072
3 changed files with 16 additions and 6 deletions

View File

@ -69,7 +69,7 @@ h4 {
@apply text-xl font-bold my-8; @apply text-xl font-bold my-8;
} }
details { summary {
@apply cursor-pointer; @apply cursor-pointer;
} }

View File

@ -49,6 +49,7 @@
<h4>Monero</h4> <h4>Monero</h4>
<CryptoInfo <CryptoInfo
name="Monero"
address="47L7Qsto7XcifY3CdG18ySe5Tt83kpFLDLve9jQwbc9taPBLNGv6ZrJNUKpMG9Nj9zHgCZ4FQMSyt75e8Jvx12JFLtJyFdA" address="47L7Qsto7XcifY3CdG18ySe5Tt83kpFLDLve9jQwbc9taPBLNGv6ZrJNUKpMG9Nj9zHgCZ4FQMSyt75e8Jvx12JFLtJyFdA"
qr="Monero.png" qr="Monero.png"
/> />
@ -56,6 +57,7 @@
<h4>Bitcoin</h4> <h4>Bitcoin</h4>
<CryptoInfo <CryptoInfo
name="Bitcoin"
address="bc1qrc8ywgp95a6p3zausp4nff70qzstp6h8z86sxd" address="bc1qrc8ywgp95a6p3zausp4nff70qzstp6h8z86sxd"
qr="Bitcoin.png" qr="Bitcoin.png"
/> />
@ -63,6 +65,7 @@
<h4>Litecoin</h4> <h4>Litecoin</h4>
<CryptoInfo <CryptoInfo
name="Litecoin"
address="ltc1qn3ald586h2ntt0n3zkvwsmju2e5vndgtvvgatj" address="ltc1qn3ald586h2ntt0n3zkvwsmju2e5vndgtvvgatj"
qr="Litecoin.png" qr="Litecoin.png"
/> />

View File

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
export let name: string = "";
export let address: string = ""; export let address: string = "";
export let qr: string = ""; export let qr: string = "";
</script> </script>
@ -13,10 +14,16 @@
{#if qr} {#if qr}
<details class="p-0"> <details class="p-0">
<summary>QR code</summary> <summary>QR code</summary>
<img <a
src="/qr/{qr}" href="/qr/{qr}"
alt="QR code" target="_blank"
class="mt-2" rel="noreferrer"
/> >
<img
src="/qr/{qr}"
alt="QR code to {name} address"
class="mt-2"
/>
</a>
</details> </details>
{/if} {/if}