From d1a2d768d959cc64dde4e9432d71acf0e25cfd4c Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 9 Aug 2024 16:06:19 +0600
Subject: [PATCH] web/DonateShareCard: expand the card on QR press & better
 scaling

---
 .../donate/DonateCardContainer.svelte         |  4 +-
 .../donate/DonateOptionsCard.svelte           |  6 +-
 .../components/donate/DonateShareCard.svelte  | 81 +++++++++++++++++--
 web/src/routes/donate/+page.svelte            |  2 +-
 4 files changed, 85 insertions(+), 8 deletions(-)

diff --git a/web/src/components/donate/DonateCardContainer.svelte b/web/src/components/donate/DonateCardContainer.svelte
index 1042e6f8..1bf6a2e1 100644
--- a/web/src/components/donate/DonateCardContainer.svelte
+++ b/web/src/components/donate/DonateCardContainer.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
     export let id: string;
+    export let classes: string = "";
 </script>
 
-<div {id} class="donate-card">
+<div {id} class="donate-card {classes}">
     <slot></slot>
 </div>
 
@@ -14,6 +15,7 @@
         display: flex;
         flex-direction: column;
         width: 100%;
+        height: fit-content;
 
         border-radius: var(--donate-border-radius);
         gap: calc(var(--donate-card-main-padding) / 2);
diff --git a/web/src/components/donate/DonateOptionsCard.svelte b/web/src/components/donate/DonateOptionsCard.svelte
index 1b2e5fda..cfb42470 100644
--- a/web/src/components/donate/DonateOptionsCard.svelte
+++ b/web/src/components/donate/DonateOptionsCard.svelte
@@ -137,7 +137,7 @@
 
 <style>
     :global(#donation-box) {
-        min-width: 350px;
+        min-width: 300px;
         padding: var(--donate-card-main-padding) 0;
     }
 
@@ -273,6 +273,10 @@
     }
 
     @media screen and (max-width: 550px) {
+        :global(#donation-box) {
+            min-width: unset;
+        }
+
         :global(#donation-box .donate-card-title) {
             font-size: 14px;
         }
diff --git a/web/src/components/donate/DonateShareCard.svelte b/web/src/components/donate/DonateShareCard.svelte
index e27c8de5..4f534b29 100644
--- a/web/src/components/donate/DonateShareCard.svelte
+++ b/web/src/components/donate/DonateShareCard.svelte
@@ -24,17 +24,24 @@
             copied = false;
         }, 1500);
     }
+
+    let expanded = false;
 </script>
 
-<DonateCardContainer id="share-box">
+<DonateCardContainer id="share-box" classes={expanded ? "expanded" : ""}>
     <div id="share-card-header">
         <div class="share-header-icon"><IconMoodSmileBeam /></div>
         <div class="donate-card-title">{$t("donate.share.title")}</div>
     </div>
     <div id="share-card-body">
-        <div id="share-qr">
+        <button
+            id="share-qr"
+            on:click={() => {
+                expanded = !expanded;
+            }}
+        >
             <CobaltQr />
-        </div>
+        </button>
         <div id="action-buttons">
             <button
                 id="action-button-copy"
@@ -87,7 +94,12 @@
             </button>
         </div>
     </div>
-    <div class="donate-card-subtitle share-footer-link">cobalt.tools</div>
+    <div
+        class="donate-card-subtitle share-footer-link"
+        class:centered={expanded}
+    >
+        cobalt.tools
+    </div>
 </DonateCardContainer>
 
 <style>
@@ -103,6 +115,10 @@
         gap: 2px;
     }
 
+    .centered {
+        text-align: center;
+    }
+
     .share-header-icon {
         display: flex;
     }
@@ -120,10 +136,28 @@
         max-height: 140px;
     }
 
+    #share-qr {
+        display: flex;
+        justify-content: flex-start;
+        align-items: baseline;
+        aspect-ratio: 1 / 1;
+        padding: 0;
+        background: none;
+    }
+
     #share-qr :global(svg) {
         width: 140px;
         height: 140px;
         border-radius: 12px;
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity));
+    }
+
+    #share-qr:focus-visible {
+        box-shadow: none !important;
+    }
+
+    #share-qr:focus-visible :global(svg) {
+        box-shadow: 0 0 0 2px var(--blue);
     }
 
     #action-buttons {
@@ -153,9 +187,46 @@
         stroke-width: 1.8px;
     }
 
-    @media screen and (max-width: 550px) {
+    :global(#share-box.expanded) {
+        margin-bottom: -300px;
+        z-index: 1;
+        box-shadow:
+            0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity)) inset,
+            0 0 10px 2px rgba(0, 0, 0, 0.5);
+        transition: box-shadow 0.15s;
+    }
+
+    :global(#share-box.expanded #share-qr svg) {
+        width: 99%;
+        height: 99%;
+        transition: all 0.15s;
+    }
+
+    :global(#share-box.expanded) #share-card-body {
+        flex-direction: column;
+        max-height: unset;
+    }
+
+    :global(#share-box.expanded) #action-buttons {
+        display: flex;
+    }
+
+    :global(#share-box.expanded) .action-button {
+        padding: 10px;
+        transition: all 0.15s;
+    }
+
+    @media screen and (max-width: 760px) {
         :global(#share-box) {
             width: calc(100% - var(--donate-card-main-padding) * 2);
+            min-width: unset;
+        }
+
+        :global(#share-box.expanded) {
+            margin-bottom: unset;
+            z-index: unset;
+            box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity)) inset;
+            transition: none;
         }
     }
 </style>
diff --git a/web/src/routes/donate/+page.svelte b/web/src/routes/donate/+page.svelte
index 5c5c6325..368a0e36 100644
--- a/web/src/routes/donate/+page.svelte
+++ b/web/src/routes/donate/+page.svelte
@@ -65,7 +65,7 @@
         padding: 0 24px;
     }
 
-    @media screen and (max-width: 550px) {
+    @media screen and (max-width: 760px) {
         #support-options {
             flex-direction: column;
         }