Standardized the z-indexs and did some pop up updates

This commit is contained in:
admin 2025-08-03 14:31:51 -06:00
parent 3231a4973c
commit 2a53008e04
18 changed files with 62 additions and 26 deletions

View File

@ -206,7 +206,7 @@
position: fixed; position: fixed;
top: 20px; top: 20px;
right: 20px; right: 20px;
z-index: 10000; z-index: 12300;
max-width: 400px; max-width: 400px;
pointer-events: none; /* Allow clicks to pass through container */ pointer-events: none; /* Allow clicks to pass through container */
} }
@ -1724,7 +1724,7 @@
height: 100vh; /* Fallback for older browsers */ height: 100vh; /* Fallback for older browsers */
height: var(--app-height); height: var(--app-height);
background: white; background: white;
z-index: 9999; /* Increased from 1000 */ z-index: 12400;
transition: left 0.3s ease; transition: left 0.3s ease;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
@ -1838,7 +1838,7 @@
width: 280px; width: 280px;
height: 100vh; height: 100vh;
background: white; background: white;
z-index: 9999; /* Increased from 1000 */ z-index: 12400;
transition: left 0.3s ease; transition: left 0.3s ease;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
display: flex; display: flex;

View File

@ -20,6 +20,22 @@
--mobile-breakpoint: 768px; --mobile-breakpoint: 768px;
--tablet-breakpoint: 1024px; --tablet-breakpoint: 1024px;
--desktop-breakpoint: 1200px; --desktop-breakpoint: 1200px;
/* Z-Index Scale - DO NOT MODIFY WITHOUT UPDATING ALL REFERENCES
* Base Layer: 1-999 (Map controls, markers, standard UI)
* Header Layer: 10001 (Main navigation header)
* Dropdown Layer: 12100-12199 (Search results, unified search, doc search)
* Modal Layer: 12000-12099 (Standard modals)
* Mobile UI Layer: 12150-12199 (Mobile dropdowns, nocodb dropdowns)
* Form Layer: 12200-12249 (Edit footer, move controls)
* Popup Layer: 12250-12299 (Shift popups, tooltips)
* Notification Layer: 12300-12399 (Status messages, alerts)
* Admin Layer: 12400-12499 (Admin sidebars)
* Loading Layer: 12500-12599 (Loading overlays)
* Confirmation Layer: 12600-12699 (Confirmation modals)
* QR Layer: 13000-13099 (QR code modals)
* Update Layer: 15000+ (Cache-busting notifications - highest priority)
*/
} }
/* Reset and base styles */ /* Reset and base styles */

View File

@ -8,7 +8,7 @@
padding: 15px !important; padding: 15px !important;
border-radius: 8px !important; border-radius: 8px !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
z-index: 10000 !important; z-index: 15000 !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
animation: slideInFromRight 0.3s ease-out !important; animation: slideInFromRight 0.3s ease-out !important;
max-width: 350px !important; max-width: 350px !important;

View File

@ -45,7 +45,7 @@
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
z-index: 10002; /* Just slightly higher than header */ z-index: 12100;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -92,7 +92,7 @@
background-color: white; background-color: white;
border-top: 2px solid var(--primary-color); border-top: 2px solid var(--primary-color);
box-shadow: 0 -2px 10px rgba(0,0,0,0.1); box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 1500; z-index: 12200;
transition: transform 0.3s ease; transition: transform 0.3s ease;
max-height: 60vh; max-height: 60vh;
overflow-y: auto; overflow-y: auto;

View File

@ -19,7 +19,7 @@
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 10000; z-index: 12200;
min-width: 300px; min-width: 300px;
text-align: center; text-align: center;
} }

View File

@ -36,7 +36,7 @@
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: var(--transition); transition: var(--transition);
z-index: 1001; z-index: 12150;
} }
.mobile-dropdown.active .mobile-dropdown-content { .mobile-dropdown.active .mobile-dropdown-content {

View File

@ -9,7 +9,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 10010; z-index: 12000;
animation: fadeIn 0.3s ease; animation: fadeIn 0.3s ease;
} }

View File

@ -31,7 +31,7 @@
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 200px; min-width: 200px;
z-index: 9999; z-index: 12150;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: translateY(-10px); transform: translateY(-10px);

View File

@ -4,7 +4,7 @@
top: calc(var(--header-height) + 20px); top: calc(var(--header-height) + 20px);
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 2000; z-index: 12300;
max-width: 400px; max-width: 400px;
width: 90%; width: 90%;
} }
@ -63,7 +63,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 4000; z-index: 12500;
} }
.loading-overlay.hidden { .loading-overlay.hidden {

View File

@ -19,13 +19,13 @@
/* QR Code Modal Styles */ /* QR Code Modal Styles */
.qr-modal { .qr-modal {
z-index: 11000; /* Ensure QR modal is above everything else */ z-index: 13000; /* Ensure QR modal is above everything else */
} }
.qr-modal-content { .qr-modal-content {
max-width: 400px; max-width: 400px;
text-align: center; text-align: center;
z-index: 11001; /* Even higher for the content */ z-index: 13001; /* Even higher for the content */
position: relative; position: relative;
} }

View File

@ -5,7 +5,7 @@
width: 100%; width: 100%;
margin: 10px 0; margin: 10px 0;
padding: 0 0px; padding: 0 0px;
z-index:10002/* Remove z-index */ /* Remove z-index - let it inherit from header */
} }
.docs-search-wrapper { .docs-search-wrapper {
@ -25,7 +25,7 @@
max-width: 100vw !important; max-width: 100vw !important;
min-width: 0 !important; min-width: 0 !important;
border-radius: 0 0 12px 12px; border-radius: 0 0 12px 12px;
z-index: 10002; /* Same as desktop */ z-index: 12100;
margin: 0; margin: 0;
box-shadow: 0 8px 24px rgba(0,0,0,0.25); box-shadow: 0 8px 24px rgba(0,0,0,0.25);
} }
@ -164,14 +164,14 @@
padding-right: 12px; padding-right: 12px;
} }
.qr-modal-content { .qr-modal-content {
width: 95%; max-width: 340px;
max-width: 350px; margin: 10px;
z-index: 11001; /* Maintain high z-index on mobile */ z-index: 13001; /* Maintain high z-index on mobile */
} }
.qr-modal { .qr-modal {
z-index: 11000; /* Maintain high z-index on mobile */ z-index: 13000; /* Maintain high z-index on mobile */
} }
} }

View File

@ -110,7 +110,7 @@
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-height: 400px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
z-index: 1000; z-index: 12100;
/* Ensure results appear above other content */ /* Ensure results appear above other content */
transform: translateZ(0); transform: translateZ(0);
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);

View File

@ -436,7 +436,7 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 15px; padding: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 10000; /* High z-index to appear above header */ z-index: 12250;
min-width: 250px; min-width: 250px;
max-width: 300px; max-width: 300px;
} }
@ -464,7 +464,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 20000; /* Even higher than shift popup */ z-index: 12600;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

View File

@ -1009,6 +1009,8 @@ function showStatus(message, type = 'info') {
container = document.createElement('div'); container = document.createElement('div');
container.id = 'status-container'; container.id = 'status-container';
container.className = 'status-container'; container.className = 'status-container';
// Ensure proper z-index even if CSS hasn't loaded
container.style.zIndex = '12300';
document.body.appendChild(container); document.body.appendChild(container);
} }

View File

@ -163,7 +163,7 @@
display: none; display: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1000; z-index: 12000;
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
} }

View File

@ -6,6 +6,10 @@ const cookieParser = require('cookie-parser');
const crypto = require('crypto'); const crypto = require('crypto');
const fetch = require('node-fetch'); const fetch = require('node-fetch');
// Debug: Check if server.js is being loaded multiple times
const serverInstanceId = Math.random().toString(36).substr(2, 9);
console.log(`[DEBUG] Server.js instance ${serverInstanceId} loading at ${new Date().toISOString()}`);
// Import configuration and utilities // Import configuration and utilities
const config = require('./config'); const config = require('./config');
const logger = require('./utils/logger'); const logger = require('./utils/logger');

View File

@ -1,9 +1,20 @@
const winston = require('winston'); const winston = require('winston');
const config = require('../config'); const config = require('../config');
// Debug: Check if logger is being created multiple times
const instanceId = Math.random().toString(36).substr(2, 9);
console.log(`[DEBUG] Creating logger instance ${instanceId} at ${new Date().toISOString()}`);
// Ensure we only create one logger instance
if (global.appLogger) {
console.log(`[DEBUG] Reusing existing logger instance`);
module.exports = global.appLogger;
return;
}
const logger = winston.createLogger({ const logger = winston.createLogger({
level: config.isProduction ? 'info' : 'debug', level: config.isProduction ? 'info' : 'debug',
defaultMeta: { service: 'bnkops-map' }, defaultMeta: { service: 'bnkops-map', instanceId },
transports: [ transports: [
new winston.transports.Console({ new winston.transports.Console({
format: winston.format.combine( format: winston.format.combine(
@ -39,4 +50,7 @@ if (config.isProduction) {
})); }));
} }
// Store logger globally to prevent multiple instances
global.appLogger = logger;
module.exports = logger; module.exports = logger;