From d03a75ef1614cad4f1017cb54657ba339dc91012 Mon Sep 17 00:00:00 2001
From: Unknown <53575465+EndlessEevee@users.noreply.github.com>
Date: Thu, 19 Sep 2024 09:56:01 -0700
Subject: [PATCH] Added Shop

---
 Pages/shop.html | 46 ++++++++++++++++++++++++++--------------------
 Pages/style.css |  8 ++++++++
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/Pages/shop.html b/Pages/shop.html
index f9954cb..f6fcfae 100644
--- a/Pages/shop.html
+++ b/Pages/shop.html
@@ -40,26 +40,32 @@
                     alt="Team Icon"
                 />
             </div>
-
-        <div
-            style="
-                display: flex;
-                justify-content: center;
-                text-align: center;
-                padding-top: 5%;
-                padding-bottom: 8%;
-            "
-        >
-            <iframe
-                title="Donation form powered by Zeffy"
-                style="border-width: 0"
-                width="800"
-                height="600"
-                src="https://www.zeffy.com/embed/ticketing/78ec0d8d-12a7-4f4a-9b97-7c9beea43fd5"
-                allowpaymentrequest
-                allowTransparency="true"
-            ></iframe>
-        </div>
+            <div class="flex-grow relative overflow-auto">
+                <iframe
+                    class="w-full p-4"
+                    src="https://www.zeffy.com/embed/ticketing/78ec0d8d-12a7-4f4a-9b97-7c9beea43fd5"
+                    style="border: 0; overflow: hidden"
+                    frameborder="0"
+                    allowpaymentrequest
+                    allowTransparency="true"
+                    id="shopIframe"
+                ></iframe>
+            </div>
+            <script>
+                const iframe = document.getElementById("shopIframe");
+                iframe.onload = function () {
+                    setIframeHeight();
+                    // Optionally, recheck the height every 1 second (1000ms) if the content might change dynamically.
+                    setInterval(setIframeHeight, 1000);
+                };
+                function setIframeHeight() {
+                    const iframeDocument =
+                        iframe.contentDocument || iframe.contentWindow.document;
+                    iframe.style.height =
+                        iframeDocument.documentElement.scrollHeight + "px";
+                }
+            </script>
+        </main>
 
         <!-- Footer -->
         <div id="socials"></div>
diff --git a/Pages/style.css b/Pages/style.css
index 0aa9017..d99ed30 100644
--- a/Pages/style.css
+++ b/Pages/style.css
@@ -266,7 +266,15 @@ main {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
+#shopIframe {
+    width: 100%;
+    border: none;
+}
 
+#iframeContainer {
+    height: 100%;
+    overflow: auto;
+}
 /*Mobile*/
 @media screen and (max-width: 1000px) {
     /* comes into effect for screens larger than or equal to 481 pixels */