Adjust right click location, bottom links

This commit is contained in:
Will Bradley 2025-07-16 13:54:55 -07:00
parent 7087dea5ab
commit 62c9d92a2c
2 changed files with 26 additions and 15 deletions

View File

@ -207,8 +207,6 @@
<div class="auth-links"> <div class="auth-links">
<a href="/login">Login</a> <a href="/login">Login</a>
<span>|</span>
<a href="/city/salem">View Salem (Default)</a>
</div> </div>
</div> </div>
@ -240,17 +238,11 @@
if (user) { if (user) {
addCitySection.style.display = 'block'; addCitySection.style.display = 'block';
authLinks.innerHTML = ` authLinks.innerHTML = ``;
<a href="/dashboard">Dashboard</a>
<span>|</span>
<a href="/city/salem">View Salem (Default)</a>
`;
} else { } else {
addCitySection.style.display = 'none'; addCitySection.style.display = 'none';
authLinks.innerHTML = ` authLinks.innerHTML = `
<a href="/login">Login</a> <a href="/login">Login</a>
<span>|</span>
<a href="/city/salem">View Salem (Default)</a>
`; `;
} }
} }

View File

@ -145,7 +145,7 @@
.context-menu { .context-menu {
position: absolute; position: fixed;
background: white; background: white;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
@ -450,9 +450,16 @@
// Handle right-click context menu // Handle right-click context menu
map.on('contextmenu', function(e) { map.on('contextmenu', function(e) {
e.originalEvent.preventDefault(); e.originalEvent.preventDefault();
const clientX = e.originalEvent.clientX || e.originalEvent.pageX; // Use containerPoint relative to map + map container viewport position
const clientY = e.originalEvent.clientY || e.originalEvent.pageY; const containerPoint = e.containerPoint;
showContextMenu(clientX, clientY, e.latlng); const mapContainer = map.getContainer();
const mapRect = mapContainer.getBoundingClientRect();
const viewportX = mapRect.left + containerPoint.x;
const viewportY = mapRect.top + containerPoint.y;
console.log('Container point:', containerPoint);
console.log('Map rect:', mapRect);
console.log('Viewport coordinates:', viewportX, viewportY);
showContextMenu(viewportX, viewportY, e.latlng);
}); });
// Handle long-press for mobile // Handle long-press for mobile
@ -464,7 +471,13 @@
longPressStarted = true; longPressStarted = true;
longPressTimer = setTimeout(() => { longPressTimer = setTimeout(() => {
if (longPressStarted) { if (longPressStarted) {
showContextMenu(e.originalEvent.clientX, e.originalEvent.clientY, e.latlng); // Use containerPoint relative to map + map container viewport position
const containerPoint = e.containerPoint;
const mapContainer = map.getContainer();
const mapRect = mapContainer.getBoundingClientRect();
const viewportX = mapRect.left + containerPoint.x;
const viewportY = mapRect.top + containerPoint.y;
showContextMenu(viewportX, viewportY, e.latlng);
} }
}, 500); // 500ms for long press }, 500); // 500ms for long press
} }
@ -498,12 +511,18 @@
const contextMenu = document.getElementById('contextMenu'); const contextMenu = document.getElementById('contextMenu');
contextMenuPosition = latlng; contextMenuPosition = latlng;
console.log('showContextMenu called with coordinates:', x, y);
console.log('Mouse event coordinates should be:', x, y);
contextMenu.style.display = 'block'; contextMenu.style.display = 'block';
contextMenu.style.left = x + 'px'; contextMenu.style.left = x + 'px';
contextMenu.style.top = y + 'px'; contextMenu.style.top = y + 'px';
// Adjust position if menu goes off screen // Check actual position after setting
const rect = contextMenu.getBoundingClientRect(); const rect = contextMenu.getBoundingClientRect();
console.log('Context menu actual position:', rect.left, rect.top);
// Adjust position if menu goes off screen
const viewportWidth = window.innerWidth; const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight; const viewportHeight = window.innerHeight;