mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-05-01 02:52:35 +02:00
feat: Add tap-to-show path popup for mobile devices
Tooltips don't work on touchscreens. Added a popup that appears on tap/click, shows the full path, and auto-dismisses after 4 seconds. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1123,8 +1123,27 @@ main {
|
||||
|
||||
/* Path info in message meta (incoming messages) */
|
||||
.path-info {
|
||||
cursor: help;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px dotted currentColor;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Path popup (mobile-friendly tooltip) */
|
||||
.path-popup {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 0.35rem 0.6rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.7rem;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
margin-bottom: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
|
||||
@@ -721,7 +721,7 @@ function createMessageElement(msg) {
|
||||
const shortPath = segments.length > 4
|
||||
? `${segments[0]}\u2192...\u2192${segments[segments.length - 1]}`
|
||||
: segments.join('\u2192');
|
||||
metaInfo += ` | <span class="path-info" title="Path: ${fullPath}">Route: ${shortPath}</span>`;
|
||||
metaInfo += ` | <span class="path-info" onclick="showPathPopup(this, '${fullPath}')">Route: ${shortPath}</span>`;
|
||||
}
|
||||
|
||||
if (msg.is_own) {
|
||||
@@ -897,6 +897,31 @@ function resendMessage(content) {
|
||||
input.focus();
|
||||
}
|
||||
|
||||
/**
|
||||
* Show path popup on tap (mobile-friendly alternative to tooltip)
|
||||
*/
|
||||
function showPathPopup(element, fullPath) {
|
||||
// Remove any existing popup
|
||||
const existing = document.querySelector('.path-popup');
|
||||
if (existing) existing.remove();
|
||||
|
||||
const popup = document.createElement('div');
|
||||
popup.className = 'path-popup';
|
||||
popup.textContent = `Path: ${fullPath}`;
|
||||
element.style.position = 'relative';
|
||||
element.appendChild(popup);
|
||||
|
||||
// Auto-dismiss after 4 seconds or on outside tap
|
||||
const dismiss = () => popup.remove();
|
||||
setTimeout(dismiss, 4000);
|
||||
document.addEventListener('click', function handler(e) {
|
||||
if (!element.contains(e.target)) {
|
||||
dismiss();
|
||||
document.removeEventListener('click', handler);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Load connection status
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user