modified: index.html

modified: main.js
fractal-solutions · Nov 19, 2024 · b9df7fc · b9df7fc
1 parent b43074f
commit b9df7fc
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -471,7 +471,7 @@
                 height: auto;
                 max-height: 80vh;
                 overflow-y: auto;
-                z-index: 1000;
+                z-index: 100;
                 padding: 20px;
                 transform: translateY(0);
                 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -540,6 +540,25 @@
                 flex: 1;
                 margin: 0 5px;
             }
+
+            /* Optional: Add overlay when panel is expanded */
+            .overlay {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 90;
+                opacity: 0;
+                transition: opacity 0.3s ease;
+            }
+
+            #account-panel:not(.collapsed) + .overlay {
+                display: block;
+                opacity: 1;
+            }
         }
 
         /* Topnav responsive design */
@@ -625,6 +644,7 @@ <h3>Portfolio</h3>
             <div id="positions"></div>
         </div>
     </div>
+    <div class="overlay"></div>
     <script type="module" src="main.js"></script>
     <script type="module" src="trader.js"></script>
 </body>

diff --git a/main.js b/main.js
@@ -462,22 +462,34 @@ function initializeMobileAccountPanel() {
         const header = accountPanel.querySelector('h3');
         if (e.target === header || e.target.closest('h3')) {
             accountPanel.classList.toggle('collapsed');
+            e.stopPropagation(); // Prevent body click handler from firing
+        }
+    }
+
+    function handleOutsideClick(e) {
+        // If panel is expanded and click is outside panel
+        if (!accountPanel.classList.contains('collapsed') && 
+            !accountPanel.contains(e.target)) {
+            accountPanel.classList.add('collapsed');
         }
     }
 
     if (window.innerWidth <= 768) {
         // Remove previous listeners if any
         accountPanel.removeEventListener('touchstart', handlePanelClick);
+        document.body.removeEventListener('click', handleOutsideClick);
 
-        // Add click handler
+        // Add click handlers
         accountPanel.querySelector('h3').addEventListener('click', handlePanelClick);
+        document.body.addEventListener('click', handleOutsideClick);
 
         // Initialize in expanded state
         accountPanel.classList.remove('collapsed');
     } else {
         // Remove mobile-specific classes and listeners for desktop
         accountPanel.classList.remove('collapsed');
         accountPanel.querySelector('h3').removeEventListener('click', handlePanelClick);
+        document.body.removeEventListener('click', handleOutsideClick);
     }
 }