Update theming

assets/category_submit.js

@@ -3,32 +3,38 @@
 
     function injectSubmissionBoxes(config) {
         const enabledCategories = config.categories || [];
-        // Find all category headers
         const headers = document.querySelectorAll('.category-header');
         
         headers.forEach(header => {
             const catName = header.textContent.trim();
-            
-            // 1. Check if category is enabled
-            // 2. Check if we already injected a box (to prevent infinite loops)
             const alreadyInjected = header.nextElementSibling && 
-                                   header.nextElementSibling.classList.contains('custom-cat-sub-box');
+                                   header.nextElementSibling.classList.contains('cat-sub-row');
 
             if (enabledCategories.includes(catName) && !alreadyInjected) {
-                const div = document.createElement('div');
+                // Create a row container to match CTFd's grid layout
-                div.className = "custom-cat-sub-box input-group mt-2 mb-4 p-3 bg-light border rounded";
+                const row = document.createElement('div');
-                div.style.maxWidth = "500px"; // Keep it tidy
+                row.className = "cat-sub-row row mb-4 justify-content-center"; 
-                div.innerHTML = `
+                
-                    <input type="text" class="form-control" placeholder="Found a flag for ${catName}?" id="in-${catName.replace(/\s+/g, '-')}" autocomplete="off">
+                // Use col-md-8 or 10 to keep the box from being too wide
-                    <div class="input-group-append">
+                row.innerHTML = `
-                        <button class="btn btn-success btn-sub" data-cat="${catName}">Submit</button>
+                    <div class="col-md-10">
+                        <div class="input-group custom-sub-group">
+                            <input type="text" 
+                                   class="form-control form-control-lg border-secondary bg-dark text-light" 
+                                   placeholder="Found a flag for ${catName}?" 
+                                   id="in-${catName.replace(/\s+/g, '-')}" 
+                                   autocomplete="off"
+                                   style="border-color: rgba(255,255,255,0.1) !important;">
+                            <div class="input-group-append">
+                                <button class="btn btn-success btn-lg px-4 btn-sub" data-cat="${catName}">Submit</button>
+                            </div>
+                        </div>
                     </div>
                 `;
                 
-                header.after(div);
+                header.after(row);
 
-                // Submission logic
+                row.querySelector('button').onclick = function() {
-                div.querySelector('button').onclick = function() {
                     const btn = this;
                     const input = document.getElementById(`in-${catName.replace(/\s+/g, '-')}`);
                     const val = input.value.trim();
@@ -50,9 +56,7 @@
                     .then(r => r.json())
                     .then(data => {
                         alert(data.message);
-                        if (data.success) {
+                        if (data.success) location.reload();
-                            location.reload(); // Refresh to show the checkmark on the challenge
-                        }
                         btn.disabled = false;
                     })
                     .catch(() => {
@@ -64,27 +68,19 @@
         });
     }
 
-    // Initialize the plugin
     fetch('/category_submit/config')
         .then(r => r.json())
         .then(config => {
-            // Run once on load
             injectSubmissionBoxes(config);
-
-            // Observe the challenge board for changes (e.g. category filtering/loading)
-            // We use a debounce timer to avoid the "Loading Forever" infinite loop
             let timeout;
             const observer = new MutationObserver(() => {
                 clearTimeout(timeout);
                 timeout = setTimeout(() => {
-                    // Temporarily disconnect to avoid observing our own changes
                     observer.disconnect();
                     injectSubmissionBoxes(config);
-                    // Re-observe after injection
                     observer.observe(document.body, { childList: true, subtree: true });
                 }, 200); 
             });
-
             observer.observe(document.body, { childList: true, subtree: true });
         })
         .catch(err => console.error("Could not load category submission config", err));