Merge branch 'main' into pr/34

VedalAI · Jun 10, 2024 · 53fb1c2 · 53fb1c2
2 parents f628e69 + ffc1472
commit 53fb1c2
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 27 deletions.
diff --git a/frontend/www/css/modals.css b/frontend/www/css/modals.css
@@ -20,16 +20,10 @@
 
 .modal {
     position: relative;
-    padding: 20px;
 
     background-color: #111;
     border: 1px solid #ffffff1A;
 
-    display: flex;
-    flex-direction: row;
-    /* justify-content: center; */
-    gap: 20px;
-
     border-radius: 20px;
     font-size: 1rem;
 
@@ -42,8 +36,21 @@
 
     -webkit-user-select: none;
     user-select: none;
+}
+
+.modal-inside-wrapper {
+    width: 100%;
+    height: auto;
+
+    padding: 20px;
+
+    display: flex;
+    flex-direction: row;
+    /* justify-content: center; */
+    gap: 20px;
 
     max-height: 80vh;
+
     overflow-y: auto;
 }
 
@@ -245,7 +252,8 @@ form label:not([aria-required]) {
     }
 
     .modal,
-    .modal-overlay {
+    .modal-overlay,
+    .modal-inside-wrapper {
         flex-direction: column;
         align-items: center;
 

diff --git a/frontend/www/html/index.html b/frontend/www/html/index.html
@@ -23,25 +23,27 @@ <h2>Welcome to Swarm Control&trade;</h2>
                 <!-- Purchase modal -->
                 <div class="modal-wrapper" id="modal-wrapper" style="opacity: 0; pointer-events: none;">
                     <div class="modal">
-                        <img id="modal-image" class="modal-image" src="">
-                        <div class="modal-descriptors">
-                            <!-- Title and description -->
-                            <h2 id="modal-title"></h2>
-                            <p id="modal-description"></p>
-                            <div id="modal-price" style="display: flex; font-size:large; text-emphasis: bold;">
-                                <img src="img/bits.png" class="bits-image">
-                                <p id="modal-bits">X</p>
-                            </div>
+                        <div class="modal-inside-wrapper">
+                            <img id="modal-image" class="modal-image" src="">
+                            <div class="modal-descriptors">
+                                <!-- Title and description -->
+                                <h2 id="modal-title"></h2>
+                                <p id="modal-description"></p>
+                                <div id="modal-price" style="display: flex; font-size:large; text-emphasis: bold;">
+                                    <img src="img/bits.png" class="bits-image">
+                                    <p id="modal-bits">X</p>
+                                </div>
 
-                            <!-- Checkbox, input and dropdown options -->
-                            <div id="modal-options">
-                                <form id="modal-options-form" action="#"></form>
-                            </div>
+                                <!-- Checkbox, input and dropdown options -->
+                                <div id="modal-options">
+                                    <form id="modal-options-form" action="#"></form>
+                                </div>
 
-                            <!-- Buy and cancel buttons -->
-                            <div class="modal-buttons">
-                                <button id="modal-confirm" class="button btn-success">Redeem</button>
-                                <button id="modal-cancel" class="button btn-danger">Cancel</button>
+                                <!-- Buy and cancel buttons -->
+                                <div class="modal-buttons">
+                                    <button id="modal-confirm" class="button btn-success">Redeem</button>
+                                    <button id="modal-cancel" class="button btn-danger">Cancel</button>
+                                </div>
                             </div>
                         </div>
 
@@ -130,4 +132,4 @@ <h2 id="modal-success-title"></h2>
             <% } %>
 </body>
 
-</html>
+</html>
diff --git a/frontend/www/src/modules/auth.ts b/frontend/www/src/modules/auth.ts
@@ -97,5 +97,6 @@ Twitch.ext.bits.onTransactionCancelled(async () => {
             ],
         }).then();
     }
+    hideProcessingModal();
     showErrorModal("Transaction cancelled.", `Transaction ID: ${transactionToken}`);
 });
diff --git a/frontend/www/src/modules/modal.ts b/frontend/www/src/modules/modal.ts
@@ -64,6 +64,13 @@ document.addEventListener("DOMContentLoaded", () => {
         e.preventDefault();
         setCartArgsFromForm(e.target as HTMLFormElement);
     };
+
+    $modalWrapper.onclick = (e) => {
+        if (e.target !== $modalWrapper) return;
+        if ($modalProcessing.style.opacity == "1") return;
+
+        closeModal();
+    };
 });
 
 export async function openModal(redeem: Redeem | null) {

diff --git a/frontend/www/src/modules/redeems.ts b/frontend/www/src/modules/redeems.ts
@@ -1,8 +1,9 @@
-import { openModal, showErrorModal } from "./modal";
+import { hideProcessingModal, openModal, showErrorModal } from "./modal";
 import { getConfig } from "../util/config";
 
 const $mainContainer = document.getElementsByTagName("main")!;
 const $redeemContainer = document.getElementById("items")!;
+const $modalProcessing = document.getElementById("modal-processing")!;
 
 document.addEventListener("DOMContentLoaded", () => {
     renderRedeemButtons().then();
@@ -62,5 +63,8 @@ export async function renderRedeemButtons() {
         $redeemContainer.appendChild(item);
     }
 
-    showErrorModal("New update!", "The items have been updated, because of this you need to reopen this modal.");
+    if ($modalProcessing.style.opacity !== "1") {
+        hideProcessingModal();
+        showErrorModal("New update!", "The items have been updated, because of this you need to reopen this modal.");
+    }
 }